高版本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

目录
相关文章
|
2月前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
120 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
1月前
|
JavaScript 索引
Vue 3.x 版本中双向数据绑定的底层实现有哪些变化
从Vue 2.x的`Object.defineProperty`到Vue 3.x的`Proxy`,实现了更高效的数据劫持与响应式处理。`Proxy`不仅能够代理整个对象,动态响应属性的增删,还优化了嵌套对象的处理和依赖追踪,减少了不必要的视图更新,提升了性能。同时,Vue 3.x对数组的响应式处理也更加灵活,简化了开发流程。
|
2月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
114 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
2月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
366 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
2月前
|
JavaScript API 开发工具
vue2和vue3版本区别
【10月更文挑战第4天】
|
4月前
|
Web App开发
Chrome 126版本 打印预览失败 #85
Chrome 126版中出现了打印预览功能失效的问题(#85)。目前有两种解决方案:一是在chrome.exe目录为“ALL APPLICATION PACKAGES”用户组设置适当权限;二是等待内核修复,或通过添加启动参数"--disable-features=PrintCompositorLPAC"来暂时解决此问题。
675 1
|
4月前
|
JavaScript 前端开发 API
一个非常 nb 的 Vue 组件 (含Vue3版本)
一个非常 nb 的 Vue 组件 (含Vue3版本)
|
4月前
|
JavaScript
如何查看Vue使用的版本
这篇文章介绍了如何在项目中查看Vue及其相关库的版本信息,比如element-ui和element-china-area-data。要查看Vue的版本,需要查看项目中的`package.json`文件,在`dependencies`部分可以找到Vue的版本号。如果需要查询不同版本的兼容性,可以访问相应的官方文档或资源网站。
|
4月前
|
Web App开发 资源调度 JavaScript
Chrome 安装 Vue Devtools 调试工具
Chrome 安装 Vue Devtools 调试工具
47 0
|
6月前
|
JavaScript Apache
Vue升级及版本不匹配解决_Vue packages version mismatch:
Vue升级及版本不匹配解决_Vue packages version mismatch:
106 1
下一篇
DataWorks