【现已公开】记录在线直播技术及其实时视频流可视化方法（前端）。
前面写的在三维模型上贴视频的算法要真正应用了，视频使用的是萤石直播的在线视频流，中间遇到了一些问题记录下。
在线直播技术
直播中常用到的流媒体协议有 rtmp、http、hls、rtsp 。
根据其数据分段可分为两类，以 rtmp 为代表的连续流协议，以 hls 为代表的切片文件协议。
这里贴一些直播的真实地址：
哔哩哔哩 https://720759109.cloudvdn.com/live-qn/553668/live_50329118_9516950.flv
斗鱼直播 https://txy.live-play.acgvideo.com/live-txy/124776/live_352577_9496178.flv
萤石直播（移动端）http://hzhls07.ys7.com:7891/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8
为了防盗链，这些地址是会变化的，不过我们可以看到 flv 后缀，也就是连续流的协议比较多。
具体详细区别可以查阅参考资料。
可视化技术
实时视频流因为协议的原因，和直接播放视频又有点不太一样。
1、针对 HTML5 视频播放，可选 <video></video> 标签直接播放。
这里推荐使用一款优秀的开源库
Video.js - open source HTML5 & Flash video player http://www.videojs.com
使用和原生基本没有区别，仓库地址：https://github.com/videojs/video.js
对于直播播放的需求，可以使用插件
HLS library for video.js http://videojs.github.io/videojs-contrib-hls/
示例代码
<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
<source
src="https://example.com/index.m3u8"
type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>因为在项目里面需要使用 video 标签，这款开源库对代码侵入性有点高，所以没有使用。
2、Bilibili 开源库 flvjs 播放器
前面提到目前使用连续流协议的直播比较多，其实也是因为其有延时低的优势。
这时我们可以采用另外一款优秀的开源库
HTML5 FLV Player https://github.com/Bilibili/flv.js
示例代码：
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/flv/video.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>这个代码侵入性就很低了，播放在线或者直播视频很方便。
遗憾的是只支持 flv 或者 mp4 格式，不过很有前瞻性。
3、直播流专用播放器 hlsjs 介绍
前面链接可以看到，实际项目中使用的 hls 流媒体协议。
我们可以使用另外一款播放器
JavaScript HLS client using Media Source Extension http://video-dev.github.io/hls.js/demo
仓库地址：https://github.com/video-dev/hls.js
同样代码进入性很低，最终使用的是这个。
示例代码：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>这里在七牛云搭建了自己的 hls 协议直播流做测试。
七牛云：http://streams.wshunli.com/x36xhzz/x36xhzz.m3u8
源地址：https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8
国内迁移：https://coding.net/u/wshunli/p/streams/git/raw/master/x36xhzz/x36xhzz.m3u8
一些电视直播的视频流：
http://ivi.bupt.edu.cn/hls/cctv1.m3u8
http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8
一些问题
在实际使用过程中，视频是可以播放了，但是服务器不支持跨域访问 CROS ，这里使用 CDN 解决。
在又拍云或者七牛云做 CDN 后
将 hzhls07.ys7.com:7891 替换为 live.wshunli.com / hzhls07.live.wshunli.com 即可。【已停止解析】
http://hzhls07.ys7.com:7891/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294
http://hzhls01.ys7.com:7886/hcnp/472637161_1_1_1_0_cas.ys7.com_6500.m3u8?e75321b700354bba8eefb328e0f69e52
http://hzhls01.ys7.com:7890/hcnp/598370947_1_1_1_0_cas.ys7.com_6500.m3u8?f896989dd82a463a9c949aa2454ae2dd
这里可能要根据源地址/端口调整，估计会有很多子域名需要做 CDN ，这有点类似于反向代理技术啊。
参考资料
1、直播技术——流媒体协议 - CSDN博客
https://blog.csdn.net/qq_34447388/article/details/78995511
2、RTMP HLS HTTP 直播协议一次看个够 - 简书
https://www.jianshu.com/p/4c89b2c83e59
3、[原创]直播服务器简单实现 http_flv和hls 内网直播桌面 - lucpp - 博客园
https://www.cnblogs.com/luconsole/p/6079534.html
2019年06月23日公开全文。
评论 (0)