jsy-app/pages/fourmonitor/camera.vue

<template>
	<view class="content">
		<view class="preview" id="video-container"></view>
		<!-- <view>
			<button @click="ezuikit.stop">stop</button>
			<button @click="ezuikit.play">play</button>
			<button @click="ezuikit.openSound">openSound</button>
			<button @click="ezuikit.closeSound">closeSound</button>
			<button @click="ezuikit.startSave">startSave</button>
			<button @click="ezuikit.stopSave">stopSave</button>
			<button @click="ezuikit.capturePicture">capturePicture</button>
			<button @click="ezuikit.fullScreen">fullScreen</button>
			<button @click="ezuikit.getOSDTime">getOSDTime</button>
			<button @click="ezuikit.ezopenStartTalk">开始对讲</button>
			<button @click="ezuikit.ezopenStopTalk">结束对讲</button>
		</view> -->
	</view>
</template>
<script>
	import { getAccessTokenAndUrl } from "@/api/system/outdevice";
	export default {
		data() {
			return {
				accessToken:null,
				ezopenUrl:null
			}
		},
		mounted() {
			let data = {
				outDeviceCode:"BC8109320",
				type:"1"
			}
			getAccessTokenAndUrl(data).then(res => {
				console.log(res)
				if(res && res.data){
					this.accessToken = res.data.accessToken;
					if(res.data.liveAddressVo){
						this.ezopenUrl = res.data.liveAddressVo.url;
					}
					//this.$emit('someEvent', this.accessToken);
				}
			});
		},
		methods: {
			
		}
	}
</script>


<script module="ezuikit" lang="renderjs">
	export default {
		data() {
			return {
				player:null,
				accessToken:null,
				ezopenUrl:null
			}
		},
		onUnload(){
			this.stop();
			const contentElement = document.getElementById('video-container');
			if (contentElement) {
				contentElement.innerHTML = '';
			}
			this.player = null;
		},
		mounted() {
			let data = {
				outDeviceCode:"BC8109320",
				type:"1"
			}
			console.log('mounted...');
			if (typeof window.EZUIKit !== 'undefined') {
				
				console.log('defined EZUIKit...');
				this.initPlayer();
			} else {
				
				console.log('undefined EZUIKit...');				
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'utils/ezuikit.js'
				script.onload = this.initPlayer.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initPlayer() {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync();
			  var accessToken = "at.8orjxs6rd4rzhjjudcn7n8982p8i7ezx-8z6kz40t6k-1ufqi4z-ec1fx6qix";
			  this.player = new EZUIKit.EZUIKitPlayer({
			    id: 'video-container', // 视频容器ID
			    accessToken: accessToken,
			    url: 'ezopen://open.ys7.com/BC8109320/1.hd.live',
			    // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
			    template: 'pcRec-pc',
			    plugin: ['talk'], // 加载插件，talk-对讲
			    width: windowWidth,
			    height: windowWidth * 2 / 3,
			  });
			  window.player = this.player;
			},
			play() {
				var playPromise = this.player.play();
				playPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			stop() {
				var stopPromise = this.player.stop();
				stopPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			getOSDTime() {
				var getOSDTimePromise = this.player.getOSDTime();
				getOSDTimePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			capturePicture() {
				var capturePicturePromise = this.player.capturePicture(`${new Date().getTime()}`);
				capturePicturePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			openSound() {
				var openSoundPromise = this.player.openSound();
				openSoundPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			closeSound() {
				var openSoundPromise = this.player.closeSound();
				openSoundPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			startSave() {
				var startSavePromise = this.player.startSave(`${new Date().getTime()}`);
				startSavePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			stopSave() {
				var stopSavePromise = this.player.stopSave();
				stopSavePromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			ezopenStartTalk() {
				this.player.startTalk();
			},
			ezopenStopTalk() {
				this.player.stopTalk();
			},
			fullScreen() {
				this.player.fullScreen();
			},
			destroy() {
				var destroyPromise = this.player.destroy();
				destroyPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.preview {
		background-color: black;
	}
</style>