日常开发

src/views/game/components/humanBody.vue

@@ -1,165 +1,44 @@
 <template>
-  <div>
+  <div class="game-container">
     <canvas ref="canvasRef" :width="clientObj.width" :height="clientObj.height"></canvas>
   </div>
 </template>
 
 <script setup name="HumanBody" lang="ts">
 import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech';
-import { useWebSocket } from '@/utils/bodyposeWs';
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
-const { bodyposeWs, startDevice, checkBodypose, openBodypose, terminateBodypose, suspendBodypose, resumeBodypose, getBodyposeState, closeWS } = useWebSocket();
 const canvasRef = ref(null);
 
 const data = reactive<any>({
   bodyposeData: {},//姿态信息
-  bodyposeState: false,//姿态识别窗口状态
-  parameter: {},//参数
-  deviceInfo: {},//设备信息
-  againNum: 0,//再次启动次数
-  againTimer: null,//定时状态
-  wsState: false,//WS状态
   clientObj: {},//浏览器对象
   boxes: [],//四个点坐标
   proportion: null,//人框和屏幕比例
 });
 
-const { bodyposeData, bodyposeState, parameter, deviceInfo, againNum, againTimer, wsState, clientObj, boxes, proportion } = toRefs(data);
+const { bodyposeData, clientObj, boxes, proportion } = toRefs(data);
 
 /**
  * 初始化
  */
-const getInit = async () => {
-  console.log("触发姿态识别")
-  let deviceid = localStorage.getItem('deviceid') || '';
-  if (!deviceid) {
-    proxy?.$modal.msgError(`请重新登录绑定设备号后使用`);
-    return false;
+const getInit = (e: any) => {
+  let arr = e.data.result.keypoints;
+  let result = [];
+  for (let i = 0; i < arr.length; i += 3) {
+    result.push(arr.slice(i, i + 2));
   }
-  bodyposeState.value = true;
-  if (wsState.value) {
-    proxy?.$modal.msgWarning(`操作过快，请稍后重试`);
-    setTimeout(() => {
-      bodyposeState.value = false;
-    }, 1000)
-    return false;
+  console.log("result", result)
+  bodyposeData.value = result;
+  if (boxes.value.length == 0) {
+    speckText("识别成功");
+    proxy?.$modal.msgWarning(`识别成功`);
+    let arr = e.data.result.boxes;
+    boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
+    proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
   }
-  speckText("正在姿态识别");
-  proxy?.$modal.msgWarning(`正在姿态识别`);
-  bodyposeWs((e: any) => {
-    console.log("bodyposeWS", e)
-    if (e?.wksid) {
-      wsState.value = true;
-      //获取设备信息
-      startDevice({ deviceid: deviceid });
-      console.log("获取设备信息")
-    }
-    if (e?.type == 'fe_device_init_result') {
-      //接收设备信息并发送请求
-      if (e?.device_info) {
-        deviceInfo.value = e.device_info;
-        getCheckBodypose();
-        console.log("返回设备信息，检查是否支持姿态识别")
-      } else {
-        proxy?.$modal.msgError(`设备信息缺失，请重新登录绑定设备号后使用`);
-      }
-    }
-    if (e?.cmd == 'check_bodyposecontroller_available') {
-      let handcontroller_id = deviceInfo.value.handcontroller_id;
-      if (e?.code == 0) {
-        //查看姿态识别状态，如果不处于关闭就先关闭再重新启动（可能会APP退出然后工作站还在运行的可能性）
-        getBodyposeState(handcontroller_id);
-        againNum.value = 0;
-        againTimer.value = null;
-        clearTimeout(againTimer.value);
-        console.log("查看姿态识别状态")
-      } else {
-        //尝试多次查询姿态识别状态
-        if (againNum.value <= 2) {
-          againTimer.value = setTimeout(() => {
-            getCheckBodypose();
-          }, 500)
-          againNum.value++;
-        } else {
-          let msg = "";
-          if (e.code == 102402) {
-            msg = `多次连接失败请重试，姿态识别模块被占用`;
-          } else {
-            msg = `多次连接失败请重试，姿态识别模块不可用，code：${e.code}`;
-          }
-          proxy?.$modal.msgWarning(msg);
-          againNum.value = 0;
-          againTimer.value = null;
-          clearTimeout(againTimer.value);
-          getCloseBodypose();//直接关闭 
-        }
-
-      }
-    }
-    if (e?.cmd == 'get_bodyposecontroller_state') {
-      let handcontroller_id = deviceInfo.value.handcontroller_id;
-      //state说明: 0：关闭，3：空闲，36：工作中
-      if ([3, 36].includes(e.state)) {
-        getCloseBodypose();
-        proxy?.$modal.msgWarning(`请重新姿态识别`);
-      } else {
-        openBodypose(handcontroller_id);
-      }
-    }
-    if (e?.type == 'bodyposecontroller_result') {
-      let arr = e.data.result.keypoints;
-      let result = [];
-      for (let i = 0; i < arr.length; i += 3) {
-        result.push(arr.slice(i, i + 2));
-      }
-      console.log("result", result)
-      bodyposeData.value = result;
-      if (boxes.value.length == 0) {
-        speckText("识别成功");
-        proxy?.$modal.msgWarning(`识别成功`);
-        let arr = e.data.result.boxes;
-        boxes.value = [{ x: arr[0], y: arr[3] }, { x: arr[0], y: arr[1] }, { x: arr[2], y: arr[1] }, { x: arr[2], y: arr[3] }]
-        proportion.value = (clientObj.value.height / (arr[3] - arr[1])).toFixed(2);
-      }
-      //绘制图案
-      getCanvas();
-    }
-    if (e?.cmd == 'terminate_bodyposecontroller') {
-      if (e?.code == 0) {
-        closeWS();
-        bodyposeState.value = false;
-      }
-    }
-    if (e?.type == 'disconnect') {
-      wsState.value = false;
-    }
-  });
-};
-
-
-/**
- * 查询姿态识别状态
-*/
-const getCheckBodypose = () => {
-  let handcontroller_id = deviceInfo.value.handcontroller_id;
-  //检查是否支持姿态识别
-  checkBodypose(handcontroller_id);
-};
-
-/**
- * 关闭姿态识别
-*/
-const getCloseBodypose = () => {
-  let handcontroller_id = deviceInfo.value.handcontroller_id;
-  terminateBodypose(handcontroller_id);
-  bodyposeState.value = false;
-  speckCancel(); //停止播报
-  setTimeout(() => {
-    if (wsState.value) {
-      closeWS();
-    }
-  }, 3000)
+  //绘制图案
+  getCanvas();
 };
 
 /**
@@ -252,19 +131,31 @@ const getCanvas = () => {
 };
 
 onBeforeMount(() => {
-  clientObj.value = {
-    width: document.documentElement.clientWidth,
-    height: document.documentElement.clientHeight,
-  }
-  getInit();
 });
 
 onMounted(() => {
+  clientObj.value = {
+    width: document.querySelector('.game-container').offsetWidth,
+    height: document.querySelector('.game-container').offsetHeight,
+  }
 })
 
 onBeforeUnmount(() => {
-  closeWS();
 });
+
+//暴露给父组件用
+defineExpose({
+  getInit
+})
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.game-container {
+  background: #000000;
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  margin: 0 auto;
+  overflow: hidden;
+}
+</style>