EasyNVR 项目中, 我们需要在网页/微信中嵌入 HLS 播放器, 实现直播效果. 开发过程中, 我们调研了很多HLS播放器, 包括 百度cyberplayerckplayerflowplayervideojs, 我们重点试用了 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 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/EasyNVR

RTSP监控摄像头Web无插件化监控

IPCamera/NVR实时画面监控/基于浏览器的PC/Android/iOS/微信全平台直播

  • 支持PC端/Android安卓端/iOS苹果端/微信端无插件化观看
  • 支持微信扫描二维码观看
  • 支持微信/微博直播分享
  • 基于纯Web网页/无插件H5观看(不用安装任何APP)
  • 支持海康/大华等市面上几乎全部的网络摄像机接入
  • 实时IPCamera/NVR直播画面监控

EasyNVR用户需要准备什么?

  1. 服务器方面:Windows2008/Windows2012/CentOS 64位操作系统 、4G内存、2核CPU及以上;
  2. 服务器带宽:根据自身情况而定 : 5M-100M不等(与用户要求的在线人数有关系);
  3. 一个或多个监控摄像头(支持RTSP或Onvif) 。

我们提供什么样的服务?

  1. 为用户搭建服务器端环境;
  2. 为用户实现海康/大华监控摄像头实现基于web端无插件跨平台直播;
  3. 实现PC、安卓、IOS苹果三种主流终端都可以观看监控画面;
  4. 提供完整实例给用户,提供完整技术教程,提供技术售后。

为什么选择我们?

  1. 经验。我们拥有数年流媒体技术服务的实际应用经验,也拥有web流媒体播放器操作经验,熟悉多终端跨平台技术;
  2. 实测。我们亲自购买海康/大华/雄迈/天地伟业网络摄像头IPC,进行实测验证;庞大的开源社区用户群体;
  3. 多种方案。我们目前能提供1x / 2x / 3x 三种方案,这四种方案基本包含了IPC所处的各种网络环境;
  4. 稳定。我们做出的直播效果,无论是PC端直播画面,还是移动端直播画面,都比较稳定;
  5. 操作方便。我们给用户提供完整的范例及教程,普通人员均可按范例添加或删减摄像头;
  6. 省心省力。一个页面适配PC、安卓、IOS苹果、微信,简化繁杂的主流终端的适配,省心省力。

获取更多信息

邮件:support@easydarwin.org

WEB:www.EasyDarwin.org

QQ交流群:587254841

Copyright © EasyDarwin.org 2012-2017

EasyNVR网页/微信播放RTSP摄像机HLS/RTMP播放时出现起播等待问题的优化过程的更多相关文章

  1. EasyNVR是怎么做到Web浏览器播放RTSP摄像机直播视频延时控制在一秒内的

    背景说明 由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合也是大势所趋.传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都是都需要OCX Web插件进行直播.对 ...

  2. web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!

    本文转自:http://www.cnblogs.com/babosa/p/7355468.html 需求 问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估 ...

  3. [转] web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!

    需求 问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估计也不会有: 问题:可以自己做浏览器插件播放RTSP吗? 答案:可以的,chrome做ppapi插件 ...

  4. 关于rtsp转码rtmp播放的两种方式,客户端直接转,远程服务器转

    需求 一.场景 用户多家门店有监控探头,设备是海康的和大华的.用户总部和门店不在一个网络下,并且总部要能实时调用查看门店监控,和门店回放画面.我们知道监控摄像机获取的视频是 rtsp 流的格式. 只能 ...

  5. EasyNVR RTSP摄像机HLS直播服务器中使用Onvif协议获取设备快照

    我们知道EasyNVR中可以获取快照信息,之前的文章也说明了EasyNVR是如何进行快照抓取的 这里我们使用另一种方法进行快照的抓取 流程 获取设备能力Capabilities 获取设备的能力,并且可 ...

  6. C# 实现播放RTSP 标准协议码流播放

    http://www.codeproject.com/Articles/507218/Managed-Media-Aggregation-using-Rtsp-and-Rtphttp://www.st ...

  7. 通过Onvif设备探索获取EasyNVR网页无插件播放所需要的摄像机硬盘录像机NVR的RTSP地址

    想实现网络监控摄像头进行视频直播的朋友门应该知道,方法其实非常简单,你不需要使用支持直播的网络摄像机,只需要经过一套流媒体服务器将监控摄像头的RTSP视频流转为RTMP\HLS\HTTP-FLV视频流 ...

  8. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

  9. EasyNVR网页Chrome无插件播放安防摄像机视频流是怎么做到web浏览器延时一秒内

    背景说明 由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋.传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCX Web插件进行直播.对于安防 ...

随机推荐

  1. 20145309《Java程序设计》第八周学习总结

    日志 •java.util.logging包提供了日志功能相关类与接口,使用日志的起点是logger类,Logger类的构造函数标示为protected,不是java.util.logging同包的类 ...

  2. 20145310第一周JAVA实验报告

    20145310第一周JAVA实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 使用JDK和IDE编译.运行简单 ...

  3. 20145314郑凯杰《信息安全系统设计基础》第9周学习总结 PART B

    20145314郑凯杰<信息安全系统设计基础>第9周学习总结 PART B 明确教材学习目标 注意每个系统调用的参数.返回值,会查帮助文档 阅读教材,完成课后练习(书中有参考答案),考核: ...

  4. git分支合并脚本

    为什么要写这个脚本 工作中经常会有合并分支的操作,一开始也不以为然,后来发现如果更新频繁的话,根本就停不下来,昨天上午正好有空,就完成了下面的这个初版 可能存在的问题 一般的应用场景都是:从maste ...

  5. 【cs231n】神经网络笔记笔记2

    ) # 对数据进行零中心化(重要) cov = np.dot(X.T, X) / X.shape[0] # 得到数据的协方差矩阵 数据协方差矩阵的第(i, j)个元素是数据第i个和第j个维度的协方差. ...

  6. Numpy 数据分析基础

    numpy 库 ndarray : numpy 的关键 a = np.array([1,2,3]) # 轴 a.ndim # 数组长度 a.size # 数组的型 a.shape # 类型 a.dty ...

  7. 分析java进程假死状况

    摘自: http://www.myexception.cn/internet/2044496.html 分析java进程假死情况 1 引言 1.1 编写目的 为了方便大家以后发现进程假死的时候能够正常 ...

  8. 解决mac上matplotlib中文无法显示问题

    系统:mac os, high sierra; python3.7(by brew installed)   在网上找了很多基本上都是让下载SimHei字体,然后放到mac的matplotlib的字体 ...

  9. 简化Kubernetes应用部署工具-Helm

    [编者的话]微服务和容器化给复杂应用部署与管理带来了极大的挑战.Helm是目前Kubernetes服务编排领域的唯一开源子项目,做为Kubernetes应用的一个包管理工具,可理解为Kubernete ...

  10. 在线前端开发平台 Plunker

    Plunker 网站 : http://plnkr.co/ Plunker 是一个用来创建.协作和分享 Web 开发思路的在线社区.编辑界面如下图所示: 特点: 基于 Node.js 环境运行 实时的 ...