在VUE中WEB端播放RTSP流解决方案,支持H.265,延迟300毫秒以内!

简介: 因为工作需要,要在Chrome、Firefox等高版本浏览器中播放海康威视、大华等摄像头,由于目前摄像头大多都是通过 RTSP 协议传输视频流的,即使是HTML5标准的Video也并未对RTSP流播放提供原生支持,从而导致如何在当前主流的浏览器中实现低延迟、低成本播放多路RTSP成为了一个重大技术难题。

一、背景


因为工作需要,要在Chrome、Firefox等高版本浏览器中播放海康威视、大华等摄像头,由于目前摄像头大多都是通过 RTSP 协议传输视频流的,即使是HTML5标准的Video也并未对RTSP流播放提供原生支持,从而导致如何在当前主流的浏览器中实现低延迟、低成本播放多路RTSP成为了一个重大技术难题。


小编对目前市场上的所有方案进行了测试,发现市面上行大部分方案都是转码转流方案,需要服务器不停的转码转流,不仅延迟高,能达到几秒甚至几分钟,播放高清视频或者H.265格式视频容易卡顿,同时多路播放效果也差,有的比如WebAssembly甚至本地录像抓图功能都不能实现,很难用于商业。


二、方案


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


第一步:


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

1.png

第二步:

下载安装VLC桌面版播放器,你也可以直接下载免安装的绿色版VLC播放器,解压缩到软件安装目录》Plugins》VLCwebPlayer目录里面。

下载地址:

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

QQ截图20211029223526.png

第三步:


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

QQ截图20211029223738.png


第四步:


打开猿大师VLC播放程序在线体验网试用:以全页面显示为例,体验网址:http://test.yuanmaster.com/vlcwebfull.html

首先点击连接,右侧会显示连接成功,如果没有成功,请确认本机83端口是否被占用,如果被占用。然后再把真实RTSP地址替换到下面蓝色区域,然后点击发送即可。

微信截图_20211024224531.png

 

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


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

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

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


三、总结

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

目录
相关文章
|
8天前
|
网络协议 Java Shell
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
40 7
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
774 1
|
3月前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
62 4
|
4月前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
165 7
|
4月前
|
JavaScript 前端开发 安全
轻松上手Web Worker:多线程解决方案的使用方法与实战指南
轻松上手Web Worker:多线程解决方案的使用方法与实战指南
107 0
|
4月前
|
存储 JavaScript 前端开发
深入探索 Vue.js:构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js:构建现代 Web 应用的利器
63 1
|
4月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
4月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
4月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js
|
4月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
268 3

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    13
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    26
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    20
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    54
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    342
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    40
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    28
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    22
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    55