H5端接入萤石监控

官方文档

EZOPEN协议

下滑至-平台架构

web/h5端使用文档

方案介绍

<template>
	<div :id="`video-container${index}${index2}`" class="w-full bg-black"></div>
</template>

<script>

export default {
	data() {
	    return {
	      EZVIZAToken: '',
	      data: [],
	    }
	  },
	methods: {
	    geteZVIZAccessToken() {
	      if (!this.EZVIZAToken) {
	        eZVIZAccessToken().then(res => {
	          if (res.code === 200) {
	            this.EZVIZAToken = res.data.accessToken
	            this.getData()
	          }
	        })
	      } else {
	        this.getData()
	      }
    	},
	    async getData() {
	      const res = await queryRoomsDeviceList({
	        homeId: this.homeId,
	      })
	      if (res.code === 200) {
	        this.data = res.data
	        this.data.forEach((item, index) => {
	          item.deviceList.forEach((item2, index2) => {
	            const url = `ezopen://${item2.verificationCode}@open.ys7.com/${item2.deviceSerial}/1.live`
	            console.log(url)
	            new EZUIKit.EZUIKitPlayer({
	              id: `video-container${index}${index2}`, // 视频容器ID
	              // accessToken: this.EZVIZAToken,
	              accessToken: 'ra.c4zy91dfbw0pozpi71yfujjp0d6xm89s-60u7gn0w0d-14qttbs-isyllujwg',
	              url: 'ezopen://open.ys7.com/AA2615287/1.live',
	              // url: url,
	              width: '100%',
	              height: '300px',
	              audio: 0,
	            }).play()
	          })
	        })
	      }
	    },
	  },
}
</script>