海康威视摄像头RTSP视频流嵌入到谷歌Chrome等WEB页面中实时播放方案(图文教程)

简介: 近期在做一个智慧城市项目,要求将海康威视、大华等摄像头RTSP视频流在Chrome、Firefox、Edge等浏览器中播放,并且要求延迟必须要低,能到多低就多低,最好是实时视频。小编了解很多不同的方案,目前市面上大部分是转码转流方案,不仅需要服务器支持,并且需要服务器不停的转码转流,如果多路同时播放或者播放高清视频,非常容易出现卡顿、花屏等情况,延迟更是高达数秒甚至数分钟,对于一些延迟要求较高的项目来说,这简直是灾难性后果。

近期在做一个智慧城市项目,要求将海康威视、大华等摄像头RTSP视频流在Chrome、Firefox、Edge等浏览器中播放,并且要求延迟必须要低,能到多低就多低,最好是实时视频。


小编了解很多不同的方案,目前市面上大部分是转码转流方案,不仅需要服务器支持,并且需要服务器不停的转码转流,如果多路同时播放或者播放高清视频,非常容易出现卡顿、花屏等情况,延迟更是高达数秒甚至数分钟,对于一些延迟要求较高的项目来说,这简直是灾难性后果。


想比较之下猿大师VLC播放程序是性价比最高的一个方案,通过猿大师的内嵌网页技术,底层调用VLC的ActiveX控件,可以实现在网页中内嵌播放多路RTSP的实时视频流,不用服务器转码转流,可以做到低延迟(300毫秒),支持H.264和H.265格式,兼容主流浏览器的老版本和最新版本。


下面小编用图文为大家介绍下体验步骤:


第一步:

载安装VLC桌面版播放器,如果不想安装任何程序,可以直接下载免安装的绿色版VLC播放器,解压缩就可以了,不用了可以直接删掉。


下载地址:


64位:http://download.videolan.org/pub/videolan/vlc/3.0.16/win64/vlc-3.0.16-win64.7z


32位:http://download.videolan.org/pub/videolan/vlc/3.0.16/win32/vlc-3.0.16-win32.7z

111.png


第二步:

下载猿大师中间件,同样我们也给不想安装的程序的同学准备了免安装的猿大师绿色版,下载地址:http://www.yuanmaster.com/xiazai/  下载解压缩后运行:InstallWrl.bat 启动即可。

222.png


第三步:

启动猿大师后会有如下弹窗,包含UID等信息,请截图发给猿大师客服开通试用授权。

333.png


第四步:

打开猿大师VLC播放程序在线体验网试用:以全页面显示为例,首先点击连接,右侧会显示连接成功,如果没有成功,请确认本机83端口是否被占用,如果被占用。然后再把真实RTSP地址替换到下面蓝色区域,然后点击发送即可。


QQ截图20211011155524.png


如果没有测试用摄像头,可以从网上找公开的RTSP地址进行测试,小编找到一个(rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov),不太清晰,不过可以凑合用。


用猿大师的VLC播放程序与海康威视的官方网页播放器延迟对比下! (视频)

猿大师与VLC原生播放器延迟对比:https://www.bilibili.com/video/BV1Sr4y117v8/

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

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

目录
相关文章
|
JSON 人工智能 前端开发
用markdown语法制作一个好看的网址导航页面(markdown-web-nav)
这是一篇关于创建网址导航页面的工具分享文章。作者介绍了从手动编写HTML代码到开发可视化工具 *markdown-web-nav* 的历程,旨在简化网址管理与导航页面生成的过程。该工具支持新增、编辑和删除网址数据,通过导入/导出JSON文件、实时预览Markdown效果以及一键复制等功能,让用户轻松制作美观的网站导航页面。文章还提供了详细的操作步骤及常见问题解答,如还原数据、获取网站图标链接等,适合不同技术水平的用户使用。
902 28
|
移动开发 前端开发 JavaScript
H5 页面与 Web 页面的制作方法
H5页面制作利用HTML5、CSS3和JavaScript技术,结合H5编辑器或框架(如Adobe Dreamweaver、Ionic),注重移动设备兼容性与响应式布局。Web页面制作则基于传统HTML、CSS和JavaScript,借助文本编辑器或IDE完成开发。两者区别在于技术版本、交互性和浏览器支持:H5更互动、现代,但可能不兼容旧浏览器;Web页面更静态、兼容性广。根据需求选择:高交互选H5,广泛兼容选Web。
2054 6
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1337 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
运维 网络安全 文件存储
找不到类似 Docker Desktop 的 Web 管理界面?试试这些开源方案
Docker Desktop 是本地容器化开发的利器,但存在无法通过 Web 远程管理、跨平台体验不一致等问题。为此,推荐几款轻量级、可 Web 化管理的 Docker 工具:Portainer 功能全面,适合企业级运维;CasaOS 集成应用商店和 NAS 功能,适合家庭/个人开发环境;Websoft9 提供预集成环境,新手友好。这些工具能有效提升容器管理效率,满足不同场景需求。
1471 3
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
716 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
755 2
|
弹性计算 负载均衡 安全
云端问道-Web应用上云经典架构方案教学
本文介绍了企业业务上云的经典架构设计,涵盖用户业务现状及挑战、阿里云业务托管架构设计、方案选型配置及业务初期低门槛使用等内容。通过详细分析现有架构的问题,提出了高可用、安全、可扩展的解决方案,并提供了按量付费的低成本选项,帮助企业在业务初期顺利上云。
559 0
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
867 3
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文