高版本Chrome VUE页面播放RTSP实时视频流,并抓图、录像、回放、倍速等

简介: 因为项目上需要把海康威视摄像头集成到WEB网页中播放,于是开始了对WEB播放摄像头方案的各种折腾。2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。可惜好景不长,从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。

因为项目上需要把海康威视摄像头集成到WEB网页中播放,于是开始了对WEB播放摄像头方案的各种折腾。

2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。可惜好景不长,从  2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。


有朋友推荐的猿大师VLC播放程序,据说是底层调用VLC播放控件然后嵌入到网页中直接播放RTSP视频流的,延迟非常低(实测300毫秒左右),可以媲美官方,于是到猿大师官网下载试用下。

第一步:

先下载VLC播放器,VLC官方下载最新版即可。地址:https://www.videolan.org/

第二步:

猿大师官网下载猿大师中间件,(猿大师官网下载地址:http://www.yuanmaster.com/xiazai/)他们提供了免安装的绿色版本,下载后直接解压缩,然后运行 InstallWrl.bat 启动即可。

 

第三步:

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

 

第四步:

打开猿大师VLC播放程序在线体验网试用, 以全页面显示为例,首先点击连接,右侧会显示连接成功。

 

另外他们还提供VUE的测试页面和源码,内置了三十多种不同的分屏样式,字幕、抓图、录像、水印功能都可以正常使用,可以根据源码和开发文档集成到自己的项目中测试效果,网上找了一个外网视频测试了下(公网视频太少,外网有些卡顿),同时播放12路也没问题,同学们也可以自己测试下播放多少路。


VUE播放海康威视RTSP测试视频:https://www.bilibili.com/video/BV1q44y1H7hp

目录
相关文章
|
15天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`<li v-for="activity in activities">`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
72 5
|
1月前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
28 0
|
21天前
|
JavaScript 前端开发 数据安全/隐私保护
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`<script>`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
135 1
|
3天前
|
JavaScript Apache
Vue升级及版本不匹配解决_Vue packages version mismatch:
Vue升级及版本不匹配解决_Vue packages version mismatch:
11 1
|
22天前
|
JavaScript
|
21天前
|
存储 JavaScript 前端开发
vue在页面使用Vue.prototype全局变量
【6月更文挑战第3天】Vue.prototype 是 Vue 实例的原型对象,用于添加全局属性和方法。通过修改 Vue.prototype,所有 Vue 实例都能访问这些属性和方法。例如,可在 mai
26 1
|
29天前
|
Web App开发 网络安全 Windows
Chrome版本太旧,无法访问此网站www.google.com 的响应时间过长
Chrome版本太旧,无法访问此网站www.google.com 的响应时间过长
32 1
|
1月前
|
JavaScript 数据可视化 UED
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战二(Vue实战系列)
|
1月前
|
JavaScript 前端开发 数据可视化
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
用Vue搭建一个大屏数据可视化页面实战一(Vue实战系列)
|
1月前
|
前端开发 JavaScript 安全
如何给页面元素添加水印背景,在vue中怎么处理?
如何给页面元素添加水印背景,在vue中怎么处理?