control/src/pages/room/index.vue

<template>
  <div class="room">
    <topBar class="room-bar">
      <template
        v-for="(item, index) in menuList"
        :key="index"
      >
        <component
          :is="item.component"
          :value="item.value"
          @callBack="item.callBack"
        />
      </template>
    </topBar>
    <video
      ref="remoteVideo"
      autoplay
      playsinline
    />
    <div class="room-gauge">
      <Gauge
        :value="gauge.speed"
        :gears="gauge.num % 2 ? '倒档' : '前进'"
      />
    </div>
  </div>
</template>

<script setup lang='ts'>
import {
  ref, onMounted, inject, watch,
  onUnmounted,
  shallowRef,
  defineAsyncComponent
} from 'vue'
import WebRtcService from '@/services/webrtc.service'
import topBar from '@/components/topBar.vue'
import Gauge from './component/gauge.vue'
import useStore from '@/store/index'

const RTC = new WebRtcService()
const store = useStore()
const mqtt = inject('MQTT') as Any
const remoteVideo = ref(null as unknown as HTMLVideoElement)
const gauge = ref({ speed: 0, num: 0 })
const menuList = shallowRef([
  { name: '信号', value: 0, component: defineAsyncComponent(() => import('./component/signal.vue')) },
  { name: '电量', value: 0, component: defineAsyncComponent(() => import('./component/battery.vue')) },
  { name: '方向盘', vlaue: 0, component: defineAsyncComponent(() => import('./component/steering.vue')) },
  {
    name: '静音',
    component: defineAsyncComponent(() => import('./component/audio.vue')),
    callBack: (mute: boolean) => RTC.muteRemoteAudio(mute)
  },
  {
    name: '录音',
    component: defineAsyncComponent(() => import('./component/mic.vue')),
    callBack: (blob: Blob) => {
      console.log('发送对讲', blob)
    }
  },
  { name: '网速', vlaue: 0, component: defineAsyncComponent(() => import('./component/stats.vue')) }
])

watch(() => store.mqtt_message, async (value: { type: string, data?: RTCSessionDescriptionInit }) => {
  const { type, data } = value
  // 接收远程offer
  if (type === 'offer') {
    await RTC.Peer?.setRemoteDescription(data!)
    const answerd = await RTC.Peer?.createAnswer()
    await RTC.Peer?.setLocalDescription(answerd)
  }
  // 发送本地answer
  if (type === 'answer') mqtt.send(value)
  // 控制数据
  if (type === 'control') {
    menuList.value[2].vlaue = data ? 1 : 0
    const obj = {
      type: 'control',
      data: {
        steering: 0, // 方向 -1-1
        throttle: 0, // 油门 0-1
        brake: 0, // 刹车 0-1
        clutch: 0, // 离合 0-1
        leftPaddle: false, // 左拨挡
        rightPaddle: false, // 右拨挡
        buttonR3: false, // R3
        buttonL3: false, // L3
        enterKey: false, // 回车键
        ...data
      }
    }
    if (obj.data.leftPaddle) gauge.value.num--
    if (obj.data.rightPaddle) gauge.value.num++
    if (store.rtcConnected) mqtt.send(obj)
  }
  // 网络状态
  if (type === 'WebRtcStats') menuList.value[5].vlaue = data.bitrate || 0
})

onMounted(() => RTC.initRTC(remoteVideo.value))
onUnmounted(() => RTC.distory())
</script>
<style lang="scss" scoped>
.room {
  width: 100%;
  height: 100%;
  position: relative;

  video {
    width: 100%;
    height: 100%;
    background: black;
    object-fit: fill;
    font-size: 0;
    z-index: 1;
  }
}
</style>