@material-ui/icons#MeetingRoom TypeScript Examples

CreateMeetingRoom = () => {
    const { chimeClientState, setMessage, setStage } = useAppState();
    const [meetingName, setMeetingName] = useState(chimeClientState.meetingName || "");
    const [region, setRegion] = useState(DEFAULT_REGION);
    const [isLoading, setIsLoading] = useState(false);

    const classes = useStyles();

    const onCreateMeetingClicked = async () => {
        setIsLoading(true);
        try {
            await chimeClientState.createMeeting(meetingName, region);
            setMessage("Info", "Room created", [`room created, please join.`]);
            setIsLoading(false);
            setStage(STAGE.ENTRANCE);
        } catch (e: any) {
            console.log(e);
            setMessage("Exception", "Creating meeting room failed", [`room(${e.meetingName}) exist?: ${!e.created}`]);
            setIsLoading(false);
        }
    };

    const forms = (
        <>
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setMeetingName(e.target.value)} label="meeting name" secret={false} height={20} fontsize={16} defaultValue={meetingName} autofocus />
                <FormControl className={classes.formControl}>
                    <InputLabel>Region</InputLabel>
                    <Select value={region} onChange={(e: any) => setRegion(e.target.value)}>
                        <MenuItem disabled value="Video">
                            <em>Region</em>
                        </MenuItem>
                        {Object.keys(AVAILABLE_AWS_REGIONS).map((key) => {
                            return (
                                <MenuItem value={key} key={key}>
                                    {AVAILABLE_AWS_REGIONS[key]}
                                </MenuItem>
                            );
                        })}
                    </Select>
                </FormControl>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button variant="contained" color="primary" className={classes.submit} onClick={onCreateMeetingClicked} id="submit">
                        Create Meeting
                    </Button>
                )}
            </div>
        </>
    );

    const links = [
        {
            title: "Join Meeting",
            onClick: () => {
                setStage(STAGE.ENTRANCE);
            },
        },
        {
            title: "Sign out",
            onClick: () => {
                setStage(STAGE.SIGNIN);
            },
        },
    ];

    return (
        <>
            <Questionnaire avatorIcon={<MeetingRoom />} title="Create Meeting" forms={forms} links={links} />
        </>
    );
}

Entrance = (props: EntranceProps) => {
    const { chimeClientState, setMessage, setStage, deviceState } = useAppState();
    const [meetingName, setMeetingName] = useState(chimeClientState.meetingName || "");
    const [userName, setUserName] = useState(chimeClientState.userName || "");
    const [codeToAccess, setCodeToAccess] = useState("");
    const [isLoading, setIsLoading] = useState(false);

    const [useDefault, setUseDefault] = useState(true);

    const classes = useStyles();

    const onJoinMeetingClicked = async () => {
        setIsLoading(true);
        try {
            const meetingInfo = await chimeClientState.getMeetingInfo(meetingName, userName);
            console.log("MeetingInfo:", meetingInfo);
        } catch (e: any) {
            setMessage("Exception", "Enter Room Failed", [`${e.message}\n, please create new room.`, `(code: ${e.code})`]);
            setStage(STAGE.CREATE_MEETING_ROOM);
            return;
        }
        try {
            if (props.asGuest) {
                await chimeClientState.initializeWithCode(codeToAccess);
                await chimeClientState.joinMeeting(meetingName, userName);
            } else {
                await chimeClientState.joinMeeting(meetingName, userName);
            }
            console.log("joined to meeting..");
            if (useDefault) {
                try {
                    const { defaultAudioInputDeviceId, defaultVideoInputDeviceId, defaultAudioOutputDeviceId } = deviceState.getDefaultDeviceIds();
                    await chimeClientState.setAudioInput(defaultAudioInputDeviceId);
                    await chimeClientState.setAudioInputEnable(true);
                    await chimeClientState.setVideoInput(defaultVideoInputDeviceId);
                    await chimeClientState.setVirtualBackgroundSegmentationType("GoogleMeetTFLite");
                    await chimeClientState.setVideoInputEnable(true);
                    await chimeClientState.setAudioOutput(defaultAudioOutputDeviceId);
                    await chimeClientState.setAudioOutputEnable(true);
                    await chimeClientState.setBackgroundImagePath("/default/bg1.jpg");

                    // await new Promise<void>((resolve, reject) => {
                    //     setTimeout(() => {
                    //         console.log("TIMEOUT!!");
                    //         resolve();
                    //     }, 1000 * 5);
                    // });

                    await chimeClientState.enterMeeting();
                    setIsLoading(false);
                    chimeClientState.startLocalVideoTile();
                    setStage(STAGE.MEETING_ROOM);
                } catch (e: any) {
                    setIsLoading(false);
                    console.log(e);
                }
            } else {
                setIsLoading(false);
                setStage(STAGE.WAITING_ROOM);
            }
        } catch (e: any) {
            console.log(e);
            setMessage("Exception", "Enter Room Failed", [`${e.message}`, `(code: ${e.code})`]);
            setIsLoading(false);
        }
    };

    const forms = (
        <>
            <div className={classes.loginField}>
                <CustomTextField onChange={(e) => setMeetingName(e.target.value)} label="meeting name" secret={false} height={20} fontsize={16} defaultValue={meetingName} autofocus />
                <CustomTextField onChange={(e) => setUserName(e.target.value)} label="user name" secret={false} height={20} fontsize={16} defaultValue={userName} />
                {props.asGuest ? <CustomTextField onChange={(e) => setCodeToAccess(e.target.value)} label="guest code" secret={false} height={20} fontsize={16} defaultValue={codeToAccess} /> : <></>}
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", marginRight: 0 }}>
                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button variant="contained" color="primary" className={classes.submit} onClick={onJoinMeetingClicked} id="submit">
                        Join Meeting
                    </Button>
                )}
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
                <div>
                    <Checkbox
                        icon={<FavoriteBorder />}
                        checkedIcon={<Favorite />}
                        size="small"
                        checked={useDefault ? true : false}
                        onClick={(e) => {
                            setUseDefault(!useDefault);
                        }}
                    />
                    use default setting
                </div>
            </div>
        </>
    );

    const links = [
        {
            title: "Create Meeting Room",
            onClick: () => {
                setStage("CREATE_MEETING_ROOM");
            },
        },
        {
            title: "Sign out",
            onClick: () => {
                chimeClientState.leaveMeeting();
                setStage(STAGE.SIGNIN);
            },
        },
    ];

    return (
        <>
            <Questionnaire avatorIcon={<MeetingRoom />} title="Join Meeting" forms={forms} links={links} />
        </>
    );
}

WaitingRoom = () => {
    const { chimeClientState, deviceState, setStage } = useAppState();
    const [isLoading, setIsLoading] = useState(false);
    const classes = useStyles();
    //// Default Device ID
    const { defaultAudioInputDeviceId, defaultVideoInputDeviceId, defaultAudioOutputDeviceId } = deviceState.getDefaultDeviceIds();

    const [audioInputDeviceId, setAudioInputDeviceId] = useState(defaultAudioInputDeviceId);
    const [videoInputDeviceId, setVideoInputDeviceId] = useState(defaultVideoInputDeviceId);
    const [audioOutputDeviceId, setAudioOutputDeviceId] = useState(defaultAudioOutputDeviceId);
    const [segmentationType, setSegmentationType] = useState<VirtualBackgroundSegmentationType>("GoogleMeetTFLite");

    const onReloadDeviceClicked = () => {
        deviceState.reloadDevices();
    };

    const onEnterClicked = async () => {
        setIsLoading(true);
        try {
            await chimeClientState.enterMeeting();
            setIsLoading(false);
            chimeClientState.startLocalVideoTile();

            setStage(STAGE.MEETING_ROOM);
        } catch (e: any) {
            setIsLoading(false);
            console.log(e);
        }
    };

    useEffect(() => {
        const videoEl = document.getElementById("camera-preview") as HTMLVideoElement;
        chimeClientState.setPreviewVideoElement(videoEl);
    }, []); // eslint-disable-line

    useEffect(() => {
        if (videoInputDeviceId === "None") {
            chimeClientState.setVideoInput(null).then(() => {
                chimeClientState.stopPreview();
            });
        } else if (videoInputDeviceId === "File") {
            // fileInputRef.current!.click()
        } else {
            chimeClientState.setVideoInput(videoInputDeviceId).then(() => {
                console.log("DO START PREVIEW!1");
                chimeClientState.startPreview();
                console.log("DO START PREVIEW!2");
            });
        }
    }, [videoInputDeviceId]); // eslint-disable-line

    useEffect(() => {
        if (segmentationType === "None") {
            chimeClientState.setVirtualBackgroundSegmentationType("None");
        } else {
            chimeClientState.setVirtualBackgroundSegmentationType(segmentationType).then(async () => {
                console.log("SET VIRTUAL BACK!");
                await chimeClientState.setBackgroundImagePath("/default/bg1.jpg");
            });
        }
    }, [segmentationType]); // eslint-disable-line

    useEffect(() => {
        if (audioInputDeviceId === "None") {
            chimeClientState.setAudioInput(null);
        } else {
            chimeClientState.setAudioInput(audioInputDeviceId).then(() => {
                console.log("SET AUDIO!");
            });
        }
    }, [audioInputDeviceId]); // eslint-disable-line

    useEffect(() => {
        if (audioOutputDeviceId === "None") {
            chimeClientState.setAudioOutput(null);
        } else {
            chimeClientState.setAudioOutput(audioOutputDeviceId).then(() => {
                console.log("SET AUDIOOUT!");
            });
        }
    }, [audioOutputDeviceId]); // eslint-disable-line

    const videoPreview = useMemo(() => {
        return <video id="camera-preview" className={classes.cameraPreview} />;
    }, []); // eslint-disable-line

    const cameras = deviceState.mediaDeviceList.videoinput.map((x) => {
        return { label: x.label, value: x.deviceId };
    });
    const virtualBackgrounds = [
        { label: "None", value: "None" },
        { label: "BodyPix", value: "BodyPix" },
        { label: "GoogleMeet", value: "GoogleMeet" },
        { label: "GoogleMeetTFLite", value: "GoogleMeetTFLite" },
    ];
    const microphones = deviceState.mediaDeviceList.audioinput.map((x) => {
        return { label: x.label, value: x.deviceId };
    });
    const speakers = deviceState.mediaDeviceList.audiooutput.map((x) => {
        return { label: x.label, value: x.deviceId };
    });

    const forms = (
        <>
            <div style={{ margin: 10 }}>
                Setup your devices. (user:{chimeClientState.userName}, room:{chimeClientState.meetingName})
            </div>
            <div style={{ margin: 10 }}>
                <CustomSelect onChange={(e) => setVideoInputDeviceId(e)} label="camera" height={16} fontsize={12} labelFontsize={16} items={cameras} defaultValue={defaultVideoInputDeviceId} />
            </div>
            <div style={{ margin: 10 }}>
                <CustomSelect onChange={(e) => setSegmentationType(e as VirtualBackgroundSegmentationType)} label="virtual background" height={16} fontsize={12} labelFontsize={16} items={virtualBackgrounds} defaultValue={segmentationType} />
            </div>

            <div style={{ margin: 10 }}>
                <Typography>Preview</Typography>
                {videoPreview}
            </div>
            <div style={{ margin: 10 }}>
                <CustomSelect onChange={(e) => setAudioInputDeviceId(e)} label="Microhpone" height={16} fontsize={12} labelFontsize={16} items={microphones} defaultValue={defaultAudioInputDeviceId} />
            </div>
            <div style={{ margin: 10 }}>
                <CustomSelect onChange={(e) => setAudioOutputDeviceId(e)} label="Speaker" height={16} fontsize={12} labelFontsize={16} items={speakers} defaultValue={defaultAudioOutputDeviceId} />
            </div>
            <div style={{ margin: 10, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <Button size="small" variant="outlined" color="primary" onClick={onReloadDeviceClicked}>
                    reload device list
                </Button>

                {isLoading ? (
                    <CircularProgress />
                ) : (
                    <Button size="small" variant="contained" color="primary" onClick={onEnterClicked} id="submit">
                        Enter
                    </Button>
                )}
            </div>
        </>
    );
    const links = [
        {
            title: "Go Back",
            onClick: () => {
                setStage(STAGE.ENTRANCE);
            },
        },
        {
            title: "Sign out",
            onClick: () => {
                chimeClientState.leaveMeeting();
                setStage(STAGE.SIGNIN);
            },
        },
    ];
    return (
        <>
            <Questionnaire avatorIcon={<MeetingRoom />} title="Waiting Room" forms={forms} links={links} />
        </>
    );
}