video
This commit is contained in:
parent
cec3669a0b
commit
3618e8b0b4
|
@ -2,8 +2,8 @@
|
||||||
"name": "种植溯源",
|
"name": "种植溯源",
|
||||||
"appid": "__UNI__D087881",
|
"appid": "__UNI__D087881",
|
||||||
"description": "",
|
"description": "",
|
||||||
"versionName": "1.0.2",
|
"versionName": "1.0.3",
|
||||||
"versionCode": 102,
|
"versionCode": 103,
|
||||||
"transformPx": false,
|
"transformPx": false,
|
||||||
/* 5+App特有相关 */
|
/* 5+App特有相关 */
|
||||||
"app-plus": {
|
"app-plus": {
|
||||||
|
|
22
pages.json
22
pages.json
|
@ -101,11 +101,27 @@
|
||||||
{
|
{
|
||||||
"path": "pages/live/live",
|
"path": "pages/live/live",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationStyle": "custom",
|
"navigationBarTitleText": "苗情檢察",
|
||||||
"navigationBarTitleText": "苗情监测",
|
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationBarBackgroundColor": "#35D190",
|
"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"
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -46,7 +46,6 @@
|
||||||
<view class="nav-con" style="margin-bottom: 65rpx;">
|
<view class="nav-con" style="margin-bottom: 65rpx;">
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 土地信息 -->
|
<!-- 土地信息 -->
|
||||||
<view class="">
|
<view class="">
|
||||||
|
@ -98,9 +97,7 @@
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<view class="live">
|
<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>
|
<u--image :src="u('K')" v-else width="100%"></u--image>
|
||||||
|
|
||||||
<view class=""
|
<view class=""
|
||||||
|
@ -122,12 +119,12 @@
|
||||||
<view class="" style="color: #2E2E2E;font-size: 26rpx;">
|
<view class="" style="color: #2E2E2E;font-size: 26rpx;">
|
||||||
{{item.name}}
|
{{item.name}}
|
||||||
</view>
|
</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;">
|
style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold;">
|
||||||
{{ item.num?item.num+item.unit:'--' }}
|
{{ item.num?item.num+item.unit:'--' }}
|
||||||
</view>
|
</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>
|
||||||
<view class="" v-if="item.status<0" style="color: #A3E1F5;display: flex;">
|
<view class="" v-if="item.status<0" style="color: #A3E1F5;display: flex;">
|
||||||
<u-icon name="arrow-downward" color="#A3E1F5"></u-icon>{{item.status}}
|
<u-icon name="arrow-downward" color="#A3E1F5"></u-icon>{{item.status}}
|
||||||
|
@ -150,15 +147,15 @@
|
||||||
<view class="" style="color: #2E2E2E;font-size: 26rpx;">
|
<view class="" style="color: #2E2E2E;font-size: 26rpx;">
|
||||||
{{item.name}}
|
{{item.name}}
|
||||||
</view>
|
</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;">
|
style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold;">
|
||||||
<text v-if="item.num==0">{{item.num+item.unit}}</text>
|
<text v-if="item.num==0">{{item.num+item.unit}}</text>
|
||||||
<text v-else>{{ item.num?item.num+item.unit:'--' }}</text>
|
<text v-else>{{ item.num?item.num+item.unit:'--' }}</text>
|
||||||
</view>
|
</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>
|
||||||
<view class="" v-if="item.status<0" style="color: #A3E1F5;display: flex;">
|
<view class="" v-if="item.status<0" style="color: #A3E1F5;display: flex;">
|
||||||
<u-icon name="arrow-downward" color="#A3E1F5"></u-icon>{{item.status}}
|
<u-icon name="arrow-downward" color="#A3E1F5"></u-icon>{{item.status}}
|
||||||
|
@ -382,7 +379,13 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
])
|
])
|
||||||
|
const userInfo = ref({
|
||||||
|
master_phone: "",
|
||||||
|
device_id: ""
|
||||||
|
})
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
|
|
||||||
|
|
||||||
uni.hideTabBar()
|
uni.hideTabBar()
|
||||||
if (!store.state.userInfo) {
|
if (!store.state.userInfo) {
|
||||||
uni.redirectTo({
|
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 dataobj = reactive({})
|
||||||
const tdId = ref('')
|
const tdId = ref('')
|
||||||
const palntId = ref('')
|
const palntId = ref('')
|
||||||
|
@ -503,7 +508,17 @@
|
||||||
return `/static/main/index/${icon}.png`
|
return `/static/main/index/${icon}.png`
|
||||||
}
|
}
|
||||||
const video_url = ref()
|
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 = () => {
|
const getlist = () => {
|
||||||
lindexist({
|
lindexist({
|
||||||
|
@ -511,13 +526,8 @@
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
if (res.code == 1) {
|
if (res.code == 1) {
|
||||||
userInfo.value = res.data
|
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
|
video_url.value = res.data.video_url
|
||||||
|
testUser()
|
||||||
threshold = res.data?.monitor?.threshold || ""
|
threshold = res.data?.monitor?.threshold || ""
|
||||||
if (Object.keys(res.data).length > 0) {
|
if (Object.keys(res.data).length > 0) {
|
||||||
getlist3(res.data.id)
|
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(() => {
|
onPullDownRefresh(() => {
|
||||||
getlist1()
|
getlist1()
|
||||||
getlist2()
|
getlist2()
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
@ -1,16 +1,98 @@
|
||||||
<template>
|
<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>
|
</view>
|
||||||
|
|
||||||
</template>
|
</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>
|
</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>
|
</style>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Binary file not shown.
After Width: | Height: | Size: 327 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -7,8 +7,8 @@
|
||||||
"id": "__UNI__D087881",
|
"id": "__UNI__D087881",
|
||||||
"name": "种植溯源",
|
"name": "种植溯源",
|
||||||
"version": {
|
"version": {
|
||||||
"name": "1.0.2",
|
"name": "1.0.3",
|
||||||
"code": 102
|
"code": 103
|
||||||
},
|
},
|
||||||
"description": "",
|
"description": "",
|
||||||
"developer": {
|
"developer": {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
Promise.resolve("./pages/live/live.js").then((res) => {
|
Promise.resolve("./pages/addLand/select_address_n.js").then((res) => {
|
||||||
res.length;
|
res.length;
|
||||||
});
|
});
|
||||||
Promise.resolve("./pages/addLand/select_address_n.js").then((res) => {
|
Promise.resolve("./pages/live/loading.js").then((res) => {
|
||||||
res.length;
|
res.length;
|
||||||
});
|
});
|
||||||
Promise.resolve("./app.css.js").then(() => {
|
Promise.resolve("./app.css.js").then(() => {
|
||||||
|
|
Loading…
Reference in New Issue