网页播放海康，威视，大华，华为摄像头RTSP流，延迟毫秒级，支持多路播放、H.264/H.265

深藏阁楼爱情的钟 2023-10-14 20:12 66阅读 0赞

#### **一、背景：** ####

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

#### **二、方案：** ####

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

#### **三、难点：** ####

一个好的视频流网页播放方案，首先要能做到持续稳定播放多路视频，需同时支持H.264和H.265编码，最核心的还是要做到低延迟、切换画面快，另外就是对当前主流版本的浏览器兼容能力要强，还有就是开发接口丰富并可定制。

#### **四、突破：** ####

针对当前行业痛点，经历数年好游科技研发出了具有无插件直接在浏览器上运行的超低延时播放器，还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。

#### **五、优势：** ####

**1. 低延迟播放**  
  
liveweb播放器完整封装了控件的所有接口给前端调用，在同等条件下，延迟时间和VLC桌面程序播放保持一致，并可支持多路播放。可充分利用终端电脑硬件加速(GPU)能力，在同等硬件和网络条件下，延迟可做到毫秒级，可播放更多视频源、支持更高的分辨率、实现更流畅的播放效果。

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

**3. 功能丰富**  
  
1. 最核心的无疑是播放功能，包含单路播放、多路播放、全屏播放、快播、慢播等等，其中多路播放分屏风格支持多达26种，总有一款适合您，没有需要的分屏风格时也可以委托定制开发，还有指定视频名称或指定时间段回看视频等；  
2. 抓图功能，定时批量抓、支持保存指定本地路径或图片数据直接返回前端、图片质量可控制等。  
3. 录像功能，支持直接录像保存到本地MP4文件。  
4. 弹幕及水印功能，播放状态实时提示等支持。  
5. 语音对讲及云台控制。  
6. 人脸识别、车牌识别并显示画框等个性化功能，可通过定制设备厂家原生SDK功能实现。

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

![f11707db05e34034bc9af50c251fef00.jpeg][]

![165f9f50b46345a49bbb2f19f0ff8615.webp][]

[f11707db05e34034bc9af50c251fef00.jpeg]: https://img-blog.csdnimg.cn/f11707db05e34034bc9af50c251fef00.jpeg
[165f9f50b46345a49bbb2f19f0ff8615.webp]: https://img-blog.csdnimg.cn/165f9f50b46345a49bbb2f19f0ff8615.webp