jsy-app/pages/fourmonitor/camera.vue

<template>
	<custom-nav-bar :left="true" title="摄像头"></custom-nav-bar>
	<view class="content">
		<view :item="item" :change:item="ezuikit.loadItem"></view>
		<view class="preview" id="video-container" ></view>
		<view>
			<button @click="ezuikit.handlePlay">播放</button>
			<button @click="ezuikit.LookBack">回看</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {}
			}
		},
		onLoad(option){
			if(option.item){
				this.item = JSON.parse(decodeURIComponent(option.item));
			}
		},
		methods: {
		}
	}
</script>

<script module="ezuikit" lang="renderjs">
	var accessToken=null;
	var ezopenUrl1=null;
	var ezopenUrl2=null;
	var outDeviceCode=null;
	var player = null;
	export default {
		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 = 'static/ezuikit.js'
				script.onload = this.initPlayer.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			loadItem(oldValve,newValve,ownerInstance,insance){
				this.accessToken = newValve.accessToken;
				this.ezopenUrl1 = newValve.ezopenUrl1;
				this.ezopenUrl2 = newValve.ezopenUrl2;
				this.outDeviceCode = newValve.outDeviceCode;
			},
			initPlayer() {
			  this.player = new EZUIKit.EZUIKitPlayer({
			    id: 'video-container', // 视频容器ID
			    accessToken: this.accessToken,
			    url: this.ezopenUrl1,
			    // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
			    //template: "pcRec",
				//template: "mobileRe",
			    //plugin: ['talk'], // 加载插件，talk-对讲
			    width: 500,
			    height: 500 * 2 / 3,
			  });
			  window.player = this.player;
			},
			play() {
				var playPromise = this.player.play();
				playPromise.then((data) => {
					console.log("promise 获取 数据", data)
				})
			},
			handlePlay(){
				this.changePlayUrl(this.ezopenUrl1,this.accessToken,this.outDeviceCode);
			},
			LookBack(){
				this.changePlayUrl(this.ezopenUrl2,this.accessToken,this.outDeviceCode);
			},
			changePlayUrl(url, accessToken, deviceSerial) {
				this.player.changePlayUrl({ url: url, accessToken: accessToken, deviceSerial: deviceSerial });
			},
			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>