50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
import React, { useCallback, useRef, useState } from "react";
|
|
import styles from "./GridDemo.module.css";
|
|
import { VideoGrid } from "./VideoGrid";
|
|
|
|
export function GridDemo() {
|
|
const participantKey = useRef(0);
|
|
const [stream, setStream] = useState();
|
|
const [participants, setParticipants] = useState([]);
|
|
|
|
const startWebcam = useCallback(async () => {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
|
setStream(stream);
|
|
setParticipants([{ stream, userId: participantKey.current++ }]);
|
|
}, []);
|
|
|
|
const addParticipant = useCallback(() => {
|
|
setParticipants((participants) => [
|
|
...participants,
|
|
{ stream: stream.clone(), userId: participantKey.current++ },
|
|
]);
|
|
}, [stream]);
|
|
|
|
const removeParticipant = useCallback((key) => {
|
|
setParticipants((participants) =>
|
|
participants.filter((participant) => participant.userId !== key)
|
|
);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.gridDemo}>
|
|
<div className={styles.buttons}>
|
|
{!stream && <button onClick={startWebcam}>Start Webcam</button>}
|
|
{stream && participants.length < 12 && (
|
|
<button onClick={addParticipant}>Add Tile</button>
|
|
)}
|
|
{stream && participants.length > 0 && (
|
|
<button
|
|
onClick={() =>
|
|
removeParticipant(participants[participants.length - 1].userId)
|
|
}
|
|
>
|
|
Remove Tile
|
|
</button>
|
|
)}
|
|
</div>
|
|
<VideoGrid participants={participants} />
|
|
</div>
|
|
);
|
|
}
|