用 Vue 写了个斗鱼的 Web App

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 3770 days ago, the information mentioned may be changed or developed.

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

动图演示

Demo

在线演示

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

项目地址

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

Supplement 1 · Jul 17, 2016

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

二维码

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

斗鱼

Vue

演示

直播

56 replies • 2016-07-22 18:32:19 +08:00

Stlin

Jul 17, 2016

@yatessss

zhuangzhuang1988

Jul 17, 2016

牛逼..

Pastsong

Jul 17, 2016

斗鱼居然有开放 API ，一会去看看有什么能玩的

Stlin

Jul 17, 2016

@Pastsong 有的，我忘了贴地址了 QAQ [这里]( http://dev-bbs.douyutv.com/forum.php?mod=forumdisplay&fid=37)

wooyin

Jul 17, 2016 via Android

厉害

Stlin

Jul 17, 2016

@zhuangzhuang1988
@wooyin QAQ

shyrz

Jul 17, 2016 via iPhone

看上去很赞，话说熊猫战旗什么的有没开放 api

liyvhg

Jul 17, 2016 via Android

能用 HTML5 来播放斗鱼的直播视频吗？

Stlin

Jul 17, 2016

@Artotria 不清楚诶~ 应该是有的吧，没有也会有人抓包抓出来了吧 2333

Stlin

Jul 17, 2016

@liyvhg 好像斗鱼没有支持呢~ 如果能用 html5 播放那就好了

paradoxs

Jul 17, 2016

厉害啊...

liyvhg

Jul 17, 2016 via Android

@Stlin 现在用 flash 播放器实在是太消耗资源了

Stlin

Jul 17, 2016

@liyvhg 对呀~ 而且苹果手机早就不支持了

liyvhg

Jul 17, 2016 via Android

@Stlin 有没有办法挖出 iOS 的接口～～好像都是 https 了，可能很难

Stlin

Jul 17, 2016

@liyvhg

我也想知道怎么弄啊~

liyvhg

Jul 17, 2016 via Android

@Stlin 思路：电脑上面搭代理，对自己设备做中间人证书攻击，可能能够抓到并且解密出数据
缺点：非官方公布的 API ，不会有官方支持

GG668v26Fd55CP5W

Jul 17, 2016 via iPhone

非常好，学习

GG668v26Fd55CP5W

Jul 17, 2016 via iPhone

另外请教一下，这个手机录屏图片怎么做的？

letitbesqzr

Jul 17, 2016

斗鱼是支持 html5 播放的,用的 hls...
比如这个 http://m.douyu.com/59073
播放地址 http://hlsa.douyutv.com/live/59073rU6MDZpr15Y_550/playlist.m3u8?wsSecret=da27834ef4a8dd1bae4afea606e66136&wsTime=1468740110
至于各个参数是什么就自行研究了。。。

Stlin

Jul 17, 2016

@falcon05 我 Mac 上直接用软件录的呢, 叫 GIPHY CAPTURE app store 里面的

Stlin

Jul 17, 2016

@letitbesqzr 大神能否给个例子呢？直接插在 video 里面么？直接访问也是被拒绝的

rashawn

Jul 17, 2016

@liyvhg 用 you-get 可以用 mpv 看斗鱼 Mac 用着还行

letitbesqzr

Jul 17, 2016

@Stlin

或者直接 vlc 把地址丢进去也能播

liyvhg

Jul 17, 2016 via Android

@letitbesqzr 新技能 get

Stlin

Jul 17, 2016

@letitbesqzr 嗯嗯~ 我也刚找到了，多谢大神了

HikariNoSenritsu

Jul 17, 2016

你 github 主页，地址： Shenzhen, China 拼错了。

fhefh

Jul 17, 2016

nice mark

hasbug

Jul 17, 2016

mark

beilun

Jul 17, 2016 via iPad

斗鱼竟然有 api😀

Stlin

Jul 17, 2016

@HikariNoSenritsu

哪里错了？应该是 China ， Shenzhen 么？？

Stlin

Jul 17, 2016

@beilun

Stlin

Jul 17, 2016

@letitbesqzr
@liyvhg
http://m.douyu.com/html5/live?roomId=61372 我发现了个手机端的 api ？

Bryan0Z

Jul 17, 2016 via Android

我想写个自动领鱼丸的程序挂服务器上一直没成功

Stlin

Jul 17, 2016

@Bryan0Z 嗯哼？你用什么写的？好像 github 上面有好多类似的程序啊，你可以参考参考呢？

RickyBoy

Jul 17, 2016

@Stlin China 不是 Chian 🙄

FrankFang128

Jul 17, 2016

这需要 Vue?

Bryan0Z

Jul 17, 2016 via Android

@Stlin 去搜了一下，还真有！回去翻译一下～

Stlin

Jul 17, 2016

@RickyBoy 尴尬~ 没注意到

Stlin

Jul 17, 2016

@FrankFang128 也许可能或者不需要吧

FrankFang128

Jul 17, 2016

@Stlin 不过用项目来学习 Vue ，是极好的。

Stlin

Jul 17, 2016

@FrankFang128 嗯嗯不过做这个最主要还是学习了 flexbox 布局

fxxkgw

Jul 18, 2016

看不看 67373 啊？；）

linpf

Jul 18, 2016

我对前端一窍不通。我很难想明白，为什么像这种把所有代码放到一个文件里的框架会流行起来。

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

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

太反人类了 Orz

linpf

Jul 18, 2016

@linpf 看了下尺寸 1.6M ，也不是很大，可能是我网络不好……

Stlin

Jul 18, 2016

@linpf 我都没弄成生产环境的

上线的还是开发环境呢。。

Stlin

Jul 18, 2016

@linpf 我放在阿里云上面的

Kokororin

Jul 18, 2016

好厉害……

echopan

Jul 18, 2016

支持一下我看过您的博客

echopan

Jul 18, 2016

@Kokororin ＝。＝

hronro

Jul 18, 2016 via Android

@linpf 分成多个文件，多个 http 请求，不是更花时间么

Stlin

Jul 18, 2016

@Kokororin _(:з”∠)_

@echopan 谢谢 freedom 0.0

@hronro 生产环境就打包成一个文件了...

yatessss

Jul 19, 2016

@Stlin 可以的哦！那个侧边栏好看~ 我得看看怎么写的~ 但是我用浏览器貌似播放不了啊。。。。

Stlin

Jul 19, 2016

@yatessss 要手机才能播放呢~

kkdd

Jul 19, 2016

支持一下

kevin1852

Jul 21, 2016 via iPhone

斗鱼三骚不在了

opencasting

Jul 22, 2016

不知道哪位大神能把斗鱼小助手更新下，今天改协议了，不能自动录像了