VUE网页实时播放海康、大华摄像头RTSP视频流完全方案,300毫秒延迟,支持H.265、可多路同时播放

简介: 在遍地都是摄像头的今天,往往需要在各种信息化、数字化、可视化B/S系统中集成实时视频流播放等功能,海康、大华、华为等厂家摄像头或录像机等设备一般也都遵循监控行业标准,支持国际标准的主流传输协议RTSP输出,而Chrome、Firefox、Edge等新一代浏览器从2015年开始取消了NPAPI插件技术支持导致RTSP流无法直接原生播放了

一、背景
在遍地都是摄像头的今天,往往需要在各种信息化、数字化、可视化B/S系统中集成实时视频流播放等功能,海康、大华、华为等厂家摄像头或录像机等设备一般也都遵循监控行业标准,支持国际标准的主流传输协议RTSP输出,而Chrome、Firefox、Edge等新一代浏览器从2015年开始取消了NPAPI插件技术支持导致RTSP流无法直接原生播放了,这对于绝大部分没有视频处理经验的前、后端工程师来说是一个非常头疼的问题,专业性强,技术门槛高,而对做B/S信息化系统集成的公司来说,为了这个模块的功能单独招聘专职研发人员来负责的话,成本高昂不说,还未必做的好。
二、现状
当前主流版本浏览器已经都不支持原生播放RTSP流,而且浏览器厂家也明确宣布不考虑支持的情况下,为了在全终端和全平台播放RTSP流,一般来说就只能采取在后端先转码再转流给前端播放的方案,这也是号称无插件的技术方案。而对于终端硬件配置较好的场景,也可以采用在后端转流到前端,前端再通过WASM程序转码播放的方案,但IE并不支持。转码到前端时,即使配置了性能不错的电脑,还受限于WASM的固有缺陷,比如多线程支持差、能使用的内存始终受限、只能软解码等,无法充分利用终端电脑的硬件加速能力(GPU),这就导致同时播放多路或高清RTSP流时也会比较吃力,而且大量占用终端电脑的CPU和内存资源,其它操作基本无法进行,对音视频格式的兼容能力也很有限。
虽然无插件播放方案能够播放出画面,但是往往延迟很高,基本上都在数秒之久,在一些对延迟敏感的场合客户要求毫秒级延迟,显然无插件技术方案是无法满足的;而且首屏画面显示慢,基本上是数秒级别,这就导致切换播放源时迟迟看不到画面出来,用户体验很差;况且无插件技术方案,需要在后端持续运行高负荷运转的视频转码转流服务,如果摄像头路数多或需要在线播放的终端比较多,服务器的压力就会很大,播放卡顿、花屏、黑屏、断播等现象就会时常出现,很难让客户满意。为了解决这些问题,相关硬件、软件的投入和持续不断的带宽占用往往也让客户难以接受。现在越来越多的客户追求高大上的视频播放效果,采用高清摄像头的越来越多,播放显示器1080P已是低配,2K甚至4K大屏正在成为主流之选。这种无插件技术方案,在中高配的屏幕上如果只能播放出慢如蜗牛的画面,想不让客户吐槽实在是太难了。
一个好的视频流网页播放方案,首先要能做到持续稳定播放多路视频,需同时支持H.264和H.265编码,最核心的还是要做到低延迟、切换画面快,另外就是对当前主流版本的浏览器兼容能力要强,还有就是开发接口丰富并可定制,如果还能做到开源或采用免费开源的主流播放引擎,那就最好不过了,毕竟开源在商业领域的应用越来越多,是个大趋势,从系统集成商的角度来说,开源意味着有更多的自主可控机会来降低整个系统的实施风险。
三、最终
猿大师针对当前行业痛点研发出了具有专利技术的猿大师中间件产品,成功突破了浏览器收紧其插件技术的限制,在浏览器之上重新搭建了一套外接程序系统并可无缝嵌入浏览器网页运行,成功模拟了2015年之前Chrome、Firefox、IE等浏览器支持的ActiveX控件和NPAPI插件技术运行效果,是原来采用了跨浏览器插件框架FireBreath的最佳替代技术方案。在2020年发布了基于猿大师中间件的VLC网页播放小程序,基本完成网页中低延迟稳定播放多路视频流的方案拼图,已经在一些客户现场成功实施,赢得了客户的一致好评。友情提醒:猿大师中间件是此领域全球实现商用的成熟中间件,技术实现方案在2019年就申请了中国软件发明专利保护,请大家注意识别仿冒或抄袭者,选择那些冒牌货不仅仅会因为其产品不成熟对您造成巨大损失不说,还有侵犯本公司知识产权的巨大风险!
猿大师官网:http://www.yuanmaster.com
四、特点
1.低延迟播放
从播放性能上说,摄像头和录像机的硬件厂家提供的私有协议播放方式无疑是最快的,延迟可做到100-300毫秒级,其次是RTSP协议流播放,大致是200-500毫秒级,再次是无插件方案的转码流,优化比较好的单路播放大致在1-3秒级。猿大师近期发布的海康网页播放小程序,除了支持海康设备的私有协议直接播放之外,还内置了格式兼容更好的MP4播放库和网络兼容能力强大的LibVLC开源播放引擎。2020年发布的VLC网页播放小程序,基于VLC的ActiveX控件开发,完整封装了控件的所有接口给前端调用,在同等条件下,延迟时间和VLC桌面程序播放保持一致,并可支持多路组合实现分屏播放。
2.兼容性强

  1. 绝大部分浏览器兼容,同时兼容Chrome、Edge、Firefox、IE、Opera、Electron、Vivaldi、Brave、360、QQ等浏览器的低版本到最新版都可以使用;
  2. 设备兼容性强,同时支持海康、大华、宇视、华为等厂家的硬件设备,只要能输出RTSP、RTMP、HLS、HTTP、TCP、UDP等流媒体协议,就可以直接播放;
  3. 支持多种视频编码方式,不管是H.264还是H.265都可以同时支持播放,在一些采用WASM的无插件技术方案中,往往只支持H.265编码的视频流,服务器转码方案中,编码兼容能力直接依赖这个转码服务的实现;
  4. 几乎能播放任何内容,依托开源的VLC著名播放引擎,支持文件、光盘、摄像头、设备及流媒体可直接播放MPEG-2, MPEG-4, H.264, H.265, MKV, WebM, WMV, MP3, MP4等文件,而无插件技术方案往往能播放的内容有限,比如不支持本地文件播放,不支持高速播放;
  5. 分辨率支持范围广,从480P到1080P,还是更高的2K或4K,都能轻松应对,无插件方案从1080P开始,播放效果基本上就差强人意了。

3.功能丰富

  1. 最核心的无疑是播放功能,包含单路播放、多路播放、全屏播放、快播、慢播等等,其中多路播放分屏风格支持多达26种,总有一款适合您,没有需要的分屏风格时也可以委托定制开发,还有指定视频名称或指定时间段回看视频等;
  2. 抓图功能,定时批量抓、支持保存指定本地路径或图片数据直接返回前端、图片质量可控制等,无插件方案由于无法访问本地文件系统是无法抓图直接保存到本地的,也不是基于视频原有分辨率进行抓取,图片质量无法保证;
  3. 录像功能,支持直接录像保存到本地MP4文件,而无插件方案由于无法访问本地文件系统,自然也无法直接完成此功能;
  4. 弹幕及水印功能,播放状态实时提示等支持,无插件方案基本只能在服务器端先行添加,无法针对终端区别对待;
  5. 语音对讲及云台控制,无插件方案基本无此功能;
  6. 人脸识别、车牌识别并显示画框等个性化功能,可通过定制设备厂家原生SDK功能实现。

4.集成简单
延续原有插件播放技术路线,可实现平滑升级,前后端改造小,提供VUE集成范例,集成简单,节省成本。
五、优势
借助猿大师中间件独特的专利技术,相对于无插件播放方案来说,具有无可替代的技术优势,具体表现如下:

  1. 可充分利用终端电脑硬件加速能力(GPU),在同等硬件、网络带宽及流输出条件下,延迟可做到毫秒级,可播放更多视频源、支持更高的分辨率、实现更流畅的播放效果。
  2. 播放程序可直接调用操作系统及硬件厂家提供的原生播放功能,也可以调用其它程序模块,不受浏览器的限制,实现丰富的个性化播放功能。这个优势或许有人认为也是缺点,比如有安全隐患,其实对于企业的各种业务系统来说,都是需要经过充分测试才会上线,而猿大师中间件承诺本身无任何病毒或木马行为,不会有未授权的网络请求行为,也提供了运行过程中的安全调用验证机制,即使未授权的第三方拿到了播放小程序的开发接口,没有经过安全验证也是无法请求播放的,一定程度上解决了浏览器原有插件技术不安全的缺陷。安全问题关键是具体如何看待,其实B/S等各种系统前端代码的运行在浏览器厂家看来,其实就是裸奔的状态,只要浏览器厂家想要获取前端代码中的敏感信息,从技术角度完全没有任何问题,相反的是,通过猿大师的技术方案,浏览器可获得的信息反而受限,除非和操作系统开发商一起配合来进行才有可能。
  3. 猿大师中间件不依赖浏览器的插件和扩展技术支持,浏览器的升级不会导致技术方案失效,通讯技术采用国际标准的WebSocket技术,数据采用主流的JSON打包,通用性强。
  4. 猿大师中间件提供了前端可调用的自动升级中间件或小程序的机制,解决了传统C/S系统升级终端软件的大难题,具有了和B/S接近的分发便利优势。

1.猿大师VLC播放程序与大华官方网页延迟对比:
https://www.bilibili.com/video/BV1ff4y1j7qg/
2.猿大师VLC播放程序与海康威视官方网页延迟对比:https://www.bilibili.com/video/BV1mr4y127oX/
3.猿大师VLC播放程序VUE测试页面效果演示:
https://www.bilibili.com/video/BV1Y34y197Z3

目录
相关文章
|
2天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
8天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
8天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
8天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
12天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
10天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
28 9
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
9天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。