如何在VUE中播放RTSP 实时视频，延迟要小于500ms

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

微信：