Add audio/video device options in call interface
Detect audio and video devices and show the options in the expand menus of the calling buttons in the call interface.
The options are not clickable for now, this will be implemented in https://git.jami.net/savoirfairelinux/jami-web/-/issues/146
GitLab: #98
Change-Id: I51ebf9ec90820db37e0d36b4ac9f57f119119da3
diff --git a/client/src/contexts/WebRTCProvider.tsx b/client/src/contexts/WebRTCProvider.tsx
index eb52e6b..7dc1611 100644
--- a/client/src/contexts/WebRTCProvider.tsx
+++ b/client/src/contexts/WebRTCProvider.tsx
@@ -27,6 +27,8 @@
localVideoRef: React.RefObject<HTMLVideoElement> | null;
remoteVideoRef: React.RefObject<HTMLVideoElement> | null;
+ mediaDevices: Record<MediaDeviceKind, MediaDeviceInfo[]>;
+
contactId: string;
isAudioOn: boolean;
@@ -39,6 +41,11 @@
const defaultWebRTCContext: IWebRTCContext = {
localVideoRef: null,
remoteVideoRef: null,
+ mediaDevices: {
+ audioinput: [],
+ audiooutput: [],
+ videoinput: [],
+ },
contactId: '',
@@ -74,6 +81,25 @@
const [webRTCConnection, setWebRTCConnection] = useState<RTCPeerConnection | undefined>();
const localStreamRef = useRef<MediaStream>();
const webSocket = useContext(WebSocketContext);
+ const [mediaDevices, setMediaDevices] = useState<Record<MediaDeviceKind, MediaDeviceInfo[]>>(
+ defaultWebRTCContext.mediaDevices
+ );
+
+ useEffect(() => {
+ 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);
+ });
+ }, []);
useEffect(() => {
if (!webRTCConnection) {
@@ -217,6 +243,7 @@
value={{
localVideoRef,
remoteVideoRef,
+ mediaDevices,
contactId,
isAudioOn,
setAudioStatus,