增加手柄遥控

Signed-off-by: caner <5658514@qq.com>

package.json

@@ -9,10 +9,11 @@
   },
   "dependencies": {
     "socket.io-client": "^4.4.1",
+    "view-design": "^4.7.0",
     "vue": "^2.6.11"
   },
   "devDependencies": {
     "@vue/cli-service": "~4.5.0",
     "vue-template-compiler": "^2.6.11"
   }
-}
+}

src/App.vue

@@ -13,6 +13,7 @@
 const { io } = require("socket.io-client");
 import Login from "@/components/login";
 import Loading from "@/components/loading";
+import { Message } from "view-design";
 export default {
   components: { Login, Loading },
   data() {
@@ -60,10 +61,17 @@ export default {
             this.remoteVideo.srcObject = evt.streams[0];
             this.showLoading = false;
           };
+
+          // init Control
+          window.addEventListener("gamepadconnected", this.conControl);
+          window.addEventListener("gamepaddisconnected", this.disControl);
         } catch (error) {
           this.socket.disconnect();
           this.isLogin = false;
-          alert("不支持Webrtc");
+          Message.error({
+            content: "webrtc初始化错误" + error,
+            duration: 3,
+          });
         }
       });
 
@@ -89,8 +97,21 @@ export default {
       this.socket.on("connect_error", (err) => this.close(err));
     },
 
+    ControlData() {
+      const data = navigator.getGamepads();
+      const db = data[0];
+      if (!db) return;
+      const params = {
+        v0: Math.floor(db.axes[0] * 128 + 128),
+        v1: Math.floor(db.axes[1] * 128 + 128),
+        v2: Math.floor(db.axes[2] * 128 + 128),
+        v3: Math.floor(db.axes[3] * 128 + 128),
+      };
+      console.log(params);
+      requestAnimationFrame(this.ControlData);
+    },
+
     login(data) {
-      // 设置登录头
       if (this.socket) {
         this.socket.auth = {
           roomID: data.roomID,
@@ -109,6 +130,25 @@ export default {
       this.isLogin = false;
       this.showLoading = false;
       this.error = err || "";
+      window.removeEventListener("gamepadconnected", this.conControl);
+      window.removeEventListener("gamepaddisconnected", this.disControl);
+      cancelAnimationFrame(this.ControlData);
+    },
+
+    conControl(event) {
+      Message.success({
+        content: event.gamepad.id + "手柄已连接",
+        duration: 3,
+      });
+      this.ControlData();
+    },
+
+    disControl(event) {
+      Message.error({
+        content: event.gamepad.id + "手柄已断开",
+        duration: 3,
+      });
+      cancelAnimationFrame(this.ControlData);
     },
   },
   mounted() {

src/components/loading.vue

@@ -17,7 +17,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    z-index: 9999;
+    z-index: 9;
     background: rgba(0, 0, 0, 0.7);
     font-size: 12px;
 }

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import 'view-design/dist/styles/iview.css';
 Vue.config.productionTip = false
 new Vue({
   render: h => h(App),