diff --git a/package.json b/package.json index 4f0309e..4c58ecf 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@sentry/react": "^6.13.3", "@sentry/tracing": "^6.13.3", "@types/grecaptcha": "^3.0.4", + "@types/sdp-transform": "^2.4.5", "@use-gesture/react": "^10.2.11", "classnames": "^2.3.1", "color-hash": "^2.0.1", @@ -50,6 +51,7 @@ "react-router-dom": "^5.2.0", "react-use-clipboard": "^1.0.7", "react-use-measure": "^2.1.1", + "sdp-transform": "^2.14.1", "unique-names-generator": "^4.6.0" }, "devDependencies": { diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 35b93a7..7b5995f 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -21,4 +21,10 @@ declare global { // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10 OLM_OPTIONS: Record; } + + // TypeScript doesn't know about the experimental setSinkId method, so we + // declare it ourselves + interface MediaElement extends HTMLMediaElement { + setSinkId: (id: string) => void; + } } diff --git a/src/room/InCallView.jsx b/src/room/InCallView.jsx index de9f5bc..4a4c1cb 100644 --- a/src/room/InCallView.jsx +++ b/src/room/InCallView.jsx @@ -42,6 +42,7 @@ import { usePreventScroll } from "@react-aria/overlays"; import { useMediaHandler } from "../settings/useMediaHandler"; import { useShowInspector } from "../settings/useSetting"; import { useModalTriggerState } from "../Modal"; +import { useAudioContext } from "../video-grid/useMediaStream"; const canScreenshare = "getDisplayMedia" in navigator.mediaDevices; // There is currently a bug in Safari our our code with cloning and sending MediaStreams @@ -70,12 +71,10 @@ export function InCallView({ usePreventScroll(); const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0); + const [audioContext, audioDestination, audioRef] = useAudioContext(); const { audioOutput } = useMediaHandler(); const [showInspector] = useShowInspector(); - const audioContext = useRef(); - if (!audioContext.current) audioContext.current = new AudioContext(); - const { modalState: feedbackModalState, modalProps: feedbackModalProps } = useModalTriggerState(); @@ -139,6 +138,7 @@ export function InCallView({ return (
+