111 lines
2.7 KiB
Plaintext
111 lines
2.7 KiB
Plaintext
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view>
|
|||
|
|
<!-- :style="`width: ${videoHidth}px;height:${videoHeight}px;top:${videoOffset}px;left:${-videoOffset}px`" -->
|
|||
|
|
<!-- style="width: 770px;height: 414px;top: 147px;left: -147px;" -->
|
|||
|
|
<video v-if="shwovideo" @play="playVedio" @fullscreenchange="fullscreenchange" :controls="true"
|
|||
|
|
:autoplay="true" :show-fullscreen-btn='false' :muted="true" :src="videoUrl" id="video" :style="`
|
|||
|
|
width: ${videoWidth};
|
|||
|
|
height: ${videoHeight};`"></video>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
imgSrc: "",
|
|||
|
|
subNvue: "",
|
|||
|
|
videoUrl: "",
|
|||
|
|
videoUrl1: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4",
|
|||
|
|
videoWidth: "",
|
|||
|
|
videoHeight: "",
|
|||
|
|
videoOffset: "",
|
|||
|
|
object_fit: 'contain', //视频样式默认包含🌟
|
|||
|
|
windowWidth: '',
|
|||
|
|
deviceId: "",
|
|||
|
|
shwovideo: false,
|
|||
|
|
flag: true,
|
|||
|
|
SocketTask: "",
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.deviceId = option.device
|
|||
|
|
this.videoUrl = option.url
|
|||
|
|
this.subNvue = uni.getSubNVueById('subNvueIos'); //获取
|
|||
|
|
let datas = {
|
|||
|
|
username: option.user,
|
|||
|
|
device: 'lihai_lot_walnutpi_dev_' + option.device,
|
|||
|
|
scene: 'app',
|
|||
|
|
}
|
|||
|
|
this.openScoket(datas)
|
|||
|
|
let platform = uni.getSystemInfoSync()
|
|||
|
|
this.videoHeight = platform.windowHeight
|
|||
|
|
this.videoWidth = platform.windowWidth
|
|||
|
|
this.videoOffset = platform.screenHeight - platform.windowHeight + platform.statusBarHeight
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
openScoket(datas) {
|
|||
|
|
let that = this
|
|||
|
|
this.SocketTask = uni.connectSocket({
|
|||
|
|
url: 'wss://iot.lihaink.cn/test',
|
|||
|
|
complete: () => {
|
|||
|
|
console.log(that.socket, "socketTASK")
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.SocketTask.onOpen(function(res) {
|
|||
|
|
that.SocketTask.send({
|
|||
|
|
data: JSON.stringify(datas)
|
|||
|
|
});
|
|||
|
|
that.SocketTask.onMessage(function(res) {
|
|||
|
|
console.log(res, "收到消息")
|
|||
|
|
if (JSON.parse(res.data).code == 200) {
|
|||
|
|
that.shwovideo = true
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.SocketTask.onError(function(res) {
|
|||
|
|
console.log('WebSocket连接打开失败，请检查！');
|
|||
|
|
});
|
|||
|
|
this.SocketTask.onClose(function(res) {
|
|||
|
|
console.log('WebSocket 已关闭！');
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
playVedio() {
|
|||
|
|
this.subNvue.hide()
|
|||
|
|
this.flag = false
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
fullscreenchange(e) {
|
|||
|
|
if (!e.detail.fullScreen) { // 退出全屏，锁定竖屏
|
|||
|
|
plus.screen.lockOrientation('portrait-primary');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
,
|
|||
|
|
onUnload() {
|
|||
|
|
this.SocketTask.close();
|
|||
|
|
this.SocketTask = null
|
|||
|
|
console.log(this.socket, 'sosddsdsd')
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.video {
|
|||
|
|
// transform: rotate(90deg);
|
|||
|
|
// position: absolute;
|
|||
|
|
// width: 770;
|
|||
|
|
// height: 414;
|
|||
|
|
// top: 174px;
|
|||
|
|
// left: -174px;
|
|||
|
|
// transform: translate(-50%, -50%);
|
|||
|
|
}
|
|||
|
|
</style>
|