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: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" :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,
				shwovideoTimer: "",
				initFailTimer: "",
				flag: true

			}
		},

		onLoad(option) {
			this.deviceId = option.device
			this.videoUrl = option.url
			this.videoUrl = this.replaceLastThreeChars(this.videoUrl, "mp4");
			this.subNvue = uni.getSubNVueById('subNvue'); //获取 
			this.subNvue.show() // 显示
			let data = {
				username: option.user,
				device: 'lihai_lot_walnutpi_dev_' + option.device,
				scene: 'app',
			}
			this.openScoket(data)
			this.canplay(option.device)
			this.platform = uni.getSystemInfoSync().platform
			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
			this.boxStyle.height = this.wHeight; //改变视频高度
			this.initFailTimer = setTimeout(() => {
				if (this.flag) {
					uni.$u.toast("初始化失败,请重新进入")
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			}, 60000)
		},

		methods: {
			canplay(id) {
				let that = this
				this.shwovideoTimer = setInterval(() => {
					uni.request({
						url: `http://rtsp.lihaink.cn/index/api/getMediaInfo?secret=YwDtp2llj80HA19JhMXL4Po99nsMAyNT&schema=rtsp&vhost=__defaultVhost__&app=live&stream=lihai_lot_walnutpi_dev_${id}`, //仅为示例，并非真实接口地址。
						success: (res) => {
							console.log("res", res.data.code);
							if (res.data.code == 0) {
								that.shwovideo = true
								clearInterval(this.shwovideoTimer)
							}
						},
						fail: (err) => {
							console.log(err, "err")
						}
					});

				}, 2500)

			},

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

			plusDownloader(url, options = {}) {
				return new Promise((result, reject) => {
					let dtask = plus.downloader.createDownload(url, options, function(d, status) {
						if (status == 200) {
							console.log("Download success: " + JSON.stringify(d));
							plus.runtime.openFile(d.filename, (err) => {
								console.log(err);
							});
						} else {
							console.log("Download failed: " + status);
						}
					});
					dtask.start();
				})

			},

			// 接收图片的base64编码  
			receiveImg(data) {
				this.imgSrc = (data.test)
				console.log(this.imgSrc)
				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(scoketData) {
				uni.connectSocket({
					url: 'wss://iot.lihaink.cn/test'
				});
				uni.onSocketOpen(function(res) {
					uni.sendSocketMessage({
						data: JSON.stringify(scoketData)

					});
					uni.onSocketMessage(function(res) {
						console.log(res);
					});
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
				uni.onSocketClose(function(res) {
					console.log('WebSocket 已关闭！');
				});
			},
			playVedio() {
				this.subNvue.hide()
				this.flag = false
				uni.createVideoContext('video', this).requestFullScreen();
				setTimeout(() => {
					this.setUrl(this.videoUrl)
				}, 2000)
				// screen.orientation.lock('landscape');


			},
			fullscreenchange(e) {
				if (!e.detail.fullScreen) { // 退出全屏，锁定竖屏
					plus.screen.lockOrientation('portrait-primary');
				}
			},


		}

		,
		onUnload() {
			uni.closeSocket();
			clearTimeout(this.initFailTimer)
			clearInterval(this.shwovideoTimer)
		},
	}
</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>