EasyNVR网页/微信播放RTSP摄像机HLS/RTMP播放时出现起播等待问题的优化过程
EasyNVR 项目中, 我们需要在网页/微信中嵌入 HLS 播放器, 实现直播效果. 开发过程中, 我们调研了很多HLS播放器, 包括 百度cyberplayer, ckplayer, flowplayer, videojs, 我们重点试用了 cyberplayer 和 videojs 这两款播放器, 最终选择 videojs 作为我们的HLS 直播播放器.
从 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 foundif(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/EasyNVR
RTSP监控摄像头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.org
WEB:www.EasyDarwin.org
QQ交流群:587254841
Copyright © EasyDarwin.org 2012-2017
EasyNVR网页/微信播放RTSP摄像机HLS/RTMP播放时出现起播等待问题的优化过程相关推荐
- Windows PC、 Linux、 Android、 iOS多平台支持H5无插件播放RTSP摄像机解决方案
Windows PC. Linux. Android. iOS多平台支持H5无插件播放RTSP摄像机解决方案 需求分析 视频流媒体监控行业已经进入互联网时代,浏览器承载了绝大多数的互联网访问流量,目前 ...
- EasyNVR是如何做到无插件播放RTSP摄像机,完美将海康、大华、宇视等安防设备向互联网转化的
5G快来了,视频将会是跑在网络上流量最多的东西,短视频.长视频.电影.视频通话.视频监控,各种各样的,而在消费级领域,监控视频近些年也越来越受到关注和欢迎,从萤石摄像机的诞生.到一众互联网家用摄像机的 ...
- EasyNVR是怎么做到Web浏览器播放RTSP摄像机直播视频延时控制在一秒内的
背景说明 由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合也是大势所趋.传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都是都需要OCX Web插件进行直播.对 ...
- [转] web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!
需求 问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估计也不会有: 问题:可以自己做浏览器插件播放RTSP吗? 答案:可以的,chrome做ppap ...
- Python Gstreamer播放rtsp视频流(海康IPCAM)
Python Gstreamer播放rtsp视频流(海康IPCAM) 播放思路: 图解: 1.首先通过IPCAM的ip与用户等信息获得rtsp码: 海康新版IPCAM的rtsp地址规则为:rtsp ...
- appemit使用mpvPlayer在谷歌chrome浏览器播放RTSP
A 方案 VLC播放RTSP B 方案mplayer播放RTSP C方案 mpvPlayer播放RTSP 开源程序 mpvPlayer ,播放本地和网络视频,支持RTSP 关于MPV组件以及相关 ...
- appemit使用mplayer在谷歌chrome浏览器播放RTSP
A 方案 VLC播放rtsp B 方案mplayer播放rtsp C方案 mpvPlayer播放rtsp 1.MPlayer简介 MPlayer(http://www.mplayerhq ...
- 谷歌浏览器Chrome播放rtsp视频流解决方案easyPlayerRTSP
A 方案 VLC播放RTSP B 方案mplayer播放RTSP C方案 mpvPlayer播放RTSP D方案 easyPlayerRTSP调用ffmpeg库播放RTSP 使用AppEmit中间件来 ...
- 在浏览器中使用VLC插件实现播放RTSP流视频
在浏览器中使用VLC插件实现播放RTSP流视频 一.安装VLC插件 二.编写测试html文件 三.生成一个测试用RTSP流视频 四.在浏览器中播放RTSP流视频 五.VLC插件知识扩展 1.VLC插件 ...
- EasyNVR网页摄像机直播方案H5前端构建之:如何播放HLS
背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...
最新文章
- Android 人民币符号在布局中实现的效果不一样的处理方法
- 服务机器人---建图工具
- golang 学习 (八)协程
- Normalization
- Java获取指定日期的月初和月末日子
- CTF中智能合约部署交互基础
- Nodejs 文件上传
- ArcGIS 10.x属性表乱码问题解决办法
- gcc可以编译python程序吗_GCC编译C语言程序完整演示
- (二)Java数组的使用
- const again and again
- 拓端tecdat:R语言集成模型:提升树boosting、随机森林、约束最小二乘法加权平均模型融合分析时间序列数据
- Linux下手机驱动安装
- 三菱FX1N与东元Teco N310变频器通讯实战程序
- ctfmon.exe频繁出错的一个解决办法
- lldp协议代码阅读_LLDPD协议验证过程记录
- python 小于号大于号是什么意思_大于号和小于号怎么区别
- 3、MybatisPlus
- 2019年股票股息率分红最高排名
- JUC笔记(synch、ReentrantLock、volatile等)
热门文章
- 彻底解决NSEC病毒
- 李彦宏“泼水门”:舆论的狂欢,还是魏则西的葬歌?
- C++ Class6-虚函数-虚析构-多态-纯虚函数-抽象类-静态联编和动态联编-多态小练习(英雄联盟)
- (很容易懂,你把代码复制粘贴即可解决问题)高等代数/线性代数-基于python实现矩阵法求解齐次方程组
- CI框架使用PHPExcel生成快递面单
- 打印机驱动如何连接计算机,打印机与电脑第一次连接驱动怎么操作
- uni-app 从本地项目选择图片或使用相机拍照及图片预览
- 在Sdx中使用xfOpenCV
- CSS mask遮罩
- vba 汉字转拼音 -- wps office