用 Vue 写了个斗鱼的 Web App

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

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

这是一个创建于 3434 天前的主题，其中的信息可能已经有所发展或是发生改变。

前几天我的好友 @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

2016-07-17 14:06:27 +08:00

@yatessss

zhuangzhuang1988

2016-07-17 14:32:01 +08:00

牛逼..

Pastsong

2016-07-17 14:35:00 +08:00

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

Stlin

2016-07-17 14:37:45 +08:00

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

wooyin

2016-07-17 14:52:37 +08:00 via Android

厉害

Stlin

2016-07-17 14:57:45 +08:00

@zhuangzhuang1988
@wooyin QAQ

Artotria

2016-07-17 15:10:40 +08:00 via iPhone

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

liyvhg

2016-07-17 15:14:09 +08:00 via Android

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

Stlin

2016-07-17 15:16:19 +08:00

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

Stlin

2016-07-17 15:18:56 +08:00

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

paradoxs

2016-07-17 15:19:48 +08:00

厉害啊...

liyvhg

2016-07-17 15:25:03 +08:00 via Android

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

Stlin

2016-07-17 15:30:40 +08:00

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

liyvhg

2016-07-17 15:40:47 +08:00 via Android

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

Stlin

2016-07-17 15:47:45 +08:00

@liyvhg

我也想知道怎么弄啊~

liyvhg

2016-07-17 15:56:47 +08:00 via Android

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

GG668v26Fd55CP5W

2016-07-17 16:10:49 +08:00 via iPhone

非常好，学习

GG668v26Fd55CP5W

2016-07-17 16:15:23 +08:00 via iPhone

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

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

2016-07-17 16:31:50 +08:00

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

Stlin

2016-07-17 16:36:14 +08:00

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

rashawn

2016-07-17 16:39:20 +08:00

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

letitbesqzr

2016-07-17 16:42:33 +08:00

@Stlin

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

liyvhg

2016-07-17 16:45:07 +08:00 via Android

@letitbesqzr 新技能 get

Stlin

2016-07-17 16:48:23 +08:00

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

HikariNoSenritsu

2016-07-17 17:10:14 +08:00

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

fhefh

2016-07-17 17:10:36 +08:00

nice mark

hasbug

2016-07-17 17:12:50 +08:00

mark

beilun

2016-07-17 17:28:45 +08:00 via iPad

斗鱼竟然有 api

Stlin

2016-07-17 17:33:08 +08:00

@HikariNoSenritsu

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

Stlin

2016-07-17 17:33:36 +08:00

@beilun

32/div>

Stlin

2016-07-17 17:47:05 +08:00

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

Bryan0Z

2016-07-17 17:53:08 +08:00 via Android

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

Stlin

2016-07-17 18:02:30 +08:00

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

RickyBoy

2016-07-17 18:20:11 +08:00

@Stlin China 不是 Chian

FrankFang128

2016-07-17 18:21:21 +08:00

这需要 Vue?

Bryan0Z

2016-07-17 18:22:09 +08:00 via Android

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

Stlin

2016-07-17 18:23:48 +08:00

@RickyBoy 尴尬~ 没注意到

Stlin

2016-07-17 18:24:20 +08:00

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

FrankFang128

2016-07-17 18:26:11 +08:00

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

Stlin

2016-07-17 18:36:23 +08:00

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

fxxkgw

2016-07-18 09:54:47 +08:00

看不看 67373 啊？；）

linpf

2016-07-18 12:20:48 +08:00

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

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

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

太反人类了 Orz

linpf

2016-07-18 12:31:04 +08:00

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

Stlin

2016-07-18 13:23:33 +08:00

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

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

Stlin

2016-07-18 13:23:56 +08:00

@linpf 我放在阿里云上面的

Kokororin

2016-07-18 16:26:46 +08:00

好厉害……

echopan

2016-07-18 19:17:03 +08:00

支持一下我看过您的博客

echopan

2016-07-18 19:17:15 +08:00

@Kokororin ＝。＝

hronro

2016-07-18 19:22:38 +08:00 via Android

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

Stlin

2016-07-18 19:25:43 +08:00

@Kokororin _(:з”∠)_

@echopan 谢谢 freedom 0.0

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

yatessss

2016-07-19 14:15:48 +08:00

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

Stlin

2016-07-19 14:44:33 +08:00

@yatessss 要手机才能播放呢~

kkdd

2016-07-19 16:56:09 +08:00

支持一下

kevin1852

2016-07-21 20:16:05 +08:00 via iPhone

斗鱼三骚不在了

opencasting

2016-07-22 18:32:19 +08:00

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