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

本文介绍如何在VUE中实现RTSP实时视频播放,包括在Chrome浏览器中使用h5stream组件的具体步骤,从环境搭建到代码实现,以及如何在liveplayer.vue中切换播放方式。

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

微信:

 

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值