增加对讲

src/App.vue

@@ -23,7 +23,7 @@ const mqtt = new MqttService()
 const store = useStore()
 const router = useRouter()
 const themeOverrides = Theme
-
+router.push('/room')
 watch(() => store.mqtt_message, (val) => {
   console.log('顶级监听', val)
   if (val.type === 'connect') {

src/assets/icons/gemePad.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-<path d="M941 469.9c-43.9-197.4-105.9-246.1-143.6-265.6C737 173 666.9 191.2 643.7 203c-26.4 13.3-44.2 38.7-71 49.7-31 12.7-73.2 16.1-104.9 0.8-25.3-12.2-47.6-38.3-78.2-49.9-38.8-14.7-103.5-35.2-167.4 9.7C207 224 99.1 312.6 66.8 589.6c-20 170.8 75.5 225.7 72 223.2 24.6 17.3 79.6 46.4 154.2 0.7 49.8-30.5 90.3-90.9 90.3-90.9s18-33.6 42-47.8c16.9-10.1 42.3-2.4 42.3-2.4h89.7s28.5-3.5 48.4 5.1c19.4 8.3 30.4 28.8 30.4 28.8s59.1 74.9 115.7 113c24.1 16.2 121 34.9 171.1-25 32.5-39.1 54.8-159.6 18.1-324.4z m-479-17.5c0 15-12.2 27.1-27.2 27.1h-67.9v68c0 15-12.2 27.2-27.2 27.2h-20.4c-15 0-27.2-12.1-27.2-27.2v-68h-67.9c-15 0-27.2-12.1-27.2-27.1V432c0-15 12.2-27.2 27.2-27.2h67.9v-67.9c0-15 12.2-27.2 27.2-27.2h20.4c15 0 27.2 12.2 27.2 27.2v67.9h67.9c15 0 27.2 12.1 27.2 27.2v20.4z m191.4 95.1c-28.1 0-50.9-22.8-50.9-51 0-28.1 22.8-50.9 50.9-50.9 28.1 0 50.9 22.8 50.9 50.9 0 28.2-22.8 51-50.9 51z m93.4-113.2c-27.8 0-50.4-22.6-50.4-50.4s22.6-50.3 50.4-50.3c27.8 0 50.4 22.6 50.4 50.3-0.1 27.8-22.6 50.4-50.4 50.4z" ></path>
-</svg>

src/assets/icons/max.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686466364777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3580" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M959.72 0H294.216a63.96 63.96 0 0 0-63.96 63.96v127.92H64.28A63.96 63.96 0 0 0 0.32 255.84V959.4a63.96 63.96 0 0 0 63.96 63.96h703.56a63.96 63.96 0 0 0 63.96-63.96V792.465h127.92a63.96 63.96 0 0 0 63.96-63.96V63.96A63.96 63.96 0 0 0 959.72 0zM767.84 728.505V959.4H64.28V255.84h703.56z m189.322 0H831.8V255.84a63.96 63.96 0 0 0-63.96-63.96H294.216V63.96H959.72z" p-id="3581"></path></svg>

src/assets/icons/maxMin.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686466360385" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3440" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M812.3 959.4H213.7c-81.6 0-148-66.4-148-148V212.9c0-81.6 66.4-148 148-148h598.5c81.6 0 148 66.4 148 148v598.5C960.3 893 893.9 959.4 812.3 959.4zM213.7 120.9c-50.7 0-92 41.3-92 92v598.5c0 50.7 41.3 92 92 92h598.5c50.7 0 92-41.3 92-92V212.9c0-50.7-41.3-92-92-92H213.7z" fill="" p-id="3441"></path></svg>

src/assets/icons/mic.svg

@@ -1,3 +1,5 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
-<path d="M614.84 89.599c85.46-42.521 191.999-23.278 256.64 52.699 62.14 73.011 66.346 175.864 17.175 252.606-12.245 0.043-25.069-2.053-38.196-5.972-52.092-15.542-106.511-58.221-150.317-110.832-43.937-52.727-76.121-114.288-83.697-167.478-1.026-7.244-1.575-14.27-1.605-21.023zM183.277 673.503c-0.65 37.807 18.39 58.627 54.853 64.452l401.174-269.607c-55.417-35.016-102.607-92.76-127.041-153.483L183.277 673.503z m13.099 85.561c-33.353 34.785-43.416 70.844-35.552 97.735 3.21 11.001 9.616 20.502 18.766 27.571 9.687 7.488 22.743 12.42 38.674 13.792 54.361 4.671 135.657-30.433 230.659-136.886C544.402 654.29 630.44 603.529 700.922 591.152c42.649-7.475 80.095-1.257 111.194 15.08 31.084 16.337 55.171 42.664 71.234 75.383 25.069 51.093 30.245 118.177 11.189 186.245l-55.763-15.644c15.181-54.245 11.653-106.495-7.345-145.199-10.67-21.745-26.342-39.05-46.293-49.547-19.967-10.497-44.892-14.328-74.226-9.18-58.727 10.294-132.866 55.373-218.688 151.532-109.184 122.34-208.898 162.143-278.716 156.157-27.469-2.357-50.919-11.61-69.295-25.821-18.94-14.646-32.255-34.396-38.935-57.253-13.287-45.442 0.289-102.78 49.372-153.96l41.726 40.119z m660.039-326.86C791.529 410.72 726.7 360.119 675.794 298.991c-46.351-55.648-82.018-120.955-96.419-181.749-38.096 46.901-53.58 106.986-45.195 164.703 23.306 70.047 83.783 142.568 151.184 173.536 56.502 16.353 118.888 9.021 171.051-23.277z" ></path></svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M526.301867 204.1856l293.546666 293.546667c-43.690667 40.96-100.693333 58.368-155.989333 53.930666l-191.488-191.488c-4.437333-55.296 12.970667-112.298667 53.930667-155.989333zM862.5152 444.142933l-282.624-282.624c79.189333-42.666667 179.882667-30.72 246.442667 35.84a208.896 208.896 0 0 1 36.181333 246.784zM430.728533 415.1296l-275.456 337.237333c-26.965333 33.109333-24.576 80.896 5.461334 110.592 30.037333 30.378667 77.824 32.768 110.933333 5.802667l337.237333-275.114667-178.176-178.517333z m-35.498666 261.802667a33.9968 33.9968 0 1 1-48.128-48.128l40.96-41.301334c13.312-13.312 35.157333-13.312 48.469333 0 13.312 13.312 13.312 34.816 0 48.469334l-41.301333 40.96z" ></path>
+</svg>

src/components/audio.vue

@@ -1,17 +0,0 @@
-<template>
-  <Icon
-    name="audio"
-    :size="size"
-    :color="(!!(state % 2)) ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
-  />
-</template>
-
-<script setup lang='ts'>
-const props = withDefaults(defineProps<{
-  state: number,
-  size?: number
-}>(), {
-  state: 0,
-  size: 22
-})
-</script>

src/components/mic.vue

@@ -0,0 +1,61 @@
+<template>
+  <Icon
+    name="mic"
+    :size="22"
+    :color="show ? '#00CED1' : 'rgba(255, 255, 255, 0.5)'"
+    @click="change"
+  />
+</template>
+
+<script setup lang='ts'>
+import { useNotification } from 'naive-ui'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const emit = defineEmits<{(evt: 'callBack', value: Blob): void }>()
+const notice = useNotification()
+const show = ref(false)
+let chunks = [] as Blob[]
+let audio = null as null | MediaRecorder
+
+async function initMic() {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    audio = new MediaRecorder(stream)
+    audio.ondataavailable = (e: { data: Blob }) => {
+      chunks.push(e.data)
+    }
+    audio.onstart = () => {
+      chunks = []
+    }
+    audio.onstop = () => {
+      const blob = new Blob(chunks, { type: 'audio/webm;codecs=opus' })
+      emit('callBack', blob)
+    }
+  } catch (error: any) {
+    const type = error.toString().includes('getUserMedia')
+    notice.warning({ title: type ? '不支持webrtc音频' : '未获取到音频设备' })
+  }
+}
+
+function distory() {
+  if (audio) audio.stop()
+  chunks = []
+  audio = null
+}
+
+function change() {
+  show.value = !show.value
+  if (!audio) return
+  show.value ? audio.start() : audio.stop()
+  console.log('mic', show.value)
+}
+
+onMounted(() => initMic())
+
+onUnmounted(() => distory())
+</script>
+<style lang="scss" scoped>
+svg {
+  cursor: pointer;
+}
+</style>

src/components/signal.vue

@@ -62,7 +62,7 @@ watch(() => props.signalValue, (v: number) => {
 <style scoped lang="scss">
 .signal-box {
   display: inline-flex;
-  align-items: flex-start;
+  align-items: flex-end;
   justify-content: center;
   height: 23px;
   width: 23px;

src/pages/room/index.vue

@@ -2,8 +2,8 @@
   <div class="room">
     <topBar class="room-bar">
       <signal :signal-value="signalValue" />
-      <audiod :state="audioValue" />
       <battery :quantity="batteryValue" />
+      <mic @callBack="sendAudio" />
     </topBar>
     <video
       ref="remoteVideo"
@@ -27,7 +27,7 @@ import topBar from '@/components/topBar.vue'
 import signal from '@/components/signal.vue'
 import battery from '@/components/battery.vue'
 import gauge from '@/components/gauge.vue'
-import audiod from '@/components/audio.vue'
+import mic from '@/components/mic.vue'
 import WebRtcService from '@/services/webrtc.service'
 import useStore from '@/store/index'
 
@@ -35,12 +35,19 @@ const signalValue = ref(5)
 const batteryValue = ref(50)
 const SpeedValue = ref(60)
 const conctrlNum = ref(0)
-const audioValue = ref(3)
 const remoteVideo = ref(null as unknown as HTMLVideoElement)
 const RTC = new WebRtcService()
 const store = useStore()
 const mqtt = inject('MQTT') as Any
 
+/**
+ * 发送语音
+ * @param blob blob
+ */
+function sendAudio(blob:Blob) {
+  console.log('send audio', blob)
+}
+
 onMounted(() => RTC.initRTC(remoteVideo.value, (event) => {
   const { type, data } = event
   if (type === 'connected') {
@@ -79,7 +86,7 @@ watch(() => store.mqtt_message, async (val: { type: string, data?: RTCSessionDes
       align-items: flex-end;
 
       &>* {
-        margin: 0 5px 0 10px;
+        margin: 0 0 0 10px;
       }
     }
   }