ghjg-digital-twin/src/components/UeVideo.vue

<template>
  <div ref="video" id="player">
    <i id="overlayButton" style="display: none;" ></i>
    <i id="qualityStatus" style="display: none;"></i>
    <div id="stats" style="display: none;" ></div>
  </div>
</template>

<script>
import {onMounted, ref} from 'vue'
import { initLoad, addResponseEventListener } from '../webRtcVideo.js'
import bus from '@/utils/bus'

export default {
  name: 'UeVideo',

  setup(props,  context) {

    let video = ref(null)
    let videoInstance = ref(null)

    onMounted(()=>{

      // console.log('video.value', video.value);

      videoInstance = initLoad({
        context,
        autoConnection: true,
        showPlayOverlay: false,
        // serverUrl: 'http://10.1.161.67:8080/',
        // serverUrl: 'http://172.16.58.196:8080/',
        // serverUrl: 'http://172.16.58.198:8080/',
        // serverUrl: 'http://172.16.58.195:8080/',
        serverUrl: 'http://127.0.0.1:8080/',
        qualityControl: true,
        inputOptions: {
          controlScheme: 1, // 鼠标：0是锁定，1是滑过
          suppressBrowserKeys: false,
        }
      })

      // videoInstance = load()

      //添加UE的消息监听
      addResponseEventListener('play-video', async (data) => {
        console.log('接收信息-->',data)
        let dataObj
        try {
          dataObj = JSON.parse(data)
        } catch(e) {
          console.log(e)
        }
        if(dataObj) {
          switch(dataObj.action) {
            case 'boat_guiji':
              bus.emit('ueRec_boatGuiji',dataObj.data)
              break
            case 'close_Unit_Vido':
              bus.emit('ueRec_closeUnitVideo',dataObj.data)
              break
            case 'pujiang_init':
              bus.emit('ueRec_pujiangInit',dataObj.data)
              break
            case 'boat_fock_clear':
              bus.emit('ueRec_boatFockClear',dataObj.data)
              break
            case 'query_water_finish':
              bus.emit('ueRec_QueryWaterFinish')
              break
            case 'water_finish':
              bus.emit('ueRec_WaterFinish')
              break
            case 'boat_click':
              bus.emit('ueRec_BoatClick',dataObj.data)
              break
            case 'boat_notfound':
              bus.emit('ueRec_BoatNotFound',dataObj.data)
              break
            case 'init_shujun':
              bus.emit('ueRec_InitShujun',dataObj.data)
              break
            case 'click_shujun':
              bus.emit('ueRec_ClickShujun',dataObj.data)
              break
            case 'run_shujun':
              bus.emit('ueRec_RunShujun',dataObj.data)
              break
            case 'back_shujun':
              bus.emit('ueRec_BackShujun',dataObj.data)
              break
            case 'history_run':
              bus.emit('ueRec_HistoryRun',dataObj.data)
              break
            case 'fly_Action':
              bus.emit('fly_Action',dataObj.data)
              break
          }

        } else {
          
        }

      })

    })

    return  {
      video,
      //向UE发送一个字符串.打印在游戏屏幕上
    }
  }
}
</script>

<style lang="scss" scoped>
#player {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background-color: #041637;

  .inter-btn {
    margin-top: 15vh;
  }

}
</style>