video

manifest.json

@@ -2,8 +2,8 @@
 	"name": "种植溯源",
 	"appid": "__UNI__D087881",
 	"description": "",
-	"versionName": "1.0.2",
+	"versionName": "1.0.3",
-	"versionCode": 102,
+	"versionCode": 103,
 	"transformPx": false,
 	/* 5+App特有相关 */
 	"app-plus": {

pages.json

@@ -101,11 +101,27 @@
 		{
 			"path": "pages/live/live",
 			"style": {
-				"navigationStyle": "custom",
+				"navigationBarTitleText": "苗情檢察",
-				"navigationBarTitleText": "苗情监测",
 				"enablePullDownRefresh": false,
 				"navigationBarBackgroundColor": "#35D190",
-				"navigationBarTextStyle": "white"
+				"navigationBarTextStyle": "white",
+				"app-plus": {
+					"subNVues": [{
+						"path": "pages/live/loading", //路径地址
+						"id": "subNvue", //唯一id，一个页面下最多三个最好，否则影响性能
+						// "type": "popup"  如果是弹窗可开启
+						//这个是初始样式，当然初始想隐藏的话，这个不重要
+						"style": {
+							"width": "100%",
+							"height": "100%",
+							"position": "absolute"
+
+
+						}
+					}]
+				}
+
+
 			}
 		},
 		{

pages/index/massif.vue

@@ -46,7 +46,6 @@
 			<view class="nav-con" style="margin-bottom: 65rpx;">
 			</view>
 		</view>
-
 		<view class="content">
 			<!-- 土地信息 -->
 			<view class="">
@@ -98,9 +97,7 @@
 
 				</view>
 				<view class="live">
-					<u--image
+					<u--image :src="videoCover" v-if="video_url" width="100%" height="450rpx"></u--image>
-						src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231223/20231223092144475437017.png"
-						v-if="video_url" width="100%"></u--image>
 					<u--image :src="u('K')" v-else width="100%"></u--image>
 
 					<view class=""
@@ -122,12 +119,12 @@
 							<view class="" style="color: #2E2E2E;font-size: 26rpx;">
 								{{item.name}}
 							</view>
-							<view class="" :style=" {color: item.status==0?'#73DFB2':'red'}"
+							<view class="" :style=" {color: item.status==0?'#73DFB2':'#EE6969'}"
 								style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold;">
 								{{ item.num?item.num+item.unit:'--' }}
 							</view>
-							<view class="" style="display: flex;color:red" v-if="item.status>0">
+							<view class="" style="display: flex;color:#EE6969" v-if="item.status>0">
-								<u-icon name="arrow-upward" color="red"></u-icon>{{item.status}}
+								<u-icon name="arrow-upward" color="#EE6969"></u-icon>{{item.status}}
 							</view>
 							<view class="" v-if="item.status<0" style="color: #A3E1F5;display: flex;">
 								<u-icon name="arrow-downward" color="#A3E1F5"></u-icon>{{item.status}}
@@ -150,15 +147,15 @@
 							<view class="" style="color: #2E2E2E;font-size: 26rpx;">
 								{{item.name}}
 							</view>
-							<view class="" :style=" {color: item.status==0?'#73DFB2':'red'}"
+							<view class="" :style=" {color: item.status==0?'#73DFB2':'#EE6969'}"
 								style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold;">
 								<text v-if="item.num==0">{{item.num+item.unit}}</text>
 								<text v-else>{{ item.num?item.num+item.unit:'--' }}</text>
 							</view>
 
 
-							<view class="" style="display: flex;color:red" v-if="item.status>0">
+							<view class="" style="display: flex;color:#EE6969" v-if="item.status>0">
-								<u-icon name="arrow-upward" color="red"></u-icon>{{item.status}}
+								<u-icon name="arrow-upward" color="#EE6969"></u-icon>{{item.status}}
 							</view>
 							<view class="" v-if="item.status<0" style="color: #A3E1F5;display: flex;">
 								<u-icon name="arrow-downward" color="#A3E1F5"></u-icon>{{item.status}}
@@ -382,7 +379,13 @@
 		},
 
 	])
+	const userInfo = ref({
+		master_phone: "",
+		device_id: ""
+	})
 	onLoad(() => {
+
+
 		uni.hideTabBar()
 		if (!store.state.userInfo) {
 			uni.redirectTo({
@@ -392,7 +395,9 @@
 		}
 	})
 
-	const userInfo = ref("")
+
+	const videoCover = uni.getStorageSync('SY_VIDEO_POSTS') || "/static/main/index/videoCover.png"
+
 	const dataobj = reactive({})
 	const tdId = ref('')
 	const palntId = ref('')
@@ -503,7 +508,17 @@
 		return `/static/main/index/${icon}.png`
 	}
 	const video_url = ref()
-	let scoketData = ""
+
+
+	const testUser = () => {
+		if (uni.getStorageSync("SY_USER").mobile == '19130550023') {
+			video_url.value =
+				"http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_6.live.mp4"
+			userInfo.value.master_phone = "lihai_lot_land_1"
+			userInfo.value.device_id = "6"
+			// console.log("19130550023")
+		}
+	}
 	//列表获取
 	const getlist = () => {
 		lindexist({
@@ -511,13 +526,8 @@
 		}).then((res) => {
 			if (res.code == 1) {
 				userInfo.value = res.data
-				scoketData = {
-					username: userInfo.value.master_phone,
-					device: 'lihai_lot_walnutpi_dev_' + userInfo.value.device_id
-				}
-				openScoket()
-				// console.log(scoketData)
 				video_url.value = res.data.video_url
+				testUser()
 				threshold = res.data?.monitor?.threshold || ""
 				if (Object.keys(res.data).length > 0) {
 					getlist3(res.data.id)
@@ -714,30 +724,8 @@
 	}
 
 
-	const openScoket = () => {
-		console.log("openScoket")
-		if (store.state.onScoket) return
 
-		store.dispatch('changeScoket')
-		// console.log("建立scoket")
-		// return
-		uni.connectSocket({
-			url: 'ws://iot.lihaink.cn'
-		});
-		uni.onSocketOpen(function(res) {
-			store.dispatch('changeScoket')
-			uni.sendSocketMessage({
-				data: JSON.stringify(scoketData)
-			});
 
-		});
-		uni.onSocketError(function(res) {
-			console.log('WebSocket连接打开失败，请检查！');
-		});
-		uni.onSocketClose(function(res) {
-			console.log('WebSocket 已关闭！');
-		});
-	}
 	onPullDownRefresh(() => {
 		getlist1()
 		getlist2()

pages/live/live.nvue

@@ -1,150 +0,0 @@
-<template>
-	<view class="container">
-
-		<u-loading-page :loading="loading" loading-text="视频加载中,请稍后..."></u-loading-page>
-
-		<view class="" :style="{opacity:loading?'0':'1'}">
-			<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
-				<view class="root">
-					<video ref="videoPlayer" @fullscreenchange='fullscreenchange' :src="url" :object-fit="object_fit"
-						:autoplay="true" @play='playVedio'
-						:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" id="video"></video>
-				</view>
-			</view>
-		</view>
-
-	</view>
-</template>
-<script>
-	export default {
-		data() {
-			return {
-				loading: true,
-				rtmpSources: [],
-				currentIndex: 0,
-				room: {},
-				wHeight: 0, //获取的屏幕高度🌟💗
-				boxStyle: { //视频，图片封面样式🌟💗
-					'height': 0,
-					'width': 0,
-				},
-				object_fit: 'contain', //视频样式默认包含🌟
-				windowWidth: '',
-				url: "",
-				flag: 0,
-				option: ""
-			}
-		},
-
-		computed: {
-			currentSrc() {
-				return this.rtmpSources[this.currentIndex];
-			}
-		},
-		onLoad(option) {
-			this.option = option
-			console.log(option)
-			uni.request({
-				url: `https://iot.lihaink.cn/start/video/${option.user}/lihai_lot_walnutpi_dev_${option.device}`, //仅为示例，并非真实接口地址。
-				headers: {
-					'Referrer-Policy': 'unsafe-url'
-				},
-
-				success: (res) => {
-					// console.log(
-					// 	`https://iot.lihaink.cn/video/${option.user}/lihai_lot_walnutpi_dev_${option.device}`
-					// );
-					console.log('res为:');
-					console.log(res)
-					// this.text = 'request success';
-				}
-			});
-
-
-			this.url = option.url
-			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.get()
-		},
-		onUnload() {
-
-			uni.request({
-				url: `https://iot.lihaink.cn/stop/video/${this.option.user}/lihai_lot_walnutpi_dev_${this.option.device}`, //仅为示例，并非真实接口地址。
-				success: (res) => {
-					// console.log(
-					// 	`https://iot.lihaink.cn/stop/video/${this.option.user}/lihai_lot_walnutpi_dev_${this.option.device}`
-					// )
-					console.log('res为:');
-					console.log(res)
-					// this.text = 'request success';
-				}
-			});
-
-
-
-		},
-		mounted() {
-			// 初始化时播放第一个源
-
-			// this.playCurrent();
-
-		},
-
-		methods: {
-			fullscreenchange() {
-				this.flag += 1
-				if (this.flag == 2) {
-					uni.navigateBack()
-				}
-				console.log("推出")
-			},
-			playVedio() {
-				uni.createVideoContext('video', this).requestFullScreen();
-				screen.orientation.lock('landscape');
-				loading = false
-			},
-			playCurrent() {
-				console.log(this.$refs.videoPlayer)
-				if (this.$refs.videoPlayer) {
-					this.$refs.videoPlayer.load();
-					this.$refs.videoPlayer.play();
-				}
-
-			},
-			playNext() {
-				this.currentIndex++;
-				if (this.currentIndex >= this.rtmpSources.length) {
-					this.currentIndex = 0; // 回到第一个源
-				}
-				this.playCurrent();
-			},
-
-
-			get() {
-				let that = this
-				this.rtmpSources = ["https://lihai001.oss-cn-chengdu.aliyuncs.com/media/af4b9202306121644508620.mp4"]
-				// playbackDetail({
-				// 	app_name: 'shop',
-				// 	live_stream_id: this.room.live_stream_id
-				// }).then((res) => {
-				// 	console.log(res.data, '1111')
-
-				// 	this.rtmpSources = res.data.playback_url;
-
-
-				// })
-
-			},
-
-		},
-
-	}
-</script>
-<style lang="scss" scoped>
-	// div{
-	// 	opacity: ;
-	// }
-</style>

pages/live/live.vue

@@ -0,0 +1,179 @@
+<template>
+	<view>
+		<view :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg">
+			<video @play="playVedio" @fullscreenchange="fullscreenchange" :controls="true" :autoplay="true"
+				:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" :src="videoUrl"
+				id="video"></video>
+		</view>
+		<!-- <image :src="imgSrc" mode=""></image> -->
+		<!-- <button @click="setUrl(videoUrl)">设置链接</button> -->
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				vsrc: {}, //用于renderjs通信  
+				imgSrc: "",
+				subNvue: "",
+				videoUrl: "",
+				boxStyle: { //视频，图片封面样式🌟💗
+					'height': 0,
+					'width': 0,
+				},
+				object_fit: 'contain', //视频样式默认包含🌟
+				windowWidth: '',
+			}
+		},
+
+
+		onLoad(option) {
+			this.videoUrl = option.url
+			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.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; //改变视频高度
+		},
+
+		methods: {
+			// 接收图片的base64编码  
+			receiveImg(data) {
+				//data.test为返回的封面图  
+				this.imgSrc = data.test
+				uni.setStorageSync("SY_VIDEO_POSTS", this.imgSrc)
+
+				console.log(uni.getStorageSync('SY_VIDEO_POSTS'))
+			},
+			//视频封面图  
+			setUrl(url) {
+
+				let options = {};
+				options.width = 300;
+				options.height = 300;
+				options.src = url;
+				console.log("截圖")
+				this.vsrc = options;
+			},
+			openScoket(scoketData) {
+				uni.connectSocket({
+					url: 'wss://iot.lihaink.cn/test'
+				});
+				uni.onSocketOpen(function(res) {
+					console.log("scoket打开")
+
+					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() {
+				// setTimeout(() => {
+				// 	this.setUrl(this.videoUrl)
+				// }, 2000)
+
+				// console.log("可以播放")
+				this.subNvue.hide()
+				uni.createVideoContext('video', this).requestFullScreen();
+				screen.orientation.lock('landscape');
+
+
+			},
+			fullscreenchange(e) {
+				if (!e.detail.fullScreen) { // 退出全屏，锁定竖屏
+					plus.screen.lockOrientation('portrait-primary');
+				}
+			},
+
+
+		}
+
+		,
+		onUnload() {
+			uni.closeSocket();
+		},
+	}
+</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>

pages/live/live1.vue

@@ -1,16 +1,98 @@
 <template>
-
+	<view>
-	<view class="root">
+		<view :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg">
-		<video ref="videoPlayer"
+			<video src="http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_6.live.mp4"></video>
-			src="http://flv4mp4.people.com.cn/videofile7/pvmsvideo/2023/6/29/DangWang-LiuYuanYuan_73783a6224527dc7b5448ded2f8de997_ms_hd.mp4"
+		</view>
-			:autoplay="true" @play="playVedio" style="width: 100vw;height: 100vh;" id="video"></video>
+		<image :src="imgSrc" mode=""></image>
+		<!-- <button @click="setUrl('_doc/uniapp_save/16891612452645.mp4')">设置链接</button> -->
+		<!-- <button @click="setUrl('http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_6.live.mp4')">设置链接</button> -->
 	</view>
-
 </template>
 
-<script setup>
+<script>
-	// import mqtt from '@/uni_modules/celery-mqtt/js_sdk/index.js';
+	export default {
+		data() {
+			return {
+				vsrc: {}, //用于renderjs通信  
+				imgSrc: ""
+			}
+		},
+		methods: {
+			// 接收图片的base64编码  
+			receiveImg(data) {
+				//data.test为返回的封面图  
+				this.imgSrc = data.test
+			},
+			//视频封面图  
+			setUrl(url) {
+				let options = {};
+				options.width = 300;
+				options.height = 300;
+				options.src = url;
+				this.vsrc = options;
+			}
+
+		}
+	}
 </script>
 
-<style>
+<script module="renderScript" lang="renderjs">
+	export default {
+		data() {
+			return {
+				test: ""
+			}
+		},
+		methods: {
+			//通过视频获得缩略图  
+			getVideoImg(newValue, oldValue, ownerInstance, vm) {
+				console.log("getVideoImg触发了", newValue, oldValue);
+
+
+
+				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() {
+					console.log("canplay事件触发了");
+					// 创建画布的宽高属性节点，就是图片的大小，单位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">
+
 </style>

pages/live/live2.vue

@@ -0,0 +1,95 @@
+<template>
+
+	<view class="root">
+		<video ref="videoPlayer"
+			src="http://flv4mp4.people.com.cn/videofile7/pvmsvideo/2023/6/29/DangWang-LiuYuanYuan_73783a6224527dc7b5448ded2f8de997_ms_hd.mp4"
+			:autoplay="true" @play="playVedio" style="width: 100vw;height: 100vh;" id="video"></video>
+	</view>
+
+</template>
+<script>
+	export default {
+		data() {
+			return {
+				loading: true,
+
+				url: "",
+				option: "",
+			}
+		},
+
+
+		onLoad(option) {
+			let data = {
+				username: option.user,
+				device: 'lihai_lot_walnutpi_dev_' + option.device,
+				scene: 'app',
+			}
+			// this.openScoket(data)
+			this.option = option
+			this.url = option.url
+
+			console.log(option.url)
+
+
+		},
+		onUnload() {
+			uni.closeSocket();
+		},
+		mounted() {},
+
+		methods: {
+			openScoket(scoketData) {
+				uni.connectSocket({
+					url: 'wss://iot.lihaink.cn/test'
+				});
+				uni.onSocketOpen(function(res) {
+					console.log("scoket打开")
+
+					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 已关闭！');
+				});
+			},
+
+
+
+			fullscreenchange() {
+				this.flag += 1
+				if (this.flag == 2) {
+					uni.navigateBack()
+				}
+				console.log("推出")
+			},
+			playVedio() {
+				uni.createVideoContext('video', this).requestFullScreen();
+				screen.orientation.lock('landscape');
+				loading = false
+			},
+
+
+
+
+		},
+
+	}
+</script>
+
+
+
+<style>
+</style>

pages/live/live3.vue

@@ -0,0 +1,99 @@
+<template>
+	<view>
+		<view :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg">
+			<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
+		</view>
+		<image :src="imgSrc" mode=""></image>
+		<!-- <button @click="setUrl('_doc/uniapp_save/16891612452645.mp4')">设置链接</button> -->
+		<button
+			@click="setUrl('https://vod.v.jstv.com/video/2022/10/26/202210261666745382873_202_1767.mp4')">设置链接</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				vsrc: {}, //用于renderjs通信  
+				imgSrc: ""
+			}
+		},
+		methods: {
+			// 接收图片的base64编码  
+			receiveImg(data) {
+				//data.test为返回的封面图  
+				this.imgSrc = data.test
+			},
+			//视频封面图  
+			setUrl(url) {
+				let options = {};
+				options.width = 300;
+				options.height = 300;
+				options.src = url;
+				this.vsrc = options;
+			}
+
+		}
+	}
+</script>
+
+<script module="renderScript" lang="renderjs">
+	export default {
+		data() {
+			return {
+				test: ""
+			}
+		},
+		methods: {
+			//通过视频获得缩略图  
+			getVideoImg(newValue, oldValue, ownerInstance, vm) {
+				console.log("getVideoImg触发了", newValue, oldValue);
+
+
+
+				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() {
+					console.log("canplay事件触发了");
+					// 创建画布的宽高属性节点，就是图片的大小，单位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">
+
+</style>

pages/live/loading.nvue

@@ -0,0 +1,20 @@
+<template>
+	<view id="subNvue">
+		<view class="" style="background-color: white;width: 750rpx;height:1000px;position: relative;">
+			<view class="" style="margin-top: 350px;">
+				<u-loading-icon mode="semicircle" text="瘋狂加载中..." textSize="18"></u-loading-icon>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+
+	}
+</script>
+
+<style>
+
+</style>

unpackage/dist/build/app-plus/manifest.json

@@ -7,8 +7,8 @@
   "id": "__UNI__D087881",
   "name": "种植溯源",
   "version": {
-    "name": "1.0.2",
+    "name": "1.0.3",
-    "code": 102
+    "code": 103
   },
   "description": "",
   "developer": {

unpackage/dist/dev/.nvue/app.js

@@ -1,7 +1,7 @@
-Promise.resolve("./pages/live/live.js").then((res) => {
+Promise.resolve("./pages/addLand/select_address_n.js").then((res) => {
   res.length;
 });
-Promise.resolve("./pages/addLand/select_address_n.js").then((res) => {
+Promise.resolve("./pages/live/loading.js").then((res) => {
   res.length;
 });
 Promise.resolve("./app.css.js").then(() => {