jsy-app/pages/fourmonitor/camera.vue

<template>
	<view class="content">
		<view class="preview" id="video-container"></view>
	</view>
</template>

<script module="ezuikit" lang="renderjs">
	export default {
		data() {
			return {
				item:{},
				player:null,
				accessToken:null,
				ezopenUrl:null
			}
		},
		onLoad(option){
			console.log(option)
			if(option.item){
				this.item = JSON.parse(decodeURIComponent(option.item));
			}
		},
		onUnload(){
			try{
				this.stop();
			}catch{
			}
		},
		mounted() {
			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();
			  this.player = new EZUIKit.EZUIKitPlayer({
			    id: 'video-container', // 视频容器ID
			    accessToken: this.item.accessToken,
			    url: this.item.ezopenUrl,
			    // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
			    //template: 'pcRec-pc',
				//template: "mobileRec-",
			    //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();
			}
		}
	}
</script>

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

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