EasyNVR网页/微信播放RTSP摄像机HLS/RTMP播放时出现起播等待问题的优化过程
2017-07-01 11:37
1011 查看
EasyNVR 项目中, 我们需要在网页/微信中嵌入 HLS 播放器, 实现直播效果. 开发过程中, 我们调研了很多HLS播放器, 包括 百度cyberplayer, ckplayer, flowplayer, videojs, 我们重点试用了 cyberplayer 和 videojs 这两款播放器, 最终选择 videojs 作为我们的HLS 直播播放器.
上面图中,并没有列出微软新出的浏览器Edge的兼容情况. 实际使用中, 我们遇到在 Win10上用Edge浏览器时, 出现不能播放的问题. 由于没有cyberplayer源码, 想要修复这个问题却无从着手.更重要的, cyberplayer 是为百度云开发者使用的, 需要一个开发者帐号申请的token来激活. 也就是说这个播放器在加载过程中会去连接百度云网站进行认证.这让我们难以忍受.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
支持微信扫描二维码观看
支持微信/微博直播分享
基于纯Web网页/无插件H5观看(不用安装任何APP)
支持海康/大华等市面上几乎全部的网络摄像机接入
实时IPCamera/NVR直播画面监控
服务器带宽:根据自身情况而定 : 5M-100M不等(与用户要求的在线人数有关系);
一个或多个监控摄像头(支持RTSP或Onvif) 。
为用户实现海康/大华监控摄像头实现基于web端无插件跨平台直播;
实现PC、安卓、IOS苹果三种主流终端都可以观看监控画面;
提供完整实例给用户,提供完整技术教程,提供技术售后。
实测。我们亲自购买海康/大华/雄迈/天地伟业网络摄像头IPC,进行实测验证;庞大的开源社区用户群体;
多种方案。我们目前能提供1x / 2x / 3x 三种方案,这四种方案基本包含了IPC所处的各种网络环境;
稳定。我们做出的直播效果,无论是PC端直播画面,还是移动端直播画面,都比较稳定;
操作方便。我们给用户提供完整的范例及教程,普通人员均可按范例添加或删减摄像头;
省心省力。一个页面适配PC、安卓、IOS苹果、微信,简化繁杂的主流终端的适配,省心省力。
从 cyberplayer 说起
百度的这款播放器很优秀,它作为HLS播放器,不需要依赖插件,做到了简单易用, 而且还在不断更新中. 我们一开始选择使用cyberplayer, 正是因为这一点. 在浏览器兼容方面, 其官网给出了下面这张图:上面图中,并没有列出微软新出的浏览器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();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
EasyNVR 介绍
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行采集,进行全平台终端直播(PC、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发。项目地址: https://github.com/EasyDarwin/EasyNVRRTSP监控摄像头Web无插件化监控
IPCamera/NVR实时画面监控/基于浏览器的PC/Android/iOS/微信全平台直播支持PC端/Android安卓端/iOS苹果端/微信端无插件化观看支持微信扫描二维码观看
支持微信/微博直播分享
基于纯Web网页/无插件H5观看(不用安装任何APP)
支持海康/大华等市面上几乎全部的网络摄像机接入
实时IPCamera/NVR直播画面监控
EasyNVR用户需要准备什么?
服务器方面:Windows2008/Windows2012/CentOS 64位操作系统 、4G内存、2核CPU及以上;服务器带宽:根据自身情况而定 : 5M-100M不等(与用户要求的在线人数有关系);
一个或多个监控摄像头(支持RTSP或Onvif) 。
我们提供什么样的服务?
为用户搭建服务器端环境;为用户实现海康/大华监控摄像头实现基于web端无插件跨平台直播;
实现PC、安卓、IOS苹果三种主流终端都可以观看监控画面;
提供完整实例给用户,提供完整技术教程,提供技术售后。
为什么选择我们?
经验。我们拥有数年流媒体技术服务的实际应用经验,也拥有web流媒体播放器操作经验,熟悉多终端跨平台技术;实测。我们亲自购买海康/大华/雄迈/天地伟业网络摄像头IPC,进行实测验证;庞大的开源社区用户群体;
多种方案。我们目前能提供1x / 2x / 3x 三种方案,这四种方案基本包含了IPC所处的各种网络环境;
稳定。我们做出的直播效果,无论是PC端直播画面,还是移动端直播画面,都比较稳定;
操作方便。我们给用户提供完整的范例及教程,普通人员均可按范例添加或删减摄像头;
省心省力。一个页面适配PC、安卓、IOS苹果、微信,简化繁杂的主流终端的适配,省心省力。
获取更多信息
邮件:support@easydarwin.orgWEB:www.EasyDarwin.orgQQ交流群:587254841Copyright © EasyDarwin.org 2012-2017相关文章推荐
- EasyNVR网页/微信播放RTSP摄像机HLS/RTMP播放时出现起播等待问题的优化过程
- EasyNVR实现网页/微信播放RTSP摄像机HLS直播时出现起播等待问题的优化过程
- RTSP转RTMP-HLS网页无插件视频直播-EasyNVR功能介绍-音频开启
- EasyDarwin在做拉模式转发海康RTSP摄像机视频流的过程中出现花屏问题的解决方案
- EasyDarwin在做拉模式转发海康RTSP摄像机视频流的过程中出现花屏问题的解决方案
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)
- RTSP转RTMP-HLS网页无插件视频直播-EasyNVR功能介绍-音频开启
- EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动
- EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动
- 通过摄像机视频设备或者流媒体服务器SDK获取到数据转换成RTMP流实现网页/手机微信播放
- 前段播放 流媒体(RTMP,RTSP,HLS)
- 手机可以播放 网页播放mp4视频,出现有声音无图像问题
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息
- EasyPlayer Android基于ffmpeg实现播放(RTSP/RTMP/HTTP/HLS)同步录像功能
- EasyPlayer Android基于ffmpeg实现播放(RTSP/RTMP/HTTP/HLS)同步录像功能
- 将海康大华等网络摄像机RTSP流进行网页Flash rtmp和H5 hls直播的技术方案
- HTML5和HLS协议两种技术完美结合解决移动端网页播放问题
- 编译ijkplayer,并添加rtsp、rtmp支持,解决无法播放、unknown、延迟问题
- 通过摄像机视频设备或者流媒体服务器SDK获取到数据转换成RTMP流实现网页/手机微信播放
- [工具]利用EasyRTSPClient工具检查摄像机RTSP流不能播放原因以及排查音视频数据无法播放问题