
<template>
  <div ref="video" id="player"></div>
  <home></home>
  <!-- <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div> -->
</template>

<script>
import { onMounted, ref } from "vue";
import {
  initLoad
} from "../webrtcVideo.js";
import { ElButton, ElInput } from "element-plus";
import Home from './home.vue'
export default {
  components: { ElButton, ElInput, Home },
  setup(props, context) {
    let video = ref(null);
    let videoInstance = ref(null);

    onMounted(() => {
      console.log("video.value", video.value);

      videoInstance = initLoad({
        context,
        serverUrl: "http://127.0.0.1:80",
        autoConnection: false,
        showPlayOverlay: true,
        qualityControl: true,
        inputOptions: {
          controlScheme: 1, // 鼠标：0是锁定，1是滑过
          suppressBrowserKeys: false,
        },
      });

    });
    // function handleResponseFunction(data) {
    //   console.log("从UE返回过来的值", data)
    // }
    function toUE() {
      // 向UE发送消息
      // callUIInteraction("open");
      // 同时接收从UE返回过来的值
      // debugger
      // addResponseEventListener("open", handleResponseFunction)
    }

    return {
      video,
      toUE
    };
  },
};
</script>
<style scoped>
#player {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
</style>