diff --git a/src/video-grid/useMediaStream.ts b/src/video-grid/useMediaStream.ts index 86b0105..236361f 100644 --- a/src/video-grid/useMediaStream.ts +++ b/src/video-grid/useMediaStream.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { useRef, useEffect, RefObject } from "react"; +import { useRef, useEffect, RefObject, useState, useCallback } from "react"; import { parse as parseSdp, write as writeSdp } from "sdp-transform"; import { acquireContext, @@ -22,6 +22,7 @@ import { } from "matrix-js-sdk/src/webrtc/audioContext"; import { useSpatialAudio } from "../settings/useSetting"; +import { useEventTarget } from "../useEvents"; declare global { interface Window { @@ -30,6 +31,23 @@ declare global { } } +export const useMediaStreamTrackCount = ( + stream: MediaStream +): [number, number] => { + const [audioTrackCount, setAudioTrackCount] = useState(0); + const [videoTrackCount, setVideoTrackCount] = useState(0); + + const tracksChanged = useCallback(() => { + setAudioTrackCount(stream.getAudioTracks().length); + setVideoTrackCount(stream.getVideoTracks().length); + }, [stream]); + + useEventTarget(stream, "addtrack", tracksChanged); + useEventTarget(stream, "removetrack", tracksChanged); + + return [audioTrackCount, videoTrackCount]; +}; + export const useMediaStream = ( stream: MediaStream, audioOutputDevice: string, @@ -207,13 +225,14 @@ export const useSpatialMediaStream = ( spatialAudio || mute, localVolume ); + const [audioTrackCount] = useMediaStreamTrackCount(stream); const gainNodeRef = useRef(); const pannerNodeRef = useRef(); const sourceRef = useRef(); useEffect(() => { - if (spatialAudio && tileRef.current && !mute) { + if (spatialAudio && tileRef.current && !mute && audioTrackCount > 0) { if (!pannerNodeRef.current) { pannerNodeRef.current = new PannerNode(audioContext, { panningModel: "HRTF", @@ -261,7 +280,15 @@ export const useSpatialMediaStream = ( pannerNode.disconnect(); }; } - }, [stream, spatialAudio, audioContext, audioDestination, mute, localVolume]); + }, [ + stream, + spatialAudio, + audioContext, + audioDestination, + mute, + localVolume, + audioTrackCount, + ]); return [tileRef, mediaRef]; };