究极更新

api/api.js

@@ -68,7 +68,8 @@ export const villages = (data) => http.get('/common/geo/villages', data)
 export const groups = (data) => http.get('/common/geo/groups', data)
 //视频推流
 export const videoPush = (data) => http.get('/video', data)
-
+//上传视频封面
+export const videoCover = (data) => http.post('api/upload/uploadVideoCover', data)
 
 
 // http: //127.0.0.1:8001/video/17378971117/lihai_lot_walnutpi_dev_1

pages/Login/login.vue

@@ -11,7 +11,6 @@
 			<image src="/static/tabs-icon/dk.png"></image>
 		</view>
 
-
 		<view class="content">
 			<view class="tit">
 				您好！

pages/index/massif.vue

@@ -171,65 +171,8 @@
 
 
 
-				<!-- old -->
-				<!-- 	<view class="card" v-if="Object.keys(dataobj).length>0">
-					<view class="" @click="navgo">
-						<view class="" style="margin: 10rpx 0;">
-							土地名称: {{dataobj.title}}
-						</view>
-
-						<view class="" style="margin: 10rpx 0;">
-							土地面积: {{dataobj.total_area}}亩
-						</view>
-						<view class="" style="margin: 10rpx 0;">
-							种植面积: {{dataobj.total_area-dataobj.residual_area}}亩
-						</view>
-					</view>
-					<view class="changeLand" @click="show=true">
-						切换土地
-					</view>
-
-				</view>
-				<view class="card" v-else>
-					<view class="">
-						<view class="">
-							暂无信息
-						</view>
-					</view>
-				</view> -->
 
 			</view>
-			<!-- <view class="add-thing" v-if="(dataobj.total_area-dataobj.residual_area)==0" @click="palnt(dataobj.id)">
-				新增种植
-			</view>
-			<view class="" v-else>
-				<view class="add-thing" @click="showPicker1=true" v-if="columns2[0]&&columns2[0].length>0">
-					记农事
-				</view>
-			</view> -->
-			<!-- 苗情监测 -->
-			<!-- 	<view class="">
-				<view class="live-video soil-monitor">
-					<view class="head">
-						<view class="tit">
-							苗情监测数据
-						</view>
-						<view class="flushed-time">
-							<u-icon name="clock"></u-icon>
-							<text>刷新时间: {{getNowTimeFn()}} </text>
-						</view>
-					</view>
-				</view>
-				<view class="video" @click="navto(' /pages/live/live')">
-					<u-swiper :list="dataobj.pic" width="100%" height="300rpx"></u-swiper>
-				</view>
-
-
-			</view> -->
-			<!-- 土壤监测 -->
-			<!--  -->
-
-			<!-- 组件 -->
 
 			<u-loading-page :loading="showLoading"></u-loading-page>
 
@@ -238,18 +181,7 @@
 				@close="show = false" @select="confirm">
 			</u-action-sheet>
 		</view>
-		<!-- <view class="empty">
-			<view class="addLand">
-				<view class="">
-					你还没有土地信息
-				</view>
-				<view class="addBtn" @click="navto('/pages/addLand/addLand')">
-					去添加
-				</view>
-			</view>
 
-		</view> -->
-		<!-- 组件 -->
 
 		<view class="Modal">
 			<u-popup :show="showModal" mode="center" @close="closeModal" :round="10">
@@ -396,7 +328,7 @@
 	})
 
 
-	const videoCover = uni.getStorageSync('SY_VIDEO_POSTS') || "/static/main/index/videoCover.png"
+	const videoCover = ref('')
 
 	const dataobj = reactive({})
 	const tdId = ref('')
@@ -528,6 +460,8 @@
 				userInfo.value = res.data
 				video_url.value = res.data.video_url
 				testUser()
+				videoCover.value = userInfo.value.videoCover || "/static/main/index/videoCover.png"
+				uni.getStorageSync('SY_VIDEO_POSTS') || "/static/main/index/videoCover.png"
 				threshold = res.data?.monitor?.threshold || ""
 				if (Object.keys(res.data).length > 0) {
 					getlist3(res.data.id)
@@ -569,7 +503,6 @@
 						// thresholdFn(environmentList[6], threshold.ambient_air_pressure_min, threshold.ambient_air_pressure_max)
 					}
 				}
-
 			}
 		})
 

pages/live/live.vue

@@ -1,8 +1,8 @@
 <template>
 	<view>
 		<view :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg">
-			<video @play="playVedio" @fullscreenchange="fullscreenchange" :controls="true" :autoplay="true"
+			<video v-if="shwovideo" @play="playVedio" @fullscreenchange="fullscreenchange" :controls="true"
-				:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" :src="videoUrl"
+				:autoplay="true" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" :src="videoUrl"
 				id="video"></video>
 		</view>
 		<!-- <image :src="imgSrc" mode=""></image> -->
@@ -11,6 +11,12 @@
 </template>
 
 <script>
+	import {
+		videoCover
+	} from "@/api/api.js"
+	import {
+		Uploads
+	} from "@/api/upload.js"
 	export default {
 		data() {
 			return {
@@ -24,12 +30,17 @@
 				},
 				object_fit: 'contain', //视频样式默认包含🌟
 				windowWidth: '',
+				deviceId: "",
+				shwovideo: false,
 			}
 		},
 
-
 		onLoad(option) {
+			this.deviceId = option.device
 			this.videoUrl = option.url
+			this.videoUrl = this.replaceLastThreeChars(this.videoUrl, "mp4");
+
+			console.log(this.videoUrl)
 			this.subNvue = uni.getSubNVueById('subNvue'); //获取 
 			this.subNvue.show() // 显示
 			let data = {
@@ -43,25 +54,60 @@
 			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
 			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
 			this.boxStyle.height = this.wHeight; //改变视频高度
+
+			setTimeout(() => {
+				this.shwovideo = true
+				console.log("showvideo")
+			}, 2000)
 		},
 
 		methods: {
+			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) {
-				//data.test为返回的封面图  
+				this.imgSrc = (data.test)
-				this.imgSrc = data.test
-				uni.setStorageSync("SY_VIDEO_POSTS", this.imgSrc)
 
-				console.log(uni.getStorageSync('SY_VIDEO_POSTS'))
+				console.log(this.imgSrc)
+				console.log(this.deviceId)
+				videoCover({
+					device_id: this.deviceId,
+					image: this.imgSrc
+				}).then(res => {
+					console.log(res)
+				}).catch(err => {
+					console.log(err)
+				})
 			},
 			//视频封面图  
 			setUrl(url) {
-
 				let options = {};
 				options.width = 300;
 				options.height = 300;
 				options.src = url;
-				console.log("截圖")
 				this.vsrc = options;
 			},
 			openScoket(scoketData) {
@@ -91,14 +137,13 @@
 				});
 			},
 			playVedio() {
-				// setTimeout(() => {
-				// 	this.setUrl(this.videoUrl)
-				// }, 2000)
-
-				// console.log("可以播放")
 				this.subNvue.hide()
 				uni.createVideoContext('video', this).requestFullScreen();
-				screen.orientation.lock('landscape');
+
+				setTimeout(() => {
+					this.setUrl(this.videoUrl)
+				}, 2000)
+				// screen.orientation.lock('landscape');
 
 
 			},

pages/live/live1.vue

@@ -1,98 +0,0 @@
-<template>
-	<view>
-		<view :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg">
-			<video src="http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_6.live.mp4"></video>
-		</view>
-		<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>
-	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/live2.vue

@@ -1,95 +0,0 @@
-<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

@@ -1,99 +0,0 @@
-<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>