Как я могу отправить изображение живого видео через веб-сокет и сохранить его в переменной состояния React?

Question

Я использую React и socket.io , чтобы создать чат, где люди могут транслировать потоковое видео.

У меня есть видеоплеер с прямой трансляцией поток, который я хочу пропустить через socket.io. Когда поток передается от клиента к серверу и обратно клиенту, я хочу сохранить его в переменной состояния как элемент массива, чтобы я мог отображать все живые потоки пользователю.

Right теперь я просто пытаюсь нарисовать изображение потока на <canvas> и выдать его.

Я определяю каждый поток текущим пользователем, используя их user.username.

Поток. js

function Stream(props) {

    const refVideo = useRef();
    const refCanvas = useRef();

    const [streams, setStreams] = useState([]);

    function startStream() {
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then((stream) => {
            // set source of video to stream
            refVideo.current.srcObject = stream;

            // define canvas context
            const context = refCanvas.current.getContext('2d');

            // emit canvas as data url every 100 milliseconds
            const interval = setInterval(() => {
                // draw image
                context.drawImage(refVideo.current, 0, 0, context.width, context.height);

                // define stream by username
                const streamObj = {
                    image: refCanvas.current.toDataURL('image/jpeg'),
                    username: props.user.username,
                };

                // send stream to server
                socket.emit('stream', streamObj);
            }, 100);
        });
    }

    useEffect(() => {
        // when stream is received from server
        socket.on('stream', function(data) {

            // find stream by username
            const foundStream = streams.find((stream) => {
                return stream.username === data.username;
            });

            // ONLY if stream was not found, add it to state
            if(!foundStream) {
                setStreams((streams) => [...streams, data]);
            }
        });
    }, []);

    return (
        <video ref={refVideo} />
        <canvas ref={refCanvas} />
    );
}

сервер. js

socket.on('stream', function(data) {
  // send stream back to room
  io.to(room).emit('stream', data);
});

Мой поток отображается на <video> и объект отправляется через сокет на сервер и обратно на клиент, но по какой-то причине мой поток добавляется в мой streams массив состояний каждые раз (каждые 100 мсек).

Я проверяю, есть ли поток уже в массиве, используя foundStream, поэтому я не уверен, почему это происходит. Я что-то упустил?