增加音频获取

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

src/App.vue

@@ -4,32 +4,22 @@
       <video id="v2" autoplay playsinline muted></video>
       <div class="marke">
         <!-- 手柄状态 -->
-        <svg
-          viewBox="0 -50 1024 1024"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          width="30"
-          height="30"
-        >
+        <svg viewBox="0 -50 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
           <path
             d="M817.68 803.17a130.23 130.23 0 0 1-125.6-96.37l-14-52.19a54.08 54.08 0 0 0-52.16-40H398.07a54.08 54.08 0 0 0-52.16 40l-14 52.19c-15.54 58-68.21 96.37-125.6 96.37A130 130 0 0 1 80.78 639.51l66.72-249a181.66 181.66 0 0 1 63.19-97.15A177.79 177.79 0 0 1 322 254.58h380a177.79 177.79 0 0 1 111.31 38.79 181.66 181.66 0 0 1 63.19 97.15l66.72 249a130 130 0 0 1-125.54 163.65zM322 274.58A160 160 0 0 0 166.87 395.5v0.13l-66.73 249a110 110 0 0 0 212.5 56.94l14-52.19a74.11 74.11 0 0 1 71.48-54.85h227.81a74.11 74.11 0 0 1 71.48 54.85l14 52.19a110 110 0 0 0 212.5-56.94L857.13 395.5A160 160 0 0 0 702 274.58z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-          ></path>
+            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
           <path
             d="M580 213.86a12 12 0 0 1 12 12v28H432v-28a12 12 0 0 1 12-12h136m0-20H444a32 32 0 0 0-32 32v48h200v-48a32 32 0 0 0-32-32z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-          ></path>
+            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
           <path
             d="M512 213.86a10 10 0 0 1-10-10v-63a60.07 60.07 0 0 1 60-60 10 10 0 0 1 0 20 40 40 0 0 0-40 40v63a10 10 0 0 1-10 10zM330 344.86a90 90 0 1 1-90 90 90.1 90.1 0 0 1 90-90m0-20a110 110 0 1 0 110 110 110 110 0 0 0-110-110z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-          ></path>
+            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
           <path
             d="M330 384.86a50 50 0 1 1-50 50 50.06 50.06 0 0 1 50-50m0-20a70 70 0 1 0 70 70 70 70 0 0 0-70-70zM697 344.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM697 496.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM773 420.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM621 420.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34z"
-            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-          ></path>
+            :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
         </svg>
         <!-- 音频 -->
-        <Record />
+        <Record @callBack="sendAudio" :audioState="audioState" />
         <!-- 信号 -->
         <Signal :signalValue="4" />
         <!-- 电量 -->
@@ -62,11 +52,12 @@ export default {
       socket: null,
       HOST: "wss://car.caner.top",
       Peer: null,
-      isLogin: false,
+      isLogin: true,
       error: "",
       remoteVideo: null,
-      showLoading: true,
+      showLoading: false,
       contrlState: false,
+      audioState: false,
       speed: 1, //1低速档 | 2 高速档
       iceServers: [
         {
@@ -176,8 +167,8 @@ export default {
       // 挡位选择AB
       if (db.buttons[1].touched) this.speed = 2;
       if (db.buttons[0].touched) this.speed = 1;
-      // 语音按键
-      if (db.buttons[7].touched) console.log("R2");
+      // 语音按键R2
+      this.audioState = db.buttons[7].touched
       const params = {
         v0: Math.floor(db.axes[0] * 128 + 128),
         v1: Math.floor(db.axes[1] * 128 + 128),
@@ -191,6 +182,15 @@ export default {
       requestAnimationFrame(this.ControlData);
     },
 
+    // 发送语音
+    sendAudio(blob) {
+      if (!this.socket && !this.socket.connected) return;
+      this.socket.emit("msg", {
+        type: "Meadia",
+        Meadia: blob,
+      });
+    },
+
     // 挡位
     Gear(speed, num) {
       // 低速档
@@ -256,8 +256,6 @@ export default {
     },
   },
   mounted() {
-    window.addEventListener("gamepadconnected", this.conControl);
-    window.addEventListener("gamepaddisconnected", this.disControl);
     this.intSoketRtc(this.HOST);
   },
   destroyed() {
@@ -286,6 +284,7 @@ video {
   object-fit: fill;
   font-size: 0;
 }
+
 .marke {
   position: fixed;
   top: 0;
@@ -298,6 +297,7 @@ video {
   align-items: center;
   justify-content: center;
 }
+
 .marke::before {
   position: absolute;
   z-index: 0;
@@ -308,9 +308,11 @@ video {
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
 }
-.marke > div {
+
+.marke>div {
   margin: 0 3px;
 }
+
 .gauge {
   position: fixed;
   bottom: 0;
@@ -320,6 +322,7 @@ video {
   height: 185px;
   z-index: 9;
 }
+
 /* 隐藏滚动条 */
 ::-webkit-scrollbar {
   width: 0 !important;

src/components/record.vue

@@ -1,26 +1,19 @@
 <template>
-  <div style="width:23px;height:23px;position:relative;z-index: 3;">
-    <svg
-      viewBox="0 50 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      width="25"
-      height="25"
-    >
+  <div style="width: 23px; height: 23px; position: relative; z-index: 3">
+    <svg viewBox="0 50 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
       <path
         d="M801.728 364.8a32 32 0 0 0-32 32v91.392c0 129.28-115.648 234.432-257.728 234.432S254.272 617.408 254.272 488.192V393.216a32 32 0 0 0-64 0v94.976c0 157.888 133.248 286.208 300.672 296.448v99.392H357.632c-16.128 0-29.184 14.336-29.184 32.064 0 17.664 13.056 31.936 29.184 31.936h319.04c16.064 0 29.184-14.272 29.184-31.936 0-17.728-13.12-32.064-29.184-32.064H554.944v-101.376c156.992-19.776 278.784-143.488 278.784-294.464V396.8c0-17.728-14.272-32-32-32z"
-        :fill="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-      ></path>
+        :fill="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
       <path
         d="M517.12 678.656a199.104 199.104 0 0 0 198.912-198.848V268.736A199.168 199.168 0 0 0 517.12 69.888a199.04 199.04 0 0 0-198.784 198.848v211.072a199.04 199.04 0 0 0 198.784 198.848z m85.056-126.784a49.856 49.856 0 1 1 0-99.648 49.856 49.856 0 0 1 0 99.648zM382.336 268.736c0-74.368 60.48-134.848 134.784-134.848a135.04 135.04 0 0 1 134.912 134.848v28.48H382.336v-28.48z"
-        :fill="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
-      ></path>
+        :fill="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
     </svg>
   </div>
 </template>
 <script>
 import { Message } from "view-design";
 export default {
+  props: ["audioState"],
   data() {
     return {
       chunks: [],
@@ -36,6 +29,7 @@ export default {
           audio: true,
         });
         this.mediaRecorder = new MediaRecorder(stream);
+
         // 事件监听
         this.mediaRecorder.ondataavailable = (e) => {
           this.chunks.push(e.data);
@@ -44,7 +38,6 @@ export default {
           this.chunks = [];
         };
         this.mediaRecorder.onstop = () => {
-          this.show = false;
           const blob = new Blob(this.chunks, {
             type: "audio/webm;codecs=opus",
           });
@@ -52,16 +45,19 @@ export default {
         };
       } catch (error) {
         this.show = false;
+        this.mediaRecorder = null;
+        let txt = "不支持的音频";
+        if (error.toString().includes("getUserMedia")) {
+          txt = "不支持webrtc音频";
+        } else {
+          txt = "未获取到音频设备";
+        }
         Message.error({
-          content: "不支持音频输入",
+          content: txt,
         });
       }
     },
-    // 录音
-    async audioCapture() {
-      this.show = true;
-      this.mediaRecorder.start();
-    },
+
     // blob2AudioBuffer
     blob2audioBuffer(blob) {
       const reader = new FileReader();
@@ -76,5 +72,19 @@ export default {
       reader.readAsArrayBuffer(blob);
     },
   },
+  watch: {
+    audioState(v) {
+      if (!this.mediaRecorder) return;
+      if (v) {
+        this.mediaRecorder.start();
+      } else {
+        this.mediaRecorder.stop();
+      }
+      this.show = v;
+    },
+  },
+  mounted() {
+    this.initRecorder();
+  },
 };
 </script>