Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >新版谷歌Chrome播放海康大华RTSP视频流解决方案

新版谷歌Chrome播放海康大华RTSP视频流解决方案

原创
作者头像
猿大师
修改于 2021-09-14 02:28:38
修改于 2021-09-14 02:28:38
3K0
举报
文章被收录于专栏:猿大师猿大师

一、历史背景

在遍地都是摄像头的今天,往往需要在各种B/S信息化系统中集成视频播放功能,海康、大华、华为等大厂摄像头遵循监控行业标准,一般只支持RTSP传输协议,而Chrome、Firefox、Edge等现代浏览器的主流版本并不支持RTSP流的直接原生播放!

二、现有方案

在未来也没有计划支持的情况下,想要在网页中实现播放RTSP流,目前常用可选方案有以下3种:

1、先在服务器端把RTSP流转码到浏览器可直接播放的视频流后再提供给终端浏览器播放,这也是号称无插件播放的方法,虽然这种方案对操作系统和浏览器兼容性好,但延迟往往很高,时常达到数秒之久,尤其是首屏画面显示很慢,体验糟糕。实际使用时,由于需要在服务器端搭建一个始终高负荷运转的视频转码转流服务,CPU和内存消耗大,带宽占用大,长期使用成本很高,如果摄像头路数比较多或在线播放视频的终端比较多,服务器的压力就会很大。终端想要看到多路、高分辨率或H.265视频时,此方案实际使用过程中常出现播放卡顿、花屏,缺陷就越发明显。尤其是在在一些非常关键的应用场合,如果不能通过监控视频早一点发现险情并及时排除,可能就无法规避不可承受的风险,失去了上视频监控的重要意义。

2、与第1种方案不同,此方案把服务器端转码过程转移到前端来进行,压力也就转移到了终端电脑之上。因为在现代高版本浏览器中,都已经支持WASM技术(IE除外),所以纷纷采用此技术在前端实现将RTSP流转码后播放。由于终端电脑的硬件参差不齐,在一些中低配电脑上,就很难获得比较好的播放效果。最主要的问题还是受限于WASM的缺陷,只能软解码,无法利用终端电脑的硬件加速能力,而且不支持多线程,这就导致播放多路RTSP流时就非常吃力了,在面对高分辨率和H.265的视频流时,同样效果不好,而且大量占用终端电脑的CPU和内存,无法再做其它事情,所以基本无法满足甲方客户的硬性要求。

3、沿用原有插件技术方案,在2015年前Chrome等浏览器还可以用NPAPI插件技术的时候,前2种方案遇到的问题都不是问题,通过本地原生播放器控件直接播放,服务器也没多少压力,终端也可以充分利用本机硬件加速能力,多路播放时利用多线程技术,可以实现比较好的播放效果。缺点就是需要安装插件,操作系统的兼容性上差一些。此方案如果能解决高版本的Chrome等浏览器兼容使用,无疑这是当下能够实现低延迟多路稳定播放的最佳技术方案,满足甲方客户硬性播放指标也无压力。

二、最终方案

猿大师中间件VLC网页播放小程序应需而生,基于跨浏览器的原生小程序系统-猿大师中间件开发,通过借助猿大师中间件提供的内嵌网页播放的独家专利技术,在Chrome等现代浏览器高版本中完全模拟实现了ActiveX控件和NPAPI插件的播放效果,底层调用VLC(是一款自由、开源的跨平台多媒体播放器及框架,可播放大多数多媒体文件,以及 DVD、音频 CD、VCD 及各类流媒体协议)桌面客户端的ActiveX控件实现在网页中低延迟直接播放海康、大华、华为等摄像头的标准RTSP流,由于实际调用的是VLC本地原生播放控件,因此可充分利用本机硬件加速能力实现高效硬解码播放多路或高清视频(H.265),最多可支持25路同时播放,最低可用在Chrome 41、Firefox 50、Edge 80(Chromium内核)、360极速/安全、IE、Oprea 36、QQ等浏览器,也兼容运行于这些浏览器的最新版本。

猿大师中间件免费体验地址:http://www.yuanmaster.com/xiazai/

采用猿大师中间件VLC网页播放小程序具有如下优点:

1、在支持主流版本浏览器的前提下,是当前市场中可实现低延迟(300毫秒)的独家播放方案;

2、支持多路同时播放、动态切换播放源、支持回放和抓图,尤其是高分辨率视频或大屏播放体验好;

3、底层播放技术采用VLC的开放源代码方案,播放器后续服务有保障,播放格式兼容好,同时支持H.264和H.265无压力;

4、VLC网页播放小程序额外付费后可获得其源代码进行定制开发,自主可控;

5、支持海康、大华、华为等各厂家的摄像头,只要能提供标准的RTSP流,都可以播放;

6、移动端可直接采用VLC开放源代码的APP来使用,无需单独开发,投入少见效快;

7、此技术方案可实现在原有技术体系下的平滑升级,降低了方案大改造带来的技术路线和延期交付风险,可节省大量研发成本。

终端电脑采用VLC网页播放方案时需要部署猿大师中间件,搭配VLC网页播放小程序,还需安装VLC桌面客户端,为简化部署过程,可将VLC绿色版程序包解压后放入中间件的VLC小程序目录后,再将这些程序文件统一做一MSI或EXE安装包放到B/S服务器上提示用户下载安装或实施工程师统一部署。一般来说,需要看视频监控的地方基本上集中于监控室,电脑数量有限,部署时安装一些软件来并不是件难事。之后借助猿大师中间件的在线升级机制,可彻底解决传统客户端软件升级维护的难题,一箭双雕。

一个好的技术实施方案,首先是要满足客户的刚性需求,其次是尽量降低采购、开发、实施及维护的总成本,再次是需要有良好的兼容性和稳定性,最后需尽量确保技术方案不能因为浏览器的升级而失效,能够实现公司自主可控的要求就更好了。VLC网页播放小程序提供了这样一个稳定可靠、兼容性好、低延迟又可同时稳定播放多路RTSP的低成本半开源技术方案,无疑是当前安防行业在网页端播放RTSP流的最佳选择。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何在高版本谷歌Chrome中播放RTSP实时视频?
随着互联网基础设施的完善以及4G、5G等技术的大规模商用,在Chrome、Firefox、Edge等浏览器播放RTSP视频流也慢慢成为了信息化系统的行业标准。
猿大师
2021/10/10
3.9K0
2024年WEB网页VUE直接播放海康威视、大华、华为RTSP/RTMP视频流方案大盘点
在遍地都是摄像头的今天,往往需要在各种信息化、数字化、可视化等B/S系统中集成实时视频流播放等功能,海康、大华、华为等厂家摄像头或录像机等设备一般也都遵循安防行业标准,支持国际标准的视频主流传输协议RTSP(实时视频流)输出,不幸的是Chrome、Edge、Firefox等新一代浏览器从2015年开始不再支持NPAPI插件加载运行,直接导致RTSP视频流从此无法在高版本浏览器网页中原生播放。对于绝大部分没有影视频处理经验的前、后端工程师来说是一个非常棘手的问题,专业性强,技术门槛高,而对做B/S系统集成的大多数公司来说,为了这部分的功能单独招聘专职音视频研发人员来负责的话,成本高昂不说,还未必做的好。
李不白
2023/10/19
4.2K0
2024年WEB网页VUE直接播放海康威视、大华、华为RTSP/RTMP视频流方案大盘点
2023年网页内嵌VLC直接播放RTSP视频流,无需转码,支持硬解,支持高版本Chome
2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。可惜好景不长,从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。
喵大侠
2023/10/09
1.7K0
2023年网页内嵌VLC直接播放RTSP视频流,无需转码,支持硬解,支持高版本Chome
在VUE框架的WEB网页端播放海康威视RTSP视频流完全方案
如果你问一个前端技术人员,近几年最火的前端框架技术是什么,肯定会有人说VUE,确实VUE凭借其简单特性赢得了大家的喜爱,而近期公司有个项目,需要在VUE框架网页上播放RTSP实时视频。
喵大侠
2021/10/29
4.1K1
如何在VUE中播放海康威视RTSP/RTMP/ISC平台/NVR视频流?延迟低于300毫秒?
近期在做摄像头监控视频在网页中播放的工作,现在大部分摄像头厂商如海康威视、大华、华为等都支持标准的RTSP协议,RTSP协议的优势是实时性高、流畅度度高,同时支持H.265和H.264,清晰度也更高,对于要求比较高的安防、交通等领域很适合,交通行业特殊需要延迟低于300毫秒,于是开始收集各种方案,互联网上RTSP协议的网页播放方案也很多,但是基本上分为两种:
猿大师
2022/07/07
3.8K0
如何在VUE中播放海康威视RTSP/RTMP/ISC平台/NVR视频流?延迟低于300毫秒?
在Chrome、Firefox中低延迟播放海康、大华RTSP完全解决方案!
随着网络宽带的不断提升和智能手机的流行,RTSP实时视频流播放及处理不再局限于安防行业。在如道路、工厂、楼宇、学校、港口、农场、景区等诸多场景实施的信息化系统中,绝大多数都采用的是B/S架构,隐藏迫切需要在浏览器中嵌入多路摄像头RTSP流低延迟(小于500毫秒)播放功能,而在IE及Chrome 45以下版本等浏览器中,采用ActiveX控件或NPAPI插件即可实现。然而美好总是短暂的,从2015年开始Chrome及Firefox等浏览器纷纷取消了NPAPI插件的支持,而IE又在与Chrome
猿大师
2021/08/03
2.6K0
用猿大师VLC播放程序在高版本Chrome浏览器中播放海康、大华RTSP(图文教程)
近期在做一个智慧城市项目,要求将海康威视、大华等摄像头RTSP视频流在Chrome、Firefox、Edge等浏览器中播放,并且要求延迟必须要低,能到多低就多低,最好是实时视频。
喵大侠
2021/10/11
2K0
用猿大师VLC播放程序在高版本Chrome浏览器中播放海康、大华RTSP(图文教程)
猿大师播放器:网页RTSP H.265视频流低延迟革命,无需转码终极解决方案
在智慧安防、工业巡检、远程医疗等领域,RTSP视频流的实时播放是核心需求。然而,传统技术方案长期受制于高延迟、高成本、低兼容性等瓶颈,成为数字化转型的“绊脚石”。
李不白
2025/02/20
2470
猿大师播放器:网页RTSP H.265视频流低延迟革命,无需转码终极解决方案
在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP
现在到处是摄像头的时代,随着带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防行业。在如道路、工厂、楼宇、学校、港口、农场、景区等场景实施的信息化系统中,已基本全采用B/S架构,迫切需要在浏览器中嵌入多路摄像头RTSP流的超低延迟(小于500毫秒)播放功能,而在IE及Chrome 49以下版本等浏览器中,采用ActiveX控件或NPAPI插件即可实现。然而美好总是短暂的,从2015年开始Chrome及Firefox等浏览器纷纷取消了NPAPI插件的支持,而IE又在与Chrome及Firefox等浏览器竞争的过程中不断被用户抛弃,到现在市场份额已降到可怜的个位数。微软在几经折腾后,索性也拥抱Chromium内核推出Edge新版来杀死自己的IE,以挽救自己在浏览器这块岌岌可危的江湖地位。
BrowserApplet
2020/12/14
3.6K0
在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP
猿大师播放器与其他网页播放RTSP方案(WebRTC等)对比有哪些优势?
- 基于VLC/FFPLAY引擎直接调用本地硬件解码,无需服务器转码,延迟低至300毫秒,远低于传统转码方案(通常1-3秒)。在消防、安防等场景中,毫秒级延迟可显著提升应急响应速度,避免因延迟导致的重大损失。
李不白
2025/02/20
930
猿大师播放器与其他网页播放RTSP方案(WebRTC等)对比有哪些优势?
不用服务器转码,Web端如何播放RTSP视频流?
在物联网、智慧城市、工业互联网等新兴技术浪潮下,实时视频流(如RTSP协议)作为安防监控、生产巡检、远程协作等场景的核心数据载体,其价值愈发凸显。然而,一个长期困扰行业的痛点始终存在——‌如何在Web浏览器中直接播放RTSP流?‌
喵大侠
2025/05/13
4530
不用服务器转码,Web端如何播放RTSP视频流?
HTML内嵌VLC播放RTSP视频流,无需转码,300ms延迟,碾压转码方案
在智慧城市、工业安全、应急指挥等关键领域,实时视频监控已成为守护生命与财产的核心防线‌。然而,行业普遍面临三大矛盾:
李不白
2025/03/03
2880
HTML内嵌VLC播放RTSP视频流,无需转码,300ms延迟,碾压转码方案
智慧消防网页低延迟播放RTSP视频流,低至300毫秒,25路不卡顿
在城市化进程加速的今天,消防安全已成为社会治理的核心课题。智慧消防通过物联网、人工智能、大数据等技术,构建实时感知、智能预警、快速响应的防控体系,但其核心环节——视频监控的实时性与可靠性,却长期面临技术瓶颈。传统消防监控系统依赖服务器转码方案,导致延迟高、画面卡顿、多路并发能力弱,难以满足火灾应急场景的“秒级响应”需求。在此背景下,**猿大师播放器**凭借其低延迟、高兼容、免转码的技术特性,正成为智慧消防视频监控领域的一把“利器”。
李不白
2025/02/12
1570
智慧消防网页低延迟播放RTSP视频流,低至300毫秒,25路不卡顿
如果监控摄像头不支持Web Socket,还能在Chrome等浏览器中播放RTSP流吗?
我们的情况比较复杂,摄像头设备品牌和数量都比较多,分布在全国各地都有,地点分布比较广泛,有的甚至是比较老的型号,如果摄像头设备不支持Web Socket,还可以在网页中播放RTSP流吗?
猿大师
2022/11/24
1.1K0
如果监控摄像头不支持Web Socket,还能在Chrome等浏览器中播放RTSP流吗?
html播放rtsp流,浏览器播放rtsp视频流解决方案
最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究。而浏览器不能直接播放,只有通过插件或者转码来实现这个需求。
全栈程序员站长
2022/11/02
6.4K0
SkeyeVSS综合安防视频云服务WEB H5无插件播放RTSP摄像机解决方案,拒绝插件,拥抱H5,Windows PC、 Liunx、 Android
视频流媒体监控行业已经进入了互联网时代,浏览器承载了绝大多数的互联网访问流量,如何在网页上播RTSP流,将RTSP转成互联网直播协议RTMP或者HLS?
Openskeye
2023/03/30
1.5K0
海康、大华摄像头RTSP接入实现WEB端无插件流媒体服务EasyNVR实现海康大华宇视摄像头内容网页播放的方法
进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择。
EasyNVR
2020/04/23
5.5K0
海康、大华摄像头RTSP接入实现WEB端无插件流媒体服务EasyNVR实现海康大华宇视摄像头内容网页播放的方法
海康摄像头如何通过SDK将视频在前端网页上进行播放?
碰到这个问题的时候,很多开发者的初期思路是通过SDK接入海康摄像机IPCamera、硬盘录像机NVR的视频,并想办法在网页端显示。这种SDK接入的方法不能说是错误的,但是对于开发者来说并不是一个好的选择。
EasyNVR
2020/04/23
5.2K0
海康摄像头如何通过SDK将视频在前端网页上进行播放?
RTSP播放器技术选型指南
2015年,在大家精力放在点播播放的时候,大牛直播SDK已开始布局RTMP、RTSP的低延迟直播技术。通过全自研技术框架,大牛直播SDK的RTSP播放器以功能齐全、性能优异、超低延迟、低代码低集成复杂度,在行业内享有较高的评价,服务了数百家B端用户。
音视频牛哥
2024/09/06
4650
RTSP播放器技术选型指南
猿大师播放器在网页播放多路海康威视RTSP视频流,修改过缓存和网络配置后仍然卡顿怎么办?
在用猿大师播放器同时播放多路海康威视的RTSP视频流,2K和4K视频有卡顿情况,修改完缓存和网络配置后仍然卡顿怎么处理?
猿大师
2022/07/01
1.6K0
猿大师播放器在网页播放多路海康威视RTSP视频流,修改过缓存和网络配置后仍然卡顿怎么办?
推荐阅读
如何在高版本谷歌Chrome中播放RTSP实时视频?
3.9K0
2024年WEB网页VUE直接播放海康威视、大华、华为RTSP/RTMP视频流方案大盘点
4.2K0
2023年网页内嵌VLC直接播放RTSP视频流,无需转码,支持硬解,支持高版本Chome
1.7K0
在VUE框架的WEB网页端播放海康威视RTSP视频流完全方案
4.1K1
如何在VUE中播放海康威视RTSP/RTMP/ISC平台/NVR视频流?延迟低于300毫秒?
3.8K0
在Chrome、Firefox中低延迟播放海康、大华RTSP完全解决方案!
2.6K0
用猿大师VLC播放程序在高版本Chrome浏览器中播放海康、大华RTSP(图文教程)
2K0
猿大师播放器:网页RTSP H.265视频流低延迟革命,无需转码终极解决方案
2470
在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP
3.6K0
猿大师播放器与其他网页播放RTSP方案(WebRTC等)对比有哪些优势?
930
不用服务器转码,Web端如何播放RTSP视频流?
4530
HTML内嵌VLC播放RTSP视频流,无需转码,300ms延迟,碾压转码方案
2880
智慧消防网页低延迟播放RTSP视频流,低至300毫秒,25路不卡顿
1570
如果监控摄像头不支持Web Socket,还能在Chrome等浏览器中播放RTSP流吗?
1.1K0
html播放rtsp流,浏览器播放rtsp视频流解决方案
6.4K0
SkeyeVSS综合安防视频云服务WEB H5无插件播放RTSP摄像机解决方案,拒绝插件,拥抱H5,Windows PC、 Liunx、 Android
1.5K0
海康、大华摄像头RTSP接入实现WEB端无插件流媒体服务EasyNVR实现海康大华宇视摄像头内容网页播放的方法
5.5K0
海康摄像头如何通过SDK将视频在前端网页上进行播放?
5.2K0
RTSP播放器技术选型指南
4650
猿大师播放器在网页播放多路海康威视RTSP视频流,修改过缓存和网络配置后仍然卡顿怎么办?
1.6K0
相关推荐
如何在高版本谷歌Chrome中播放RTSP实时视频?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档