xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make it work on Chrome

Browse source
This commit is contained in:
Robin Townsend 2022-05-31 16:11:39 -04:00
parent c6b90803f8
commit da3d038547
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/video-grid/useMediaStream.js
View file

@ -84,7 +84,7 @@ export const useSpatialMediaStream = (
) => { ) => {
const tileRef = useRef(); const tileRef = useRef();
const [spatialAudio] = useSpatialAudio(); const [spatialAudio] = useSpatialAudio();
// If spatial audio is enabled, we handle mute state separately from the video element // If spatial audio is enabled, we handle audio separately from the video element
const mediaRef = useMediaStream( const mediaRef = useMediaStream(
stream, stream,
audioOutputDevice, audioOutputDevice,
@ -95,15 +95,22 @@ export const useSpatialMediaStream = (
if (!pannerNodeRef.current) { if (!pannerNodeRef.current) {
pannerNodeRef.current = new PannerNode(audioContext, { pannerNodeRef.current = new PannerNode(audioContext, {
panningModel: "HRTF", panningModel: "HRTF",
refDistance: 3,
}); });
} }
const sourceRef = useRef();
useEffect(() => { useEffect(() => {
if (spatialAudio && tileRef.current && mediaRef.current && !mute) { if (spatialAudio && tileRef.current && !mute) {
if (!sourceRef.current) {
sourceRef.current = audioContext.createMediaStreamSource(stream);
}
const tile = tileRef.current; const tile = tileRef.current;
const source = sourceRef.current;
const pannerNode = pannerNodeRef.current; const pannerNode = pannerNodeRef.current;
const source = audioContext.createMediaElementSource(mediaRef.current);
const updatePosition = () => { const updatePosition = () => {
const bounds = tile.getBoundingClientRect(); const bounds = tile.getBoundingClientRect();
const windowSize = Math.max(window.innerWidth, window.innerHeight); const windowSize = Math.max(window.innerWidth, window.innerHeight);
@ -116,6 +123,7 @@ export const useSpatialMediaStream = (
pannerNodeRef.current.positionZ.value = -2; pannerNodeRef.current.positionZ.value = -2;
}; };
updatePosition();
source.connect(pannerNode); source.connect(pannerNode);
pannerNode.connect(audioContext.destination); pannerNode.connect(audioContext.destination);
// HACK: We abuse the CSS transitionrun event to detect when the tile // HACK: We abuse the CSS transitionrun event to detect when the tile
@ -129,7 +137,7 @@ export const useSpatialMediaStream = (
pannerNode.disconnect(); pannerNode.disconnect();
}; };
} }
}, [spatialAudio, audioContext, mediaRef, mute]); }, [stream, spatialAudio, audioContext, mute]);
return [tileRef, mediaRef]; return [tileRef, mediaRef];
}; };