抓取抖音 快手 摄像头直播流

近年来，各种平台的直播日益火爆。在生活生产中，我们需要一些直播的场景。如将抖音、快手等平台的直播推流抓取，直接在网络播放器中实时播放。能否做到呢？和大表哥一起来研究吧！

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/3_20221028182552.gif

?常见的直播三大协议

RTMP 协议为流媒体而设计，在推流中用的比较多，同时大多 CDN 厂商支持RTMP 协议。

HTTP-FLV 使用类似 RTMP流式的 HTTP 长连接，需由特定流媒体服务器分发的，兼顾两者的优点。以及可以复用现有 HTTP 分发资源的流式协议。它的实时性和 RTMP 相等，与 RTMP 相比又省去了部分协议交互时间，首屏时间更短，可拓展的功能也更多。

HLS 作为苹果提出的直播协议，在 iOS 端占据了不可撼动的地位，Android 端也同时提供相应的支持。
http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028182848.png?x-oss-process=style/gzh

?获取抖音 快手直播流

如果获取抖音的直播地址呢？我们只需利用流量分析工具抓取含有以上协议的url就行了。
首先我们找到要抓取的当前直播。并将其分享，如下：

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028183449.png?x-oss-process=style/gzh
将分享的地址在浏览器中打开，bing

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028183759.png?x-oss-process=style/gzh
然后利用流量分析工具抓取当前数据包。

然后，我们搜索直播协议中的文件格式flv或者m3u8即可。

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028184833.png?x-oss-process=style/gzh

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028184858.png?x-oss-process=style/gzh
右键，复制地址。然后放入流媒体播放工具测试。

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185013.png?x-oss-process=style/gzh
效果如下：

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185059.png?x-oss-process=style/gzh
同样的方法，我们可以抓取快手 B站的直播流。

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185406.png?x-oss-process=style/gzh
抓取数据
http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185441.png?x-oss-process=style/gzh

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028185617.png?x-oss-process=style/gzh

?利用Html展示

现在遇到这样一个新的问题。我们获取了直播流。但是只能通过流媒体播放器才能播放。想通过html来播放直播视频可以吗？
我们知道在H5中，video标签是用来播放视频的。但是它仅仅解析mp4 avi等常见的格式。而flv m3u8等格式是不支持的。如何解决呢？

?认识flv.js

一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

flv.js只做了一件事，在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据，再通过Media Source Extensions API 喂给原生HTML5 Video标签。(HTML5 原生仅支持播放 mp4/webm 格式，不支持 FLV)

✍代码示例

首先，我们需要先引入flv.js

<script src="https://cdn.bootcss.com/flv.js/1.3.3/flv.js"></script>

html代码如下：

<video width="300px" height="400px" id="videoElement" controls></video>
<script>
  if (flvjs.isSupported()) {
  var videoElement = document.getElementById('videoElement');
  var flvPlayer = flvjs.createPlayer({
  type: 'flv',
  url: 'https://pull-f3.douyincdn.com/third/stream-111864726937404075_hd.flv?abr_pts=-1800'
  });
  flvPlayer.attachMediaElement(videoElement);
  flvPlayer.load();
  flvPlayer.play();
    }
</script>

效果如下：

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028190554.png?x-oss-process=style/gzh

?抓取摄像头直播流

我们也常见一些直播，使用景点的摄像头进行实时直播。又是怎么做到的呢？
这里我们以家用的TPLink摄像头为例。
在摄像头APP中分享设备，然后抓取直播流。

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028191837.png?x-oss-process=style/gzh
抓数据包
http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028191954.png?x-oss-process=style/gzh
测试

http://xiaoyaozi666.oss-cn-beijing.aliyuncs.com/image_20221028192206.png?x-oss-process=style/gzh

?总结

本期，我们讲解的视频直播流协议的抓取。原理也很简单，无非就是抓包筛选直播协议flv m3u8即可。