fix: audio output device switching outside electron app | 修复输出设备切换

fix: audio output device switching outside electron app | 修复输出设备切换

src/locale/index.js

@@ -13,6 +13,7 @@ const i18n = new VueI18n({
     en,
     "zh-CN": zhCN,
   },
+  silentTranslationWarn: true,
 });
 
 export default i18n;

src/locale/lang/en.js

@@ -119,6 +119,8 @@ export default {
       lossless: "Lossless",
     },
     deviceSelector: "Audio Output Device",
+    permissionDenied: "Microphone Permission Denied",
+    permissionRequired: "Microphone Permission Required",
     appearance: {
       text: "Appearance",
       auto: "Auto",

src/locale/lang/zh-CN.js

@@ -120,6 +120,8 @@ export default {
       lossless: "无损",
     },
     deviceSelector: "音频输出设备",
+    permissionDenied: "无麦克风权限",
+    permissionRequired: "需要麦克风权限",
     appearance: {
       text: "外观",
       auto: "自动",

src/views/settings.vue

@@ -79,14 +79,14 @@
           <div class="title"> {{ $t("settings.deviceSelector") }} </div>
         </div>
         <div class="right">
-          <select v-model="outputDevice">
+          <select v-model="outputDevice" :disabled="withoutAudioPriviledge">
             <option
               v-for="device in allOutputDevices"
               :key="device.deviceId"
               :value="device.deviceId"
               :selected="device.deviceId == outputDevice"
             >
-              {{ device.label }}
+              {{ $t(device.label) }}
             </option>
           </select>
         </div>
@@ -244,7 +244,13 @@ export default {
         size: "0KB",
         length: 0,
       },
-      allOutputDevices: [],
+      allOutputDevices: [
+        {
+          deviceId: "default",
+          label: "settings.permissionRequired",
+        },
+      ],
+      withoutAudioPriviledge: true,
     };
   },
   computed: {
@@ -290,7 +296,7 @@ export default {
     },
     outputDevice: {
       get() {
-        if (this.allOutputDevices.length == 0) this.getAllOutputDevices(); // Ensure devices loaded before get
+        if (this.withoutAudioPriviledge === true) this.getAllOutputDevices();
         const isValidDevice = this.allOutputDevices.find(
           (device) => device.deviceId === this.settings.outputDevice
         );
@@ -395,7 +401,11 @@ export default {
   },
   methods: {
     getAllOutputDevices() {
-      return navigator.mediaDevices
+      navigator.mediaDevices
+        .getUserMedia({ audio: true })
+        .then(() => {
+          this.withoutAudioPriviledge = false;
+          navigator.mediaDevices
             .enumerateDevices()
             .then(
               (devices) =>
@@ -403,6 +413,15 @@ export default {
                   (device) => device.kind == "audiooutput"
                 ))
             );
+        })
+        .catch(() => {
+          this.allOutputDevices = [
+            {
+              deviceId: "default",
+              label: "settings.permissionDenied",
+            },
+          ];
+        });
     },
     logout() {
       doLogout();