【vue2对接萤石云接口,实现摄像头直播页面的调取显示】

vue2对接萤石云接口,实现摄像头直播页面的调取显示

公司前端vue项目需要实现萤石云接口对接,买好萤石摄像头,注册萤石云账号并将设备添加到萤石云平台,开始调试接口。

使用ezuikit-js插件(accessToken+url)

1.安装

 npm install ezuikit-js --save

若是安装失败可以使用

cnpm install ezuikit-js --save

2.方法调用

<template>
	<div id="video-container"></div>
</template>

<script>
import  EZUIKit from 'ezuikit-js';
export default {
    
    
    name: '',
    data() {
    
    
        return {
    
    
        	player:null,
        }
    },
    created(){
    
    
    	this.getVideoData()
    },
    methods:{
    
    
    	getVideoData(){
    
    
   
    		this.player = new EZUIKit.EZUIKitPlayer({
    
    
     			id: 'video-container', // 视频容器ID
     			accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
     			// 官方url例子:ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 
        		// 更多格式详见官方文档

   				url: 'ezopen://open.ys7.com/203751922/1.live',
   				audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
   				autoplay: true,
                width: 408,
                height: 237
			})
    	},
    },
    beforeDestroy() {
    
    
        this.player && this.player.stop() //销毁并停止直播视频
    }
}
</script>

附上最新代码和demo

https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm

猜你喜欢

转载自blog.csdn.net/qq_39236283/article/details/130128999