Temporarily remove strict mode to fix the call
Strict mode was causing an issue with the call flow. This disables it
temporarily, it will be reworked in the future.
Other changes:
- In CallProvider, ask mediadevices permission after the call is
connected
- In WebRtcProvider, add `iceconnectionstatechange` listener to set the
connected status
Change-Id: Ic366775c717d403faabe9c5787a26bd5c805e006
diff --git a/client/src/contexts/CallProvider.tsx b/client/src/contexts/CallProvider.tsx
index f29ad74..111d6e7 100644
--- a/client/src/contexts/CallProvider.tsx
+++ b/client/src/contexts/CallProvider.tsx
@@ -110,27 +110,30 @@
const contactUri = useMemo(() => conversation.getFirstMember().contact.getUri(), [conversation]);
useEffect(() => {
- // TODO: Wait until status is `InCall` before getting devices
- navigator.mediaDevices.enumerateDevices().then((devices) => {
- const newMediaDevices: Record<MediaDeviceKind, MediaDeviceInfo[]> = {
- audioinput: [],
- audiooutput: [],
- videoinput: [],
- };
+ if (!isConnected) {
+ return;
+ }
- for (const device of devices) {
- newMediaDevices[device.kind].push(device);
- }
-
- setMediaDevices(newMediaDevices);
- });
- }, []);
-
- useEffect(() => {
- // TODO: Only ask media permission once the call has been accepted
try {
- // TODO: When toggling mute on/off, the camera flickers
- // https://git.jami.net/savoirfairelinux/jami-web/-/issues/90
+ // TODO: Wait until status is `InCall` before getting devices
+ navigator.mediaDevices.enumerateDevices().then((devices) => {
+ const newMediaDevices: Record<MediaDeviceKind, MediaDeviceInfo[]> = {
+ audioinput: [],
+ audiooutput: [],
+ videoinput: [],
+ };
+
+ for (const device of devices) {
+ newMediaDevices[device.kind].push(device);
+ }
+
+ setMediaDevices(newMediaDevices);
+ });
+ } catch (e) {
+ console.error('Could not get media devices:', e);
+ }
+
+ try {
navigator.mediaDevices
.getUserMedia({
audio: true, // TODO: Set both to false by default
@@ -147,7 +150,7 @@
// TODO: Better handle user denial
console.error('Could not get media devices:', e);
}
- }, [setLocalStream]);
+ }, [isConnected]);
useEffect(() => {
if (localStream && webRtcConnection) {
diff --git a/client/src/contexts/WebRtcProvider.tsx b/client/src/contexts/WebRtcProvider.tsx
index a56efab..f87e1ff 100644
--- a/client/src/contexts/WebRtcProvider.tsx
+++ b/client/src/contexts/WebRtcProvider.tsx
@@ -86,9 +86,9 @@
sdp,
};
+ await webRtcConnection.setLocalDescription(new RTCSessionDescription(sdp));
console.info('Sending WebRtcOffer', webRtcOffer);
webSocket.send(WebSocketMessageType.WebRtcOffer, webRtcOffer);
- await webRtcConnection.setLocalDescription(new RTCSessionDescription(sdp));
},
[webRtcConnection, webSocket, contactUri]
);
@@ -123,15 +123,13 @@
offerToReceiveAudio: true,
offerToReceiveVideo: true,
});
- sendWebRtcAnswer(sdp);
await webRtcConnection.setLocalDescription(new RTCSessionDescription(sdp));
- setIsConnected(true);
+ sendWebRtcAnswer(sdp);
};
const webRtcAnswerListener = async (data: WebRtcSdp) => {
console.info('Received event on WebRtcAnswer', data);
await webRtcConnection.setRemoteDescription(new RTCSessionDescription(data.sdp));
- setIsConnected(true);
};
const webRtcIceCandidateListener = async (data: WebRtcIceCandidate) => {
@@ -177,12 +175,20 @@
setRemoteStreams(event.streams);
};
+ const connectionStateChangeEventListener = () => {
+ setIsConnected(
+ webRtcConnection.iceConnectionState === 'completed' || webRtcConnection.iceConnectionState === 'connected'
+ );
+ };
+
webRtcConnection.addEventListener('icecandidate', iceCandidateEventListener);
webRtcConnection.addEventListener('track', trackEventListener);
+ webRtcConnection.addEventListener('iceconnectionstatechange', connectionStateChangeEventListener);
return () => {
webRtcConnection.removeEventListener('icecandidate', iceCandidateEventListener);
webRtcConnection.removeEventListener('track', trackEventListener);
+ webRtcConnection.removeEventListener('iceconnectionstatechange', connectionStateChangeEventListener);
};
}, [webRtcConnection, webSocket, contactUri]);
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 0fa4b14..4924a97 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -20,7 +20,6 @@
import './i18n';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { RouterProvider } from 'react-router-dom';
@@ -44,12 +43,13 @@
const root = createRoot(container);
root.render(
<Provider store={store}>
- <StrictMode>
- <QueryClientProvider client={queryClient}>
- <CustomThemeProvider>
- <RouterProvider router={router} />
- </CustomThemeProvider>
- </QueryClientProvider>
- </StrictMode>
+ {/* TODO: Put back StrictMode (https://git.jami.net/savoirfairelinux/jami-web/-/issues/170) */}
+ {/*<StrictMode>*/}
+ <QueryClientProvider client={queryClient}>
+ <CustomThemeProvider>
+ <RouterProvider router={router} />
+ </CustomThemeProvider>
+ </QueryClientProvider>
+ {/*</StrictMode>*/}
</Provider>
);