Javascript 删除不使用Reactjs的视频元素

我正在创建一个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;

import React，{Component}来自'React'；
从“peerjs”导入对等体；
类宿主扩展组件{
建造师（道具）{
超级（道具）；
this.peer=新的peer（）；
this.state={streams:[]}；
}
异步组件didmount（）{
const self=这个；
this.peer.on（'open'，函数（id）{
self.peer.on（'call'，（call）=>{
console.log（'传入呼叫…'）；
呼叫.应答（流）；
call.on（'stream'，（remoteStream）=>{
let streams=[…self.state.streams，{src:remoteStream，connId:call.connectionId，display:true}]；
self.setState（{streams}）；
log（'callreceived…'）；
})
call.on（'iceStateChanged'，（state）=>{
如果（状态==‘断开’）{
self.setState（prevState=>({
streams:prevState.streams.map(
s=>s.connId==call.connectionId？{…s，display:false}:s
)}))
log（'calldisconnected'）；
}
})
})
}
}
render（）{
返回(
{this.state.streams.map（（stream，idx）=>{
如果（！stream.display）
返回空
返回{ref.srcObject=stream.src}}>
})}
);
}
}
导出默认主机；

我能够动态创建视频元素，但删除是我面临的问题。 每当调用

iceStateChanged

事件时，即当用户断开连接时，它抛出以下错误

---

Uncaught TypeError:无法将属性'srcObject'设置为null

您在哪里创建/初始化

ref

对象？您的代码中有吗？@GregL我没有初始化该

ref

变量。我不确定是否正确，因为我对

Reactjs

非常陌生，但至少在c当新用户加入时创建新的视频元素。