Блог

Я создаю приложение WebRTC, в котором мне нужно показывать видеопоток новых пользователей при его подключении и удалении, когда они ушли.

 import React, { Component } from 'react';
import Peer from 'peerjs';


class Host extends Component {
    constructor(props) {
        super(props);
        this.peer = new Peer();
        this.state = { streams: [] };
    }

    async componentDidMount() {
        const self = this;

        this.peer.on('open', function(id) {
            self.peer.on('call', (call) => {
                console.log('Incoming call...');
                call.answer(stream);
                call.on('stream', (remoteStream) => {
                    let streams = [...self.state.streams, {src: remoteStream, connId: call.connectionId, display: true}];
                    self.setState({ streams });
                    console.log('Call received...');
                })

                call.on('iceStateChanged', (state) => {
                    if (state == 'disconnected') {
                        self.setState(prevState => ({
                        streams: prevState.streams.map(
                            s => s.connId === call.connectionId ? { ...s, display: false }: s
                        )}))
                        console.log('Call disconnected');
                    }
                })
            })
        }
    }
    
    render() {
        return(
            <>
            {this.state.streams.map((stream, idx) => {
                if (!stream.display)
                    return null

                return <video autoPlay key={idx} ref={(ref) => {ref.srcObject = stream.src}}></video>
            })}
            <>
        );
    }
}

export default Host;
  

Я могу динамически создавать видеоэлемент, но при удалении я сталкиваюсь с проблемами.
Всякий раз, когда вызывается iceStateChanged событие, т. е. when user disconnects оно выдает следующую ошибку.

Uncaught TypeError: Cannot set property 'srcObject' of null