Merge pull request #21121 from prlanzarin/u30/fix/localecho-output-change

fix(audio): local echo not tracking output device changes

bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx

@@ -508,7 +508,11 @@ class AudioSettings extends React.Component {
           {!withEcho ? (
             <AudioTestContainer id="audioTest" />
           ) : (
-            <LocalEchoContainer intl={intl} stream={stream} />
+            <LocalEchoContainer
+              intl={intl}
+              outputDeviceId={outputDeviceId}
+              stream={stream}
+            />
           )}
         </Styled.LabelSmall>
         {this.renderAudioCaptionsSelector()}

bigbluebutton-html5/imports/ui/components/audio/local-echo/component.jsx

@@ -17,6 +17,8 @@ const propTypes = {
   deattachEchoStream: PropTypes.func.isRequired,
   shouldUseRTCLoopback: PropTypes.func.isRequired,
   createAudioRTCLoopback: PropTypes.func.isRequired,
+  outputDeviceId: PropTypes.string,
+  setAudioSink: PropTypes.func.isRequired,
 };
 
 const intlMessages = defineMessages({
@@ -38,6 +40,8 @@ const LocalEcho = ({
   deattachEchoStream,
   shouldUseRTCLoopback,
   createAudioRTCLoopback,
+  outputDeviceId,
+  setAudioSink,
 }) => {
   const loopbackAgent = useRef(null);
   const [hearing, setHearing] = useState(initialHearingState);
@@ -70,6 +74,10 @@ const LocalEcho = ({
     applyHearingState(stream);
   }, [stream, hearing]);
 
+  useEffect(() => {
+    if (outputDeviceId) setAudioSink(outputDeviceId);
+  }, [outputDeviceId]);
+
   return (
     <Styled.LocalEchoTestButton
       data-test={hearing ? 'stopHearingButton' : 'testSpeakerButton'}

bigbluebutton-html5/imports/ui/components/audio/local-echo/container.jsx

@@ -16,6 +16,7 @@ const LocalEchoContainer = (props) => {
       deattachEchoStream={LocalEchoService.deattachEchoStream}
       shouldUseRTCLoopback={LocalEchoService.shouldUseRTCLoopback}
       createAudioRTCLoopback={LocalEchoService.createAudioRTCLoopback}
+      setAudioSink={LocalEchoService.setAudioSink}
     />
   );
 };

bigbluebutton-html5/imports/ui/components/audio/local-echo/service.js

@@ -1,5 +1,6 @@
 import LocalPCLoopback from '/imports/ui/services/webrtc-base/local-pc-loopback';
 import browserInfo from '/imports/utils/browserInfo';
+import logger from '/imports/startup/client/logger';
 
 const LOCAL_MEDIA_TAG = '#local-media';
 
@@ -125,9 +126,27 @@ const playEchoStream = async (stream, loopbackAgent = null) => {
   }
 };
 
+const setAudioSink = (deviceId) => {
+  const audioElement = document.querySelector(LOCAL_MEDIA_TAG);
+
+  if (audioElement.setSinkId) {
+    audioElement.setSinkId(deviceId).catch((error) => {
+      logger.warn({
+        logCode: 'localecho_output_change_error',
+        extraInfo: {
+          errorName: error?.name,
+          errorMessage: error?.message,
+          deviceId,
+        },
+      }, `Error setting audio sink in local echo test: ${error?.name}`);
+    });
+  }
+};
+
 export default {
   shouldUseRTCLoopback,
   createAudioRTCLoopback,
   deattachEchoStream,
   playEchoStream,
+  setAudioSink,
 };