diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 2495a81fefdc..59bb4a7ba6bf 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -113,175 +113,6 @@ const DeviceButton: FC = ({ ); }; -interface LobbyProps { - room: Room; - connect: () => Promise; - joinCallButtonDisabledTooltip?: string; - children?: ReactNode; -} - -export const Lobby: FC = ({ room, joinCallButtonDisabledTooltip, connect, children }) => { - const [connecting, setConnecting] = useState(false); - const me = useMemo(() => room.getMember(room.myUserId)!, [room]); - const videoRef = useRef(null); - - const [videoInputId, setVideoInputId] = useState(() => MediaDeviceHandler.getVideoInput()); - - const [audioMuted, setAudioMuted] = useState(() => MediaDeviceHandler.startWithAudioMuted); - const [videoMuted, setVideoMuted] = useState(() => MediaDeviceHandler.startWithVideoMuted); - - const toggleAudio = useCallback(() => { - MediaDeviceHandler.startWithAudioMuted = !audioMuted; - setAudioMuted(!audioMuted); - }, [audioMuted, setAudioMuted]); - const toggleVideo = useCallback(() => { - MediaDeviceHandler.startWithVideoMuted = !videoMuted; - setVideoMuted(!videoMuted); - }, [videoMuted, setVideoMuted]); - - // In case we can not fetch media devices we should mute the devices - const handleMediaDeviceFailing = (message: string): void => { - MediaDeviceHandler.startWithAudioMuted = true; - MediaDeviceHandler.startWithVideoMuted = true; - logger.warn(message); - }; - - const [videoStream, audioInputs, videoInputs] = useAsyncMemo( - async (): Promise<[MediaStream | null, MediaDeviceInfo[], MediaDeviceInfo[]]> => { - let devices: IMediaDevices | undefined; - try { - devices = await MediaDeviceHandler.getDevices(); - if (devices === undefined) { - handleMediaDeviceFailing("Could not access devices!"); - return [null, [], []]; - } - } catch (error) { - handleMediaDeviceFailing(`Unable to get Media Devices: ${error}`); - return [null, [], []]; - } - - // We get the preview stream before requesting devices: this is because - // we need (in some browsers) an active media stream in order to get - // non-blank labels for the devices. - let stream: MediaStream | null = null; - - try { - if (devices!.audioinput.length > 0) { - // Holding just an audio stream will be enough to get us all device labels, so - // if video is muted, don't bother requesting video. - stream = await navigator.mediaDevices.getUserMedia({ - audio: true, - video: !videoMuted && devices!.videoinput.length > 0 && { deviceId: videoInputId }, - }); - } else if (devices!.videoinput.length > 0) { - // We have to resort to a video stream, even if video is supposed to be muted. - stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: videoInputId } }); - } - } catch (e) { - logger.warn(`Failed to get stream for device ${videoInputId}`, e); - handleMediaDeviceFailing(`Have access to Device list but unable to read from Media Devices`); - } - - // Refresh the devices now that we hold a stream - if (stream !== null) devices = await MediaDeviceHandler.getDevices(); - - // If video is muted, we don't actually want the stream, so we can get rid of it now. - if (videoMuted) { - stream?.getTracks().forEach((t) => t.stop()); - stream = null; - } - - return [stream, devices?.audioinput ?? [], devices?.videoinput ?? []]; - }, - [videoInputId, videoMuted], - [null, [], []], - ); - - const setAudioInput = useCallback((device: MediaDeviceInfo) => { - MediaDeviceHandler.instance.setAudioInput(device.deviceId); - }, []); - const setVideoInput = useCallback((device: MediaDeviceInfo) => { - MediaDeviceHandler.instance.setVideoInput(device.deviceId); - setVideoInputId(device.deviceId); - }, []); - - useEffect(() => { - if (videoStream) { - const videoElement = videoRef.current!; - videoElement.srcObject = videoStream; - videoElement.play(); - - return () => { - videoStream.getTracks().forEach((track) => track.stop()); - videoElement.srcObject = null; - }; - } - }, [videoStream]); - - const onConnectClick = useCallback( - async (ev: ButtonEvent): Promise => { - ev.preventDefault(); - setConnecting(true); - try { - await connect(); - } catch (e) { - logger.error(e); - setConnecting(false); - } - }, - [connect, setConnecting], - ); - - return ( -
- {children} -
- -
- -
- ); -}; - interface StartCallViewProps { room: Room; resizing: boolean;