究极更新
This commit is contained in:
parent
3618e8b0b4
commit
d0c0bffbc4
|
@ -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
|
|
@ -11,7 +11,6 @@
|
|||
<image src="/static/tabs-icon/dk.png"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="content">
|
||||
<view class="tit">
|
||||
您好!
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<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"
|
||||
<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>
|
||||
<!-- <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
|
||||
uni.setStorageSync("SY_VIDEO_POSTS", this.imgSrc)
|
||||
this.imgSrc = (data.test)
|
||||
|
||||
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');
|
||||
|
||||
|
||||
},
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue