网页播放海康威视大华华为摄像头RTSP流，不需转码转流，延迟毫秒级，支持多路播放、H.264/H.265及1080P/2K/4K

一、背景：

在遍地都是摄像头的今天，往往需要在各种信息化、数字化、可视化B/S系统中集成实时视频流播放等功能，海康、大华、华为等厂家摄像头或录像机等设备一般也都遵循监控行业标准，支持国际标准的主流传输协议RTSP输出，而Chrome、Firefox、Edge等新一代浏览器从2015年开始取消了NPAPI插件技术支持导致不再支持RTSP的原生播放，对于绝大部分没有视频处理经验的前后端工程师来说是一个非常头疼的问题，而对做B/S系统集成的公司来说，为了这一个模块的功能单独招聘专职研发人员来负责的话，成本高昂不说，还未必做的好。

二、方案：

目前网上有两种所谓无插件方案，即后端转码前端播放的方法和后端转流前端转码的方案，虽然无插件播放方案能够播放出画面，但是往往延迟很高，基本上都在数秒之久，在一些对延迟敏感的场合客户要求毫秒级延迟，显然无插件技术方案是无法满足的；而且首屏画面显示慢，基本上得十几秒，这就导致切换播放源时迟迟看不到画面出来，用户体验很差；况且无插件技术方案，需要在后端持续运行高负荷运转的视频转码转流服务，如果摄像头路数多或需要在线播放的终端比较多，服务器的压力就会很大，播放卡顿、花屏、黑屏、断播等现象就会时常出现，很难让客户满意，为了解决这些问题，相关硬件、软件的投入和持续不断的带宽占用往往也让客户难以接受。现在越来越多的客户追求高大上的视频播放效果，采用高清摄像头的越来越多，播放显示器1080P已是低配，2K甚至4K大屏正在成为主流之选。这种无插件技术方案，在中高配的屏幕上如果只能播放出慢如蜗牛的画面，想不让客户吐槽实在是太难了。

三、难点：

一个好的视频流网页播放方案，首先要能做到持续稳定播放多路视频，需同时支持H.264和H.265编码，最核心的还是要做到低延迟、切换画面快，另外就是对当前主流版本的浏览器兼容能力要强，还有就是开发接口丰富并可定制，如果还能做到开源或采用一些免费开源的播放引擎，那就最好不过了，毕竟开源在商业领域的应用越来越多，是个大趋势，从系统集成商的角度来说，开源意味着有更多的自主可控机会来降低整个系统的实施风险。

四、突破：

猿大师针对当前行业痛点，经历数年研发出了具有专利保护技术的猿大师中间件产品，在浏览器之上重新搭建了一套外接程序系统并可无缝嵌入浏览器网页运行，成功模拟了2015年之前Chrome、Firefox、IE等浏览器支持的ActiveX控件和NPAPI插件技术运行效果。

五、优势：

1. 低延迟播放

猿大师VLC播放程序基于基于VLC的ActiveX控件开发，完整封装了控件的所有接口给前端调用，在同等条件下，延迟时间和VLC桌面程序播放保持一致，并可支持多路播放。可充分利用终端电脑硬件加速(GPU)能力，在同等硬件和网络条件下，延迟可做到毫秒级，可播放更多视频源、支持更高的分辨率、实现更流畅的播放效果，网络上所谓的无插件方案完全不能与之相比。

2. 兼容性强

1. 绝大部分浏览器兼容，同时兼容Chrome、Edge、Firefox、IE、Opera、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. 可定制

猿大师的网页播放小程序的播放分屏风格、中间件产品名称及公司信息等，接受付费定制开发使用，实现个性化的播放效果。

5. 开源

猿大师的网页播放小程序，主要是基于著名开源播放引擎LibVLC开发，视频播放模块后续服务有保障，播放小程序本身也支持客户付费获得源码后自行再定制开发，实现源代码级别的自主可控。因为基于视频画面定制实现一些其它功能也是常有的，比如人脸识别、车牌识别，识别出来同时需要在画面中加入一些标记元素，也可以设计触发某些条件时自动抓图并保存。

6. 低成本

由于采用终端直接播放的技术方案，无需服务器提供转码转流支持，因此可节省软硬件投入成本和持续的带宽占用成本。

7. 简单可靠

延续原有插件播放技术路线，可实现平滑升级，前后端改造小，提供VUE集成范例，集成简单，节省成本。

1.猿大师官网：http://www.yuanmaster.com

2.猿大师与大华官方网页延迟对比：https://www.bilibili.com/video/BV1ff4y1j7qg/

用猿大师VLC播放程序与大华官方网页播放器同时在高版本Chrome中播放RTSP视频流延迟效果对比，结果令人惊讶！

3.猿大师VLC播放程序与海康威视官方网页延迟对比：https://www.bilibili.com/video/BV1mr4y127oX/

海康威视摄像头RTSP视频流在高版本谷歌Chrome零延迟播放效果演示视频

4.同时播放25路RTSP流效果：猿大师VLC播放程序在Chrome同时播放25路RTSP摄像头视频流效果，CPU及内存占用情况_哔哩哔哩_bilibili

猿大师VLC播放程序在Chrome同时播放25路RTSP摄像头视频流效果，CPU及内存占用情况