在线直播技术及其实时视频流可视化方法(前端)

Author Avatar
wshunli 6月 23, 2018
  • 在其它设备中阅读本文章

【现已公开】记录在线直播技术及其实时视频流可视化方法(前端)。

前面写的在三维模型上贴视频的算法要真正应用了,视频使用的是萤石直播的在线视频流,中间遇到了一些问题记录下。

在线直播技术

直播中常用到的流媒体协议有 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 解决。

原直播地址:http://hzhls07.ys7.com:7891/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294

在又拍云或者七牛云做 CDN 后

又拍云:http://live.wshunli.com/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294

七牛云: http://hzhls07.live.wshunli.com/hcnp/598370938_1_1_1_0_cas.ys7.com_6500.m3u8?72c37bfb139c4478aae93be333696294

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日公开全文

如果本文对您有所帮助,且您手头还很宽裕,欢迎打赏赞助我,以支付网站服务器和域名费用。 https://paypal.me/wshunli 您的鼓励与支持是我更新的最大动力,我会铭记于心,倾于博客。
本文链接:https://www.wshunli.com/posts/b4d6e25d.html