Xazn-app/pages_player/list/devicePlayerMpWeixin.vue

<template>
	<web-view :src="webviewSrc" ref="webview" @onPostMessage="handlePostMessage"
		@message="handlePostMessage"></web-view>
</template>

<script>
	const WEBVIEW_URL = 'https://xaznkj.cn/';
	import {
		ptzdirection,
		ptzscale
	} from '@/apis/modules/sip';
	import {
		startPlay,
		playback,
		closeStream,
		playbackSeek,
		playbackSpeed,
		getDevRecord,
		getPushUrl,
		startBroadcast,
		stopBroadcast,
		startDownloadRecord
	} from '@/apis/modules/player';
	export default {
		name: 'devicePlayerWebView',
		data() {
			return {
				// 设备信息
				deviceId: '',
				channelId: '',
				streamId: '',
				webviewSrc: '',
				playurl: '',
				playing: false,
				queryDate: '',
				videoVod: false,
				vodData: {},
				hisData: [],
			}
		},
		onLoad(option) {
			this.deviceId = option.deviceId;
			this.channelId = option.channelSipId;
			if (option.videoVod) {
				this.videoVod = option.videoVod;
				this.loadDevRecord();
			} else {
				this.sendDevicePush();
			}
			this.webviewSrc = WEBVIEW_URL + 'js/video.html';
		},
		methods: {
			closeWebview() {
				this.webviewSrc = ''; // 清空当前页面
				this.$nextTick(() => {
					this.webviewSrc = WEBVIEW_URL + 'js/video.html';
				});
			},
			cleanPlayer(stop) {
				if (stop) {
					this.stopPlay()
				}
				this.closeWebview();
				this.playing = false
			},

			//直播控制
			sendDevicePush: function() {
				console.log("通知设备推流1：" + this.deviceId + " : " + this.channelId);
				if (this.channelId) {
					startPlay(this.deviceId, this.channelId).then((response) => {
						console.log("开始播放：" + this.deviceId + " : " + this.channelId);
						let res = response.data;
						this.streamId = res.streamId;
						this.playurl = res.playurl;
						console.log(this.$refs.webview);
						//this.$refs.webview.clear();
						var timestamp = new Date().getTime();
						this.webviewSrc = WEBVIEW_URL + 'js/video.html?data=' +
							encodeURIComponent(JSON.stringify({
								"type": "play",
								"playUrl": this.playurl,
								"time": timestamp
							}));
						this.playing = true;
					});
				}
			},
			stopPlay() {
				if (this.streamId && this.playing) {
					closeStream(this.deviceId, this.channelId, this.streamId).then(res => {
						this.playing = false
						this.streamId = '';
						this.playurl = '';
					})
				}
			},
			handlePtz(arrow) {
				let leftRight = 0;
				let upDown = 0;
				if (arrow === 'left') {
					leftRight = 2;
				} else if (arrow === 'right') {
					leftRight = 1;
				} else if (arrow === 'up') {
					upDown = 1;
				} else if (arrow === 'down') {
					upDown = 2;
				}
				var data = {
					leftRight: leftRight,
					upDown: upDown,
					moveSpeed: 125
				};
				ptzdirection(this.deviceId, this.channelId, data).then(async response => {
					console.log("云台方向控制：" + JSON.stringify(response));
				});
			},
			handlePtzScale(inOut) {
				console.log('云台缩放：' + inOut);
				var data = {
					inOut: inOut,
					scaleSpeed: 30
				}
				ptzscale(this.deviceId, this.channelId, data);
				// 放大/缩小后自动关闭
				setTimeout(() => {
					ptzscale(this.deviceId, this.channelId, {
						inOut: 0,
						scaleSpeed: 30
					})
				}, 800);
			},
			//录像控制
			loadDevRecord() {
				if (this.deviceId && this.channelId) {
					const date = this.queryDate ? new Date(new Date(this.queryDate).toLocaleDateString()).getTime() :
						new Date(new Date().toLocaleDateString()).getTime()
					const start = date / 1000
					const end = Math.floor((date + 24 * 60 * 60 * 1000 - 1) / 1000)
					const query = {
						start: start,
						end: end,
					}
					getDevRecord(this.deviceId, this.channelId, query).then(async (response) => {
						if (response.data != null && response.data.recordItems != null) {
							this.hisData = response.data.recordItems
							const len = this.hisData.length
							if (len > 0) {
								if (this.hisData[0].start < start) {
									this.vodData = {
										start: start,
										end: end,
										base: start
									}
									this.hisData[0].start = start
								} else {
									this.vodData = {
										start: this.hisData[0].start,
										end: end,
										base: start
									}
								}
								this.playback(this.hisData)
							} else {
								this.$u.toast('当前通道没有录像');
							}
						} else {
							this.$u.toast('当前通道没有录像');
						}
					})
				}
			},

			//录像播放
			playback(playTimes) {
				if (this.deviceId && this.channelId) {
					if (this.streamId) {
						closeStream(this.deviceId, this.channelId, this.streamId).then(res => {
							const query = {
								start: this.vodData.start,
								end: this.vodData.end,
							}
							playback(this.deviceId, this.channelId, query).then(res => {
								this.playing = true
								this.streamId = res.data.streamId
								this.playurl = res.data.playurl
							}).finally(() => {
								this.triggerPlay(playTimes)
							})
						})
					} else {
						const query = {
							start: this.vodData.start,
							end: this.vodData.end,
						}
						playback(this.deviceId, this.channelId, query).then(res => {
							this.playing = true
							this.streamId = res.data.streamId
							this.playurl = res.data.playurl
						}).finally(() => {
							this.triggerPlay(playTimes)
						})
					}
				}
			},
			triggerPlay(playTimes) {
				if (this.playing && this.videoVod) {
					// this.closeWebview();
					this.$nextTick(() => {
						this.webviewSrc = WEBVIEW_URL + 'js/video.html?data=' +
							encodeURIComponent(JSON.stringify({
								"type": "playback",
								"playUrl": this.playurl,
								"playTimes": playTimes
							}));
					});
				}
			},
			seekPlay(s) {
				const curTime = this.vodData.base + s.hour * 3600 + s.min * 60 + s.second
				const seekRange = curTime - this.vodData.start
				if (this.streaminfo.ssrc && this.playing) {
					const query = {
						seek: seekRange,
					}
				}
			},
			onMessage(e) {
				console.log(`【UNILOG】-【onGetH5Message】`);
				console.log('【UNILOG】', JSON.stringify(e.detail.data));
			},
		},
	}
</script>

<style lang="scss">
</style>