EasyNVR实现网页/微信播放RTSP摄像机HLS直播时出现起播等待问题的优化过程

程序员文章站 2022-07-08 18:22:30

...

EasyNVR 项目中, 我们需要在网页/微信中嵌入 HLS 播放器, 实现直播效果. 开发过程中, 我们调研了很多HLS播放器, 包括百度cyberplayer, ckplayer, flowplayer, videojs, 我们重点试用了 cyberplayer 和 videojs 这两款播放器, 最终选择 videojs 作为我们的HLS 直播播放器.

从 cyberplayer 说起

百度的这款播放器很优秀,它作为HLS播放器,不需要依赖插件,做到了简单易用, 而且还在不断更新中. 我们一开始选择使用cyberplayer, 正是因为这一点. 在浏览器兼容方面, 其官网给出了下面这张图:

EasyNVR实现网页/微信播放RTSP摄像机HLS直播时出现起播等待问题的优化过程

上面图中,并没有列出微软新出的浏览器Edge的兼容情况. 实际使用中, 我们遇到在 Win10上用Edge浏览器时, 出现不能播放的问题. 由于没有cyberplayer源码, 想要修复这个问题却无从着手.

更重要的, cyberplayer 是为百度云开发者使用的, 需要一个开发者帐号申请的token来**. 也就是说这个播放器在加载过程中会去连接百度云网站进行认证.这让我们难以忍受.

使用 videojs

videojs 是在github上面开源的一款播放器, 目前 star 数 16000+ , 足见它有多受欢迎. 不同于 cyberplayer, videojs 作为HLS播放器, 需要通过插件 videojs-contrib-hls 来支持, 因此配置方面相对 cyberplayer 稍显复杂. videojs-contrib-hls 借助 Media Source Extensions 在现代PC浏览器中, 可以完全不依赖 Flash 播放hls视频.

EasyNVR中有一个这样的应用场景: 设备可以配置为按需直播. 当用户请求获取设备直播地址,服务端返回直播地址, 并开始触发切片. 切片生成m3u8文件是需要一定时间的, 一般来说, 要等第一个ts文件生成好, 才会生成m3u8, 这个过程需要10秒左右时间. 也就是说, 在客户端拿到直播地到m3u8文件真正生成, 这个中间有10秒左右的时间差.客户端常见的做法是一旦拿到直播地址, 立即初始化播放器, 起播. 实测发现在这种情况下, 初始化 videojs ,给了一个不存在的 HLS 播放地址, 导致 videojs 点开始播放后, 处于加载转圈状态, 过一段时间, 提示无法播放的错误. 我们对比发现, 同样的场景, cyberplayer 没有这个问题.

既然 videojs-contrib-hls 没有起播 404 自动重连的机制, 那么我们就给它加上. 获取到直播地址后, 不是立即用它来初始化 videojs 播放器起播; 而是向这个直播地址发起 HTTP 请求 , 如果返回 404 , 间隔一定时间后, 再次发起请求, 直到返回 200. 这样就保证 videojs 起播的时候, 直播地址是有效存在的.

示例代码:

var timeout = 10000;
var step = 500;
var cnt = 0;
function test(){
    if($this.is(":hidden")) return;
    cnt += step;
    $.ajax(src,{
        type : 'HEAD',
        global : false,
        complete : function(xhr,ts){
            if(cnt > timeout){
                $this.find(".player-wrapper").unmask();
                $.gritter.add("请求数据失败");
                return;
            }
            //xhr.status == 0 , when cross domain request not found
            if(xhr.status == 404 || xhr.status == 0 || (xhr.status != 200 && !isPC())){
                console.log("video is no ready, waiting...");
                setTimeout(test,step);
            }else{
                $this.find(".player-wrapper").unmask();
                $this.find("source").attr("src", src).attr("type","application/x-mpegURL");
                player = videojs("videojs",{
                    autoplay : true
                }); 
            }
        }
    })
}
$this.find(".player-wrapper").mask("加载中...", 100);
test();

EasyNVR 介绍

EasyNVR能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行采集，进行全平台终端直播（PC、Android、iOS），并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发。

项目地址: https://github.com/EasyDarwin/EasyNVR