realty/virgo.wzfrontend/console/src/components/common/playVideo.vue

<template>
	<div :id="'video-box' + _uid" class="video">
		<div :id="'ezuikit-player' + _uid"></div>
	</div>
</template>
<script>
	// import EZUIKit from 'ezuikit-js';
	import {
		getCameraAccessToken
	} from '@/httpApi/iot'
	export default {
		props: {
			sourceUrl: {
				type: String,
				default: ''
			},
			template: {
				type: String,
				default: 'simple'
			},
			time: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				player: null,
				width: 352,
				height: 198,
				reset: 0
			};
		},
		computed: {},
		mounted() {
			// let _self = this;
			// _self.$nextTick(() => {
			// 	this.width = document.getElementById('video-box' + this._uid).clientWidth;
			// 	this.height = document.getElementById('video-box' + this._uid).clientHeight;
			// 	if (this.sourceUrl) setTimeout(() => {
			// 		this.init();
			// 	}, 2000 * this.time);
			// });
		},
		beforeDestroy() {
			if (this.player) this.destroy() //销毁并停止直播视频
		},
		methods: {
			init() {
				if (this.player) {
					this.destroy();
				}
				getCameraAccessToken().then(res => {
					if (res.state) {
						this.player = new EZUIKit.EZUIKitPlayer({
							id: "ezuikit-player" + this._uid, // 视频容器ID
							accessToken: res.data,
							url: this.sourceUrl,
							template: this.template,
							width: this.width,
							height: this.height,
							handleSuccess: () => {
								this.reset = 0;
							},
							handleError: (data) => {
								if (data.msg == "该用户不拥有该设备") return;
								if (this.reset < 5) {
									this.play();
									this.reset++
								}
							},
						});
					}
				})
			},
			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() {
				if (!this.player.destroy) return this.$emit('closeVideoModel');
				this.stop();
				var destroyPromise = this.player.destroy();
				destroyPromise.then((data) => {
					console.log('关闭流成功');
					this.$emit('closeVideoModel');
				});
				this.player = null;
			}
		}
	};
</script>

<style lang="scss">
	.video {
		width: 100%;
		height: 100%;

		.loading {
			display: none;
		}
	}

	#webpack-dev-server-client-overlay {
		display: none !important;
	}
</style>