Attempt to make custom audio outputs work again

Author: martpie

src/components/AudioOutputSelect/AudioOutputSelect.tsx

@@ -19,12 +19,12 @@ export default function AudioOutputSelect(props: Props) {
   useEffect(() => {
     const refreshDevices = async () => {
       try {
-        // Webkit sucks, we need to request permissions for inputs, when we only
-        // need outputs
-        // const test = await navigator.mediaDevices.getUserMedia({
-        //   audio: true,
-        //   video: false,
-        // });
+        // This will display a popup to users asking them to give microphone access,
+        // which is lame because we only need outputs.
+        // Does not work on macOS/linux for now.
+        await navigator.mediaDevices.getUserMedia({
+          audio: true,
+        });
         const devices = await navigator.mediaDevices.enumerateDevices();
         const audioDevices = devices.filter(
           (device) => device.kind === 'audiooutput' && device.deviceId !== '',

src/lib/player.ts

@@ -37,9 +37,14 @@ class Player {
     this.track = null;
 
     this.audio.defaultPlaybackRate = mergedOptions.playbackRate;
-    // @ts-ignore
-    // TODO:
-    // this.audio.setSinkId(mergedOptions.audioOutputDevice);
+
+    // FIXME: this will not do anything unless we recall getUserMedia()
+    if ('setSinkId' in this.audio) {
+      // eslint-disable-next-line
+      // @ts-ignore
+      this.audio.setSinkId(mergedOptions.audioOutputDevice);
+    }
+
     this.audio.playbackRate = mergedOptions.playbackRate;
     this.audio.volume = mergedOptions.volume;
     this.audio.muted = mergedOptions.muted;