wx-starlock/pages/p2p/p2pPlayer.vue

<template>
  <view>
    <iot-p2p-player-with-mjpg
      id="playerRef"
      :deviceInfo="deviceInfo"
      :xp2pInfo="xp2pInfo"
      :rotate="90"
      :muted="isMute"
      streamQuality="high"
      :minCache="0.2"
      :maxCache="0.8"
      :fill="true"
      orientation="horizontal"
      @statechange="handleStateChange"
    >
    </iot-p2p-player-with-mjpg>
    <iot-p2p-voice
      id="voiceComponent"
      :deviceInfo="deviceInfo"
      :xp2pInfo="xp2pInfo"
      voiceType="Pusher"
    >
    </iot-p2p-voice>

    <view
      class="fixed bottom-[calc(32rpx+env(safe-area-inset-bottom))] bg-[rgba(0,0,0,0.3)] rounded-xl p-4 shadow-lg mx-4 w-622"
    >
      <view class="flex items-center justify-around mx-10">
        <image
          @click="isMute = !isMute"
          :src="
            isMute
              ? 'https://oss-lock.xhjcn.ltd/mp/icon_mute.png'
              : 'https://oss-lock.xhjcn.ltd/mp/icon_not_mute.png'
          "
          class="w-48 h-48 p-2"
        ></image>
        <image
          @click="handleScreenshot"
          src="https://oss-lock.xhjcn.ltd/mp/icon_screenshot.png"
          class="w-48 h-48 p-2"
        ></image>
      </view>
      <view class="flex items-center justify-around text-white mt-2">
        <view class="flex flex-col items-center" @longpress="startVoice" @touchend="stopVoice">
          <view class="bg-white w-80 h-80 rounded-full flex items-center justify-center">
            <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"
            ></image>
          </view>
          <view class="mt-2">长按说话</view>
        </view>
        <view class="flex flex-col items-center" @click="handleHangUp">
          <view class="bg-[#eb292b] w-80 h-80 rounded-full flex items-center justify-center">
            <image src="https://oss-lock.xhjcn.ltd/mp/icon_hang_up.png" class="w-60 h-60"></image>
          </view>
          <view class="mt-2">挂断</view>
        </view>
        <view class="flex flex-col items-center" @click="handleLock">
          <view class="bg-[#63b8af] w-80 h-80 rounded-full flex items-center justify-center">
            <image
              src="https://oss-lock.xhjcn.ltd/mp/icon_lock_white.png"
              class="w-60 h-60"
            ></image>
          </view>
          <view class="mt-2">开锁</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { getXp2pManager } from './xp2pManager'
  import { useBluetoothStore } from '@/stores/bluetooth'
  import { useBasicStore } from '@/stores/basic'
  import { onMounted, ref } from 'vue'
  import { onUnload } from '@dcloudio/uni-app'
  import { getP2pInfo } from '@/api/p2p'

  const $bluetooth = useBluetoothStore()
  const $basic = useBasicStore()

  let xp2pManager = null

  const deviceInfo = ref()
  const xp2pInfo = ref()

  const isVoice = ref(false)

  const isMute = ref(false)

  onMounted(async () => {
    if (!xp2pManager) {
      xp2pManager = getXp2pManager()
    }

    const { code, data, message } = await getP2pInfo({
      lockId: $bluetooth.currentLockInfo.lockId
    })

    if (code === 0) {
      deviceInfo.value = {
        deviceId: `${data.productId}/${data.deviceId}`,
        productId: data.productId,
        deviceName: data.deviceName
      }
      xp2pInfo.value = data.xp2pInfo
      await xp2pManager.startP2PService({
        deviceInfo: deviceInfo.value,
        xp2pInfo: xp2pInfo.value,
        caller: 1
      })
    } else {
      $basic.backAndToast(message)
    }
  })

  onUnload(() => {
    const page = getCurrentPages().pop()
    const player = page.selectComponent('#playerRef')
    if (player.stopAll) {
      player.stopAll()
    }
  })

  const handleScreenshot = () => {
    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'
          })
        }
      })
    })
  }

  const handleHangUp = () => {
    const page = getCurrentPages().pop()
    const player = page.selectComponent('#playerRef')
    if (player.stopAll) {
      player.stopAll()
    }
    uni.navigateBack()
  }

  const handleLock = () => {
    console.log('handleLock')
  }

  const startVoice = () => {
    uni.vibrateLong()
    isVoice.value = true
    const page = getCurrentPages().pop()
    const voice = page.selectComponent('#voiceComponent')
    voice.startVoice()
  }

  const stopVoice = () => {
    isVoice.value = false
    const page = getCurrentPages().pop()
    const voice = page.selectComponent('#voiceComponent')
    voice.stopVoice()
  }

  const handleStateChange = state => {
    console.log(11111111, state)
  }
</script>

<style lang="scss" scoped>
  :deep(.mjpg-player--iot-player) {
    height: 100vh !important;
  }
</style>