TraceabilityAPP/pages/live/live.vue

<template>
	<view>
		<view :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg">
			<video v-if="shwovideo" @play="playVedio" @fullscreenchange="fullscreenchange" :controls="true"
				:autoplay="true" style="width: 100vw;height: 100vh;" :src="videoUrl" id="video"></video>
		</view>
	</view>
</template>

<script>
	import {
		videoCover
	} from "@/api/api.js"
	import {
		Uploads
	} from "@/api/upload.js"
	export default {
		data() {
			return {
				vsrc: {}, //用于renderjs通信  
				imgSrc: "",
				subNvue: "",
				videoUrl: "",
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				object_fit: 'contain', //视频样式默认包含🌟
				windowWidth: '',
				deviceId: "",
				shwovideo: false,
				initFailTimer: "",
				flag: true,
				SocketTask: "",

			}
		},

		onLoad(option) {
			this.deviceId = option.device
			this.videoUrl = option.url
			this.videoUrl = this.replaceLastThreeChars(this.videoUrl, "mp4");
			// #ifndef H5
			this.subNvue = uni.getSubNVueById('subNvue'); //获取
			this.subNvue.show() // 显示
			// #endif

			let datas = {
				username: option.user,
				device: 'lihai_lot_walnutpi_dev_' + option.device,
				scene: 'app',
			}
			this.openScoket(datas)
			this.platform = uni.getSystemInfoSync().platform
		},

		methods: {
			replaceLastThreeChars(str, replacement) {
				if (str.length < 3) {
					return replacement + str;
				} else {
					return str.slice(0, -3) + replacement;
				}
			},



			// 接收图片的base64编码  
			receiveImg(data) {
				this.imgSrc = (data.test)
				videoCover({
					device_id: this.deviceId,
					image: this.imgSrc
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			//视频封面图  
			setUrl(url) {
				let options = {};
				options.width = 400;
				options.height = 280;
				options.src = url;
				this.vsrc = options;
			},
			openScoket(datas) {
				let that = this
				this.SocketTask = uni.connectSocket({
					url: 'wss://iot.lihaink.cn/test',
					complete: () => {
						console.log(that.socket, "socketTASK")
					}
				});
				this.SocketTask.onOpen(function(res) {
					that.SocketTask.send({
						data: JSON.stringify(datas)
					});
					that.SocketTask.onMessage(function(res) {
						console.log(res, "收到消息")
						if (JSON.parse(res.data).code == 200) {
							that.shwovideo = true
						}
					});
				});
				this.SocketTask.onError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				this.SocketTask.onClose(function(res) {
					console.log('WebSocket 已关闭！');
				});
			},
			playVedio() {
				// #ifndef H5
				this.subNvue.hide()
				// #endif
				uni.createVideoContext('video', this).requestFullScreen();
				this.flag = false
				setTimeout(() => {
					this.setUrl(this.videoUrl)
				}, 2000)
			},
			fullscreenchange(e) {
				if (!e.detail.fullScreen) { // 退出全屏，锁定竖屏
					plus.screen.lockOrientation('portrait-primary');
				}
			},

		},
		onUnload() {
			this.SocketTask.close();
			this.SocketTask = null
			console.log(this.socket, 'sosddsdsd')
		},
	}
</script>

<script module="renderScript" lang="renderjs">
	export default {
		data() {
			return {
				test: ""
			}
		},
		methods: {
			//通过视频获得缩略图  
			getVideoImg(newValue, oldValue, ownerInstance, vm) {

				if (newValue == null)
					return;
				let that = this;
				// 在缓存中创建video标签  
				let video = document.createElement("VIDEO")
				// 添加一个静音的属性，否则自动播放会有声音  
				// video.setAttribute('muted', true)  
				video.muted = true
				// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图  
				video.autoplay = true;
				//允许跨域访问  
				video.crossOrigin = 'anonymous';
				// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源  
				video.innerHTML = '<source src=' + newValue.src + ' type="audio/mp4">'
				// 再创建canvas画布标签  
				let canvas = document.createElement('canvas');
				let ctx = canvas.getContext('2d');
				// video注册canplay自动播放事件  
				video.addEventListener('canplay', function() {
					// 创建画布的宽高属性节点，就是图片的大小，单位PX  
					let anw = document.createAttribute("width");
					anw.nodeValue = newValue.width;
					let anh = document.createAttribute("height");
					anh.nodeValue = newValue.height;
					canvas.setAttributeNode(anw);
					canvas.setAttributeNode(anh);
					// 画布渲染  
					ctx.drawImage(video, 0, 0, newValue.width, newValue.height);
					// 生成图片  
					that.test = canvas.toDataURL('image/png') // 这就是封面图片的base64编码  
					// 视频结束播放的事件  
					video.pause()
					// 返回图片的base64编码  
					ownerInstance.callMethod('receiveImg', {
						test: that.test
					})
				}, false)
			},
		}
	}
</script>

<style lang="scss">
	.vdo {
		width: 100vw;
		height: 100%;
	}
</style>