vue整合视频流教程

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/