在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流的最佳选择。

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
97 0
|
5天前
|
缓存 Kubernetes Java
阿里云 SAE Web:百毫秒高弹性的实时事件中心的架构和挑战
SAE 事件中心通过智能诊断显示通知与用户连接起来,SAE WEB 百毫秒弹性实例给事件中心带来了新的实时性、海量数据和高吞吐的挑战,本篇将带您了解 SAE 整体事件中心的架构和挑战。
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
25 0
|
25天前
|
人工智能 开发框架 前端开发
Web开发之Vue.js
Web开发之Vue.js
20 3
|
2月前
|
Java 数据库连接 数据库
从零到精通:揭秘 Hibernate 构建持久层服务的全过程,你离数据持久化大师还有多远?
【8月更文挑战第31天】本文详细介绍了如何从零开始使用 Hibernate 构建一个持久层服务。首先,通过在 Maven 项目中添加必要的依赖,确保项目具备使用 Hibernate 的条件。接着,配置 `hibernate.cfg.xml` 文件以连接 MySQL 数据库,并设置了基本属性。然后定义了一个简单的 `User` 实体类及其映射关系。此外,还创建了一个 `HibernateUtil` 工具类来管理 `SessionFactory`。
28 0
|
2月前
|
JavaScript 前端开发 UED
服务器端渲染新浪潮:用Vue.js和Nuxt.js构建高性能Web应用
【8月更文挑战第30天】在现代Web开发中,提升应用性能和SEO友好性是前端开发者面临的挑战。服务器端渲染(SSR)能加快页面加载速度并改善搜索引擎优化。Vue.js结合Nuxt.js提供了一个高效框架来创建SSR应用。通过安装`create-nuxt-app`,可以轻松创建新的Nuxt.js项目,并利用其自动路由功能简化页面管理。Nuxt.js默认采用SSR模式,并支持通过`asyncData`方法预取数据,同时提供了静态站点生成和服务器端渲染的部署选项,显著提升用户体验。
54 0
|
2月前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
51 0
|
2月前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
24 0
|
2月前
|
前端开发 UED
墙裂推荐!Vue3 实现B站页面滚动开启小屏播放功能,超简单!!
墙裂推荐!Vue3 实现B站页面滚动开启小屏播放功能,超简单!!
|
2月前
|
存储 JavaScript 前端开发
Web Audio API 第2章 完美的播放时机控制
Web Audio API 第2章 完美的播放时机控制
下一篇
无影云桌面