首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Stlin
V2EX  ›  程序员

用 Vue 写了个斗鱼的 Web App

  •  3      
  •   Stlin ·
    axhello · 2016-07-17 14:05:19 +08:00 · 24026 次点击
    这是一个创建于 3049 天前的主题，其中的信息可能已经有所发展或是发生改变。

    前几天我的好友 @shyling 发现了斗鱼竟然有第三方开发 API ，我也是挺喜欢看直播的，然后就兴趣使然做了这么一个东西。其实我对 vue+webpack 这种开发也不是很熟，所以也就刚好练练手，顺便学习学习 flexbox 的布局。

    动图演示

    Demo

    在线演示

    在线演示

    在线演示用手机模拟是看不了直播的，但是正常模式下可以看，我是用的分享外链来做的直播，这里我暂时找不到任何的解决方案，如果各位 V 友有什么意见或者建议，欢迎大家提出。

    项目地址

    https://github.com/axhello/douyu-vue

    第 1 条附言  ·  2016-07-17 18:27:51 +08:00

    手机可以播放直播啦 扫描二维码可观看~

    二维码

    UC浏览器有毒~ flexbox竟然不支持

  • 斗鱼
  • Vue
  • 演示
  • 直播
    56 条回复  •  2016-07-22 18:32:19 +08:00
    Stlin
        1
    Stlin  
    OP
       2016-07-17 14:06:27 +08:00
    @yatessss
    zhuangzhuang1988
        2
    zhuangzhuang1988  
       2016-07-17 14:32:01 +08:00
    牛逼..
    Pastsong
        3
    Pastsong  
       2016-07-17 14:35:00 +08:00
    斗鱼居然有开放 API ，一会去看看有什么能玩的
    Stlin
        4
    Stlin  
    OP
       2016-07-17 14:37:45 +08:00
    @Pastsong 有的，我忘了贴地址了 QAQ [这里]( http://dev-bbs.douyutv.com/forum.php?mod=forumdisplay&fid=37)
    wooyin
        5
    wooyin  
       2016-07-17 14:52:37 +08:00 via Android
    厉害
    Stlin
        6
    Stlin  
    OP
       2016-07-17 14:57:45 +08:00
    @zhuangzhuang1988
    @wooyin QAQ
    Artotria
        7
    Artotria  
       2016-07-17 15:10:40 +08:00 via iPhone
    看上去很赞，话说熊猫战旗什么的有没开放 api
    liyvhg
        8
    liyvhg  
       2016-07-17 15:14:09 +08:00 via Android
    能用 HTML5 来播放斗鱼的直播视频吗？
    Stlin
        9
    Stlin  
    OP
       2016-07-17 15:16:19 +08:00
    @Artotria 不清楚诶~ 应该是有的吧，没有也会有人抓包抓出来了吧 2333
    Stlin
        10
    Stlin  
    OP
       2016-07-17 15:18:56 +08:00   ❤️ 1
    @liyvhg 好像斗鱼没有支持呢~ 如果能用 html5 播放那就好了
    paradoxs
        11
    paradoxs  
       2016-07-17 15:19:48 +08:00
    厉害啊...
    liyvhg
        12
    liyvhg  
       2016-07-17 15:25:03 +08:00 via Android
    @Stlin 现在用 flash 播放器实在是太消耗资源了
    Stlin
        13
    Stlin  
    OP
       2016-07-17 15:30:40 +08:00
    @liyvhg 对呀~ 而且苹果手机早就不支持了
    liyvhg
        14
    liyvhg  
       2016-07-17 15:40:47 +08:00 via Android
    @Stlin 有没有办法挖出 iOS 的接口～～好像都是 https 了，可能很难
    Stlin
        15
    Stlin  
    OP
       2016-07-17 15:47:45 +08:00
    @liyvhg 我也想知道怎么弄啊~
    liyvhg
        16
    liyvhg  
       2016-07-17 15:56:47 +08:00 via Android
    @Stlin 思路：电脑上面搭代理，对自己设备做中间人证书攻击，可能能够抓到并且解密出数据
    缺点：非官方公布的 API ，不会有官方支持
    falcon05
        17
    falcon05  
       2016-07-17 16:10:49 +08:00 via iPhone
    非常好，学习
    falcon05
        18
    falcon05  
       2016-07-17 16:15:23 +08:00 via iPhone
    另外请教一下，这个手机录屏图片怎么做的？
    letitbesqzr
        19
    letitbesqzr  
       2016-07-17 16:15:39 +08:00
    斗鱼是支持 html5 播放的,用的 hls...
    比如这个 http://m.douyu.com/59073
    播放地址 http://hlsa.douyutv.com/live/59073rU6MDZpr15Y_550/playlist.m3u8?wsSecret=da27834ef4a8dd1bae4afea606e66136&wsTime=1468740110
    至于各个参数是什么 就自行研究了。。。
    Stlin
        20
    Stlin  
    OP
       2016-07-17 16:31:50 +08:00   ❤️ 1
    @falcon05 我 Mac 上直接用软件录的呢, 叫 GIPHY CAPTURE app store 里面的
    Stlin
        21
    Stlin  
    OP
       2016-07-17 16:36:14 +08:00
    @letitbesqzr 大神能否给个例子呢？ 直接插在 video 里面么？直接访问也是被拒绝的
    rashawn
        22
    rashawn  
       2016-07-17 16:39:20 +08:00   ❤️ 1
    @liyvhg 用 you-get 可以用 mpv 看斗鱼 Mac 用着还行
    letitbesqzr
        23
    letitbesqzr  
       2016-07-17 16:42:33 +08:00   ❤️ 2
    @Stlin 或者直接 vlc 把地址丢进去也能播
    liyvhg
        24
    liyvhg  
       2016-07-17 16:45:07 +08:00 via Android
    @letitbesqzr 新技能 get
    Stlin
        25
    Stlin  
    OP
       2016-07-17 16:48:23 +08:00   ❤️ 1
    @letitbesqzr 嗯嗯~ 我也刚找到了，多谢大神了
    HikariNoSenritsu
        26
    HikariNoSenritsu  
       2016-07-17 17:10:14 +08:00
    你 github 主页，地址： Shenzhen, China 拼错了。
    fhefh
        27
    fhefh  
       2016-07-17 17:10:36 +08:00
    nice mark
    hasbug
        28
    hasbug  
       2016-07-17 17:12:50 +08:00
    mark
    beilun
        29
    beilun  
       2016-07-17 17:28:45 +08:00 via iPad
    斗鱼竟然有 api😀
    Stlin
        30
    Stlin  
    OP
       2016-07-17 17:33:08 +08:00
    @HikariNoSenritsu 哪里错了？ 应该是 China ， Shenzhen 么 ？？
    Stlin
        31
    Stlin  
    OP
       2016-07-17 17:33:36 +08:00
    @beilun
    Stlin
        32
    Stlin  
    OP
       2016-07-17 17:47:05 +08:00   ❤️ 3
    @letitbesqzr
    @liyvhg
    http://m.douyu.com/html5/live?roomId=61372 我发现了个手机端的 api ？
    Bryan0Z
        33
    Bryan0Z  
       2016-07-17 17:53:08 +08:00 via Android
    我想写个自动领鱼丸的程序挂服务器上一直没成功
    Stlin
        34
    Stlin  
    OP
       2016-07-17 18:02:30 +08:00
    @Bryan0Z 嗯哼？你用什么写的？好像 github 上面有好多类似的程序啊，你可以参考参考呢？
    RickyBoy
        35
    RickyBoy  
       2016-07-17 18:20:11 +08:00
    @Stlin China 不是 Chian 🙄
    FrankFang128
        36
    FrankFang128  
       2016-07-17 18:21:21 +08:00
    这需要 Vue?
    Bryan0Z
        37
    Bryan0Z  
       2016-07-17 18:22:09 +08:00 via Android
    @Stlin 去搜了一下，还真有！回去翻译一下～
    Stlin
        38
    Stlin  
    OP
       2016-07-17 18:23:48 +08:00
    @RickyBoy 尴尬~ 没注意到
    Stlin
        39
    Stlin  
    OP
       2016-07-17 18:24:20 +08:00
    @FrankFang128 也许可能或者 不需要吧
    FrankFang128
        40
    FrankFang128  
       2016-07-17 18:26:11 +08:00
    @Stlin 不过用项目来学习 Vue ，是极好的。
    Stlin
        41
    Stlin  
    OP
       2016-07-17 18:36:23 +08:00
    @FrankFang128 嗯嗯 不过做这个最主要还是学习了 flexbox 布局
    fxxkgw
        42
    fxxkgw  
       2016-07-18 09:54:47 +08:00
    看不看 67373 啊？ ；）
    linpf
        43
    linpf  
       2016-07-18 12:20:48 +08:00
    我对前端一窍不通。我很难想明白，为什么像这种把所有代码放到一个文件里的框架会流行起来。

    我这里仅仅加载 app.js 用了 15 秒多，不知道是不是因为我网速太慢。

    15 秒的空白页，我要不是开着 chrome 调试我都会以为这个网站打不开。

    太反人类了 Orz
    linpf
        44
    linpf  
       2016-07-18 12:31:04 +08:00
    @linpf 看了下尺寸 1.6M ，也不是很大，可能是我网络不好……
    Stlin
        45
    Stlin  
    OP
       2016-07-18 13:23:33 +08:00
    @linpf 我都没弄成生产环境的 上线的还是开发环境呢。。
    Stlin
        46
    Stlin  
    OP
       2016-07-18 13:23:56 +08:00
    @linpf 我放在阿里云上面的
    Kokororin
        47
    Kokororin  
       2016-07-18 16:26:46 +08:00
    好厉害……
    echopan
        48
    echopan  
       2016-07-18 19:17:03 +08:00
    支持一下 我看过您的博客
    echopan
        49
    echopan  
       2016-07-18 19:17:15 +08:00
    @Kokororin ＝。＝
    hronro
        50
    hronro  
       2016-07-18 19:22:38 +08:00 via Android
    @linpf 分成多个文件，多个 http 请求，不是更花时间么
    Stlin
        51
    Stlin  
    OP
       2016-07-18 19:25:43 +08:00   ❤️ 1
    @Kokororin _(:з”∠)_

    @echopan 谢谢 freedom 0.0

    @hronro 生产环境就打包成一个文件了...
    yatessss
        52
    yatessss  
       2016-07-19 14:15:48 +08:00
    @Stlin 可以的哦！ 那个侧边栏好看~ 我得看看怎么写的~ 但是我用浏览器 貌似播放不了啊。。。。
    Stlin
        53
    Stlin  
    OP
       2016-07-19 14:44:33 +08:00
    @yatessss 要手机才能播放呢~
    kkdd
        54
    kkdd  
       2016-07-19 16:56:09 +08:00
    支持一下
    kevin1852
        55
    kevin1852  
       2016-07-21 20:16:05 +08:00 via iPhone
    斗鱼三骚不在了
    opencasting
        56
    opencasting  
       2016-07-22 18:32:19 +08:00
    不知道哪位大神能把斗鱼小助手更新下，今天改协议了，不能自动录像了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2808 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 15:03 · PVG 23:03 · LAX 07:03 · JFK 10:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.