528 lines
14 KiB
Vue
528 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<view>
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<iot-p2p-player-with-mjpg
|
||
v-if="deviceInfo"
|
||
id="playerRef"
|
||
:deviceInfo="deviceInfo"
|
||
:xp2pInfo="xp2pInfo"
|
||
:rotate="90"
|
||
:muted="isMute"
|
||
mode="RTC"
|
||
:acceptPlayerEvents="true"
|
||
soundMode="speaker"
|
||
sceneType="live"
|
||
:streamQuality="range[index].value"
|
||
:minCache="0.2"
|
||
:maxCache="0.8"
|
||
:fill="true"
|
||
orientation="horizontal"
|
||
@playsuccess="handlePlaySuccess"
|
||
>
|
||
</iot-p2p-player-with-mjpg>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifdef APP-PLUS -->
|
||
<video
|
||
autoplay
|
||
id="playerRef"
|
||
v-if="url"
|
||
:muted="isMute"
|
||
:src="urlPrefix"
|
||
object-fit="cover"
|
||
class="w-[100vw] h-[100vh]"
|
||
:is-live="true"
|
||
:play-strategy="2"
|
||
:controls="false"
|
||
:show-progress="false"
|
||
:show-fullscreen-btn="false"
|
||
:show-play-btn="false"
|
||
:enable-progress-gesture="false"
|
||
:vslide-gesture="true"
|
||
/>
|
||
<!-- #endif -->
|
||
</view>
|
||
<image
|
||
v-if="!isVideoLoaded"
|
||
src="https://oss-lock.xhjcn.ltd/mp/background_monitor.png"
|
||
class="w-full h-full absolute top-0 left-0"
|
||
></image>
|
||
|
||
<cover-view
|
||
v-if="(isApp || buttonInfo) && isVideoLoaded"
|
||
:style="{
|
||
top: isApp ? '60px' : buttonInfo.bottom + 15 + 'px'
|
||
}"
|
||
class="bg-[rgba(0,0,0,0.35)] rounded-full px-4 py-1.5 fixed right-32"
|
||
>
|
||
<cover-view class="text-white text-xs" @click="showQualitySelector">
|
||
{{ range[index].name }}
|
||
</cover-view>
|
||
</cover-view>
|
||
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<iot-p2p-voice
|
||
v-if="deviceInfo"
|
||
id="voiceComponent"
|
||
:deviceInfo="deviceInfo"
|
||
:xp2pInfo="xp2pInfo"
|
||
voiceType="Pusher"
|
||
>
|
||
</iot-p2p-voice>
|
||
<!-- #endif -->
|
||
|
||
<cover-view
|
||
v-if="isVideoLoaded"
|
||
class="fixed bottom-[calc(32rpx+env(safe-area-inset-bottom))] bg-[rgba(0,0,0,0.3)] rounded-xl p-4 shadow-lg left-1/2 -translate-x-1/2 w-622"
|
||
>
|
||
<cover-view class="flex items-center justify-around mx-15">
|
||
<cover-view class="relative">
|
||
<cover-image
|
||
v-show="isMute"
|
||
src="https://oss-lock.xhjcn.ltd/mp/icon_mute.png"
|
||
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
||
></cover-image>
|
||
<cover-image
|
||
v-show="!isMute"
|
||
src="https://oss-lock.xhjcn.ltd/mp/icon_not_mute.png"
|
||
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
||
></cover-image>
|
||
<cover-view
|
||
@click="toggleMute"
|
||
class="absolute top-0 left-0 w-full h-full size-48 p-2"
|
||
></cover-view>
|
||
</cover-view>
|
||
<cover-view class="relative">
|
||
<cover-image
|
||
src="https://oss-lock.xhjcn.ltd/mp/icon_screenshot.png"
|
||
:class="isApp ? 'size-48' : 'size-48 p-2'"
|
||
></cover-image>
|
||
<cover-view
|
||
@click="handleScreenshot"
|
||
class="absolute top-0 left-0 w-full h-full"
|
||
></cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
<cover-view class="flex items-center justify-between text-white mt-2 px-10">
|
||
<cover-view class="flex flex-col items-center">
|
||
<cover-view
|
||
class="bg-white w-80 h-80 rounded-full flex items-center justify-center relative"
|
||
>
|
||
<cover-image
|
||
:src="
|
||
isVoice
|
||
? 'https://oss-lock.xhjcn.ltd/mp/icon_microphone.png'
|
||
: 'https://oss-lock.xhjcn.ltd/mp/icon_no_microphone.png'
|
||
"
|
||
class="w-55 h-55"
|
||
></cover-image>
|
||
<cover-view
|
||
@click="toggleVoice"
|
||
class="absolute top-0 left-0 w-full h-full"
|
||
></cover-view>
|
||
</cover-view>
|
||
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">{{
|
||
isVoice ? '点击停止' : '点击说话'
|
||
}}</cover-view>
|
||
</cover-view>
|
||
<cover-view class="flex flex-col items-center">
|
||
<cover-view
|
||
class="bg-[#eb292b] w-80 h-80 rounded-full flex items-center justify-center relative"
|
||
>
|
||
<cover-image
|
||
src="https://oss-lock.xhjcn.ltd/mp/icon_hang_up.png"
|
||
class="w-60 h-60"
|
||
></cover-image>
|
||
<cover-view
|
||
@click="handleHangUp"
|
||
class="absolute top-0 left-0 w-full h-full"
|
||
></cover-view>
|
||
</cover-view>
|
||
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">挂断</cover-view>
|
||
</cover-view>
|
||
<cover-view class="flex flex-col items-center">
|
||
<cover-view
|
||
class="bg-[#63b8af] w-80 h-80 rounded-full flex items-center justify-center relative"
|
||
>
|
||
<cover-image
|
||
src="https://oss-lock.xhjcn.ltd/mp/icon_lock_white.png"
|
||
class="w-60 h-60"
|
||
></cover-image>
|
||
<cover-view
|
||
@click="handleLock"
|
||
class="absolute top-0 left-0 w-full h-full"
|
||
></cover-view>
|
||
</cover-view>
|
||
<cover-view class="mt-2 text-center whitespace-nowrap text-xs">开锁</cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
</cover-view>
|
||
<view
|
||
v-if="!isVideoLoaded"
|
||
class="fixed bottom-[calc(48rpx+env(safe-area-inset-bottom))] w-full flex justify-center"
|
||
>
|
||
<up-loading-icon
|
||
size="70rpx"
|
||
:vertical="true"
|
||
textSize="28rpx"
|
||
text="连接中"
|
||
mode="circle"
|
||
></up-loading-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref, computed } from 'vue'
|
||
import { onUnload } from '@dcloudio/uni-app'
|
||
import { useBluetoothStore } from '@/stores/bluetooth'
|
||
import { useBasicStore } from '@/stores/basic'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { passthrough } from '@/api/sdk'
|
||
import { getLockNetTokenRequest } from '@/api/lock'
|
||
// #ifdef MP-WEIXIN
|
||
import * as A from './exportForXp2pPlugin'
|
||
import * as B from './exportForPlayerPlugin'
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
import {
|
||
startServiceFunction,
|
||
stopServiceFunction,
|
||
runSendServiceFunction,
|
||
stopSendServiceFunction,
|
||
dataSend
|
||
} from '@/uni_modules/xhj-tencent-xp2p'
|
||
import { initAudio, onStartRecord, stopRecord, releaseRecord } from '@/uni_modules/xhj-record'
|
||
// #endif
|
||
|
||
const $bluetooth = useBluetoothStore()
|
||
const $basic = useBasicStore()
|
||
const $user = useUserStore()
|
||
const buttonInfo = ref(null)
|
||
|
||
const isApp = ref(false)
|
||
|
||
const onlineToken = ref('0')
|
||
const lockId = ref()
|
||
const time = ref(0)
|
||
const pending = ref(false)
|
||
|
||
const index = ref(1)
|
||
const range = ref([
|
||
{ name: '标清', value: 'standard' },
|
||
{ name: '高清', value: 'high' },
|
||
{ name: '超清', value: 'super' }
|
||
])
|
||
|
||
const deviceInfo = ref()
|
||
const xp2pInfo = ref()
|
||
const url = ref()
|
||
const isVoice = ref(false)
|
||
const isMute = ref(false)
|
||
const isVideoLoaded = ref(false)
|
||
|
||
const urlPrefix = computed(() => {
|
||
const data =
|
||
url.value + `ipc.flv?action=live&channel=0&quality=${range.value[index.value].value}`
|
||
return data
|
||
})
|
||
|
||
onMounted(async () => {
|
||
// #ifdef APP-PLUS
|
||
initAudio()
|
||
isApp.value = true
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
console.log(A, B)
|
||
// #endif
|
||
buttonInfo.value = await $basic.getButtonInfo()
|
||
|
||
const { code, data, message } = await passthrough({
|
||
request_method: 'GET',
|
||
request_uri: '/api/v1/tencentYun/getDeviceDetailData',
|
||
post_args: {
|
||
lockId: $bluetooth.currentLockInfo.lockId
|
||
}
|
||
})
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (code === 0) {
|
||
deviceInfo.value = {
|
||
deviceId: `${data.productId}/${data.deviceName}`,
|
||
productId: data.productId,
|
||
deviceName: data.deviceName
|
||
}
|
||
xp2pInfo.value = data.xp2pInfo
|
||
} else {
|
||
$basic.backAndToast(message)
|
||
}
|
||
await getServeTime()
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
if (code === 0) {
|
||
deviceInfo.value = data
|
||
const params = {
|
||
appKey: 'aanuJXFtISXFYVVsd',
|
||
appSecret: 'SsnOMHJUcazCvpULSVWY',
|
||
productId: deviceInfo.value.productId,
|
||
deviceName: deviceInfo.value.deviceName,
|
||
xp2pInfo: deviceInfo.value.xp2pInfo
|
||
}
|
||
|
||
const result = await startServiceFunction(
|
||
params.appKey,
|
||
params.appSecret,
|
||
params.productId,
|
||
params.deviceName,
|
||
params.xp2pInfo
|
||
)
|
||
console.log('初始化SDK结果：', result)
|
||
if (result?.code === 0) {
|
||
url.value = result.data.url
|
||
runSendServiceFunction(
|
||
`${deviceInfo.value.productId}/${deviceInfo.value.deviceName}`,
|
||
'channel=0',
|
||
true
|
||
)
|
||
handlePlaySuccess()
|
||
} else {
|
||
$basic.backAndToast(message)
|
||
}
|
||
} else {
|
||
$basic.backAndToast(message)
|
||
}
|
||
// #endif
|
||
})
|
||
|
||
onUnload(() => {
|
||
// #ifdef APP-PLUS
|
||
// 停止录音
|
||
releaseRecord()
|
||
stopSendServiceFunction(`${deviceInfo.value.productId}/${deviceInfo.value.deviceName}`)
|
||
stopServiceFunction(`${deviceInfo.value.productId}/${deviceInfo.value.deviceName}`)
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
const page = getCurrentPages().pop()
|
||
const player = page.selectComponent('#playerRef')
|
||
if (player.stopAll) {
|
||
player.stopAll()
|
||
}
|
||
// #endif
|
||
})
|
||
|
||
const showQualitySelector = () => {
|
||
uni.showActionSheet({
|
||
itemList: range.value.map(item => item.name),
|
||
success: res => {
|
||
index.value = res.tapIndex
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleScreenshot = () => {
|
||
// #ifdef MP-WEIXIN
|
||
const page = getCurrentPages().pop()
|
||
const player = page.selectComponent('#playerRef')
|
||
|
||
player.snapshot().then(res => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.tempImagePath,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '截图已保存到相册',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '保存失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
})
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
uni.showModal({
|
||
title: '提示',
|
||
content:
|
||
'由于技术限制，APP端无法直接截取视频画面。请使用手机系统截图功能：\n\niOS：同时按下电源键+音量上键\nAndroid：同时按下电源键+音量下键',
|
||
confirmText: '我知道了',
|
||
showCancel: false
|
||
})
|
||
// #endif
|
||
}
|
||
|
||
const handleHangUp = () => {
|
||
// #ifdef MP-WEIXIN
|
||
const page = getCurrentPages().pop()
|
||
const player = page.selectComponent('#playerRef')
|
||
if (player.stopAll) {
|
||
player.stopAll()
|
||
}
|
||
// #endif
|
||
uni.navigateBack()
|
||
}
|
||
|
||
const handleLock = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否确认开锁？',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
openDoorOperate()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const getServeTime = async () => {
|
||
const { code, data } = await $bluetooth.updateServerTimestamp()
|
||
if (code === 0) {
|
||
time.value = parseInt((data.date - new Date().getTime()) / 1000, 10)
|
||
}
|
||
}
|
||
|
||
const openDoorOperate = async () => {
|
||
const timestamp = new Date().getTime()
|
||
if (pending.value) {
|
||
return
|
||
}
|
||
|
||
const netWork = await $basic.getNetworkType()
|
||
if (!netWork) {
|
||
return
|
||
}
|
||
|
||
if ($bluetooth.currentLockInfo.appUnlockOnline) {
|
||
const result = await getNetToken()
|
||
if (!result) {
|
||
pending.value = false
|
||
return
|
||
}
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '开锁中'
|
||
})
|
||
uni.vibrateLong()
|
||
pending.value = true
|
||
const openMode = $bluetooth.currentLockInfo.appUnlockOnline ? 1 : 0
|
||
|
||
const { code } = await $bluetooth.openDoor({
|
||
name: $bluetooth.currentLockInfo.lockName,
|
||
uid: $user.userInfo.uid.toString(),
|
||
openMode,
|
||
openTime: parseInt(new Date().getTime() / 1000, 10) + time.value,
|
||
onlineToken: onlineToken.value
|
||
})
|
||
|
||
$bluetooth
|
||
.syncRecord({
|
||
keyId: $bluetooth.keyId.toString(),
|
||
uid: $user.userInfo.uid.toString()
|
||
})
|
||
.then(() => {
|
||
$bluetooth.closeBluetoothConnection()
|
||
})
|
||
|
||
// #ifdef MP-WEIXIN
|
||
uni.reportEvent('open_door', {
|
||
result: code,
|
||
duration: new Date().getTime() - timestamp
|
||
})
|
||
// #endif
|
||
|
||
if (code === 0) {
|
||
uni.showToast({
|
||
title: `开门成功`,
|
||
icon: 'none'
|
||
})
|
||
} else if (code === 7) {
|
||
uni.showToast({
|
||
title: `钥匙过期`,
|
||
icon: 'none'
|
||
})
|
||
} else if (code === 13) {
|
||
uni.showToast({
|
||
title: `钥匙当前不可用`,
|
||
icon: 'none'
|
||
})
|
||
} else if (code === -1) {
|
||
uni.showToast({
|
||
title: `开锁失败`,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
uni.hideLoading()
|
||
pending.value = false
|
||
}
|
||
|
||
const getNetToken = async () => {
|
||
const { code, data, message } = await getLockNetTokenRequest({
|
||
lockId: lockId.value
|
||
})
|
||
if (code === 0) {
|
||
onlineToken.value = data.token
|
||
return true
|
||
}
|
||
uni.showToast({
|
||
title: message,
|
||
icon: 'none'
|
||
})
|
||
return false
|
||
}
|
||
|
||
const toggleVoice = () => {
|
||
// #ifdef MP-WEIXIN
|
||
if (isVoice.value) {
|
||
isVoice.value = false
|
||
const page = getCurrentPages().pop()
|
||
const voice = page.selectComponent('#voiceComponent')
|
||
if (voice) {
|
||
voice.stopVoice()
|
||
}
|
||
} else {
|
||
uni.vibrateLong()
|
||
isVoice.value = true
|
||
const page = getCurrentPages().pop()
|
||
const voice = page.selectComponent('#voiceComponent')
|
||
if (voice) {
|
||
voice.startVoice()
|
||
}
|
||
}
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
if (isVoice.value) {
|
||
isVoice.value = false
|
||
stopRecord()
|
||
} else {
|
||
uni.vibrateLong()
|
||
isVoice.value = true
|
||
onStartRecord(callback)
|
||
}
|
||
// #endif
|
||
}
|
||
|
||
const callback = audioData => {
|
||
dataSend(`${deviceInfo.value.productId}/${deviceInfo.value.deviceName}`, audioData)
|
||
}
|
||
|
||
const handlePlaySuccess = () => {
|
||
isVideoLoaded.value = true
|
||
}
|
||
|
||
const toggleMute = () => {
|
||
isMute.value = !isMute.value
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.mjpg-player--iot-player) {
|
||
height: 100vh !important;
|
||
}
|
||
</style>
|