<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,callUIInteraction,addResponseEventListener } from '../webRtcVideo.js'

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,
        // serverUrl: 'http://10.1.161.67:8080/',
        serverUrl: 'http://172.16.58.195:8080/',
        autoConnection: false,
        showPlayOverlay: true,
        qualityControl: true,
        inputOptions: {
          controlScheme: 1, // 鼠标：0是锁定，1是滑过
          suppressBrowserKeys: false,
        }
      })

      // videoInstance = load()

      //添加UE的消息监听
      addResponseEventListener('play-video', async (data) => {
          alert("test");
      })

    })

    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>
