Add logs to debug missing spatial audio

And potentially fix it, by recreating the source node when the stream changes.

src/video-grid/VideoTileContainer.tsx

@@ -71,8 +71,8 @@ export function VideoTileContainer({
     stream ?? null,
     audioContext,
     audioDestination,
-    isLocal,
-    localVolume
+    localVolume,
+    isLocal
   );
   const {
     modalState: videoTileSettingsModalState,

src/video-grid/useMediaStream.ts

@@ -20,6 +20,7 @@ import {
   acquireContext,
   releaseContext,
 } from "matrix-js-sdk/src/webrtc/audioContext";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { useSpatialAudio } from "../settings/useSetting";
 import { useEventTarget } from "../useEvents";
@@ -213,10 +214,10 @@ export const useSpatialMediaStream = (
   stream: MediaStream | null,
   audioContext: AudioContext,
   audioDestination: AudioNode,
-  mute = false,
-  localVolume?: number
+  localVolume: number,
+  mute = false
 ): [RefObject<HTMLDivElement>, RefObject<MediaElement>] => {
-  const tileRef = useRef<HTMLDivElement>();
+  const tileRef = useRef<HTMLDivElement | null>(null);
   const [spatialAudio] = useSpatialAudio();
   // We always handle audio separately form the video element
   const mediaRef = useMediaStream(stream, null, true);
@@ -227,7 +228,10 @@ export const useSpatialMediaStream = (
   const sourceRef = useRef<MediaStreamAudioSourceNode>();
 
   useEffect(() => {
-    if (spatialAudio && tileRef.current && !mute && audioTrackCount > 0) {
+    if (spatialAudio) {
+      if (tileRef.current && !mute && audioTrackCount > 0) {
+        logger.debug(`Rendering spatial audio for ${stream!.id}`);
+
         if (!pannerNodeRef.current) {
           pannerNodeRef.current = new PannerNode(audioContext, {
             panningModel: "HRTF",
@@ -239,7 +243,7 @@ export const useSpatialMediaStream = (
             gain: localVolume,
           });
         }
-      if (!sourceRef.current) {
+        if (!sourceRef.current || sourceRef.current.mediaStream !== stream!) {
           sourceRef.current = audioContext.createMediaStreamSource(stream!);
         }
 
@@ -274,6 +278,13 @@ export const useSpatialMediaStream = (
           gainNode.disconnect();
           pannerNode.disconnect();
         };
+      } else if (stream) {
+        logger.debug(
+          `Not rendering spatial audio for ${stream.id} (tile ref ${Boolean(
+            tileRef.current
+          )}, mute ${mute}, track count ${audioTrackCount})`
+        );
+      }
     }
   }, [
     stream,