如何在VUE中播放RTSP 实时视频,延迟要小于500ms
VUE在最近几年前端开发的发展中脱颖而出,凭借其简单性赢得了广大开发人员的喜爱,而angular有非常陡峭的学习曲线,今天我们来看一下如何在VUE播放RTSP 实时视频,本文使用的浏览器为Chrome,具体浏览器的兼容性可以参考h5stream 的中文介绍https://linkingvision.com/download/documentation/h5stream/ 或者百度网盘 htt..
VUE在最近几年前端开发的发展中脱颖而出,凭借其简单性赢得了广大开发人员的喜爱,而angular有非常陡峭的学习曲线,今天我们来看一下如何在VUE播放RTSP 实时视频,本文使用的浏览器为Chrome,具体浏览器的兼容性可以参考h5stream 的中文介绍
https://linkingvision.com/download/documentation/h5stream/ 或者百度网盘 https://pan.baidu.com/s/1_nqwzEs86E0y6CA7wVKNjA#list/path=%2Fh5stream%2Fdocumentation%2Fh5stream
本文涉及的代码已经提交到github https://github.com/linkingvision/h5svue
1. 参照h5stream 在本机搭建,并且需要配置token1 的src,可以使用h5sconsole 测试该src是否可以播放
2. 安装 vue Install npm install -g vue-cli
3. 初始化 h5svue 工程 vue init webpack h5svue
4. 添加 iview npm install --save iview
5. 修改调试的环境变量 dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT:'"http://localhost:8080/"',
WS_HOST_ROOT:'"localhost:8080"'
})
6.把 h5splayer.js 中加入如下一行,对应的js来源于h5s 最新的发布包
export {H5sPlayerWS,H5sPlayerHls,H5sPlayerRTC}
可以参考整理好的代码 https://github.com/linkingvision/h5svue/tree/master/src/assets
默认h5svue 使用的WS,如果想切换成RTC,可以在liveplayer.vue 中打开 RTC 并注释WS
this.h5handler = new H5sPlayerWS(conf);
//this.h5handler = new H5sPlayerRTC(conf);
如有问题,可以发贴到如下链接:
https://lsc.linkingvision.com/
或者直接联系我们
QQ: 2104915834
微信:
更多推荐
所有评论(0)