vue整合视频流教程
业务需求:客户需要将监控接入到自己的app中,在市面上很多监控是不分享视频流地址的,推荐方案选择海康,大华等品牌的监控,获取到监控地址整合到自己的app中。
在开发前需要普及的一些知识:
HLS适用于移动端使用,可用微信直接打开,也可集成H5页面嵌入到微信小程序或者微信公众号中。
RTMP适用于PC网页端使用,可用flash或者ckplayer等播放器嵌入网页的方式播放,较HLS延迟小,更稳定。
1、安装萤石云的插件
npm install ezuikit
2、 在需要的页面中引入萤石云的插件
import EZUIPlayer from "ezuikit/ezuiki
3、静态页面
<video id="myPlayer" width="100%" height="100%" controls playsinline webkit-playsinline autoplay>
<source type="application/x-mpegURL" :src="videoHls"/>
<!--<source :src="rtmp_url"/>-->
</video>
4、动态
<script>
export default {
data(){
return{
videoHls:'',
}
},
mounted(){
this.GetLiveUrl();
},
methods:{
GetLiveUrl(){
//异步获取直播地址,并赋值给videoHls
}
},
updated() {
if(this.videoHls!=""){
//如果在mounted中声明,直播地址还未取到,导致视频不显示。所以放在了这里
this.player = new EZUIPlayer('myPlayer');
}
}
}
</script>
5、 各个属性值的含义
属性名 | 示例 | 说明 |
---|---|---|
id | myPlayer | 必填video标签为id |
src | ezopen://open.ys7.com/f01018a141094b7fa138b9d0b856507b.live | 直播地址 |
autoplay | true | 自动播放 |
poster | 图片url | 封面图片地址 |
width | 400 | 视频宽度元素 |
height | 400 | 视频高度 |
6、在整合视频流时遇到的问题
Error: EZUIPlayer requires parameter videoId
整合视频流时不能在初始化界面时渲染视频流;
- created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
- mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
解决问题的思路:复制错误,在vue中查找错误所在的位置。分析错误的原因,本次我遇到的错误时create时没有获取到元素;
解决问题:在mounted中定义方法
附文档地址: : https://open.ys7.com/doc/zh/