无法附加到sourceBuffer，因为mediaSource元素父对象已删除

问题描述

我在视频流方面遇到问题。

我正在使用io套接字进行视频流传输，并对前端进行响应。

前端代码如下：-

class VideoElement extends React.Component {
    constructor(props) {
        /* props is having Id,projectDesignSocket */
        super();
        this.state = { hasError: false };
        this.videoRef = React.createRef();
        this.mediaSource = null;
        this.sourceBuffer = null;
    }

    componentDidMount() {
        this.mediaSource = new MediaSource();
        this.videoRef.current.src = URL.createObjectURL(this.mediaSource);
        this.mediaSource.onsourceopen = (e) => {
            URL.revokeObjectURL(this.videoRef.current.src);
            this.sourceBuffer = this.mediaSource.addSourceBuffer("video/webm; codecs=\"vp8,opus\"");
            this.sourceBuffer.mode = 'sequence';
            this.props.projectDesignSocket.on(`${this.props.Id}VideoData`,({ blob }) => {
                try {

                    this.sourceBuffer.appendBuffer(blob);
                }
                catch (err) {
                    console.log(err);
                }
                finally { 
                    console.log(this.sourceBuffer);
                }
            });
        }
    }

    render() {
        if (this.state.hasError) {
            return <h1>error</h1>;
        }
        else {
            return <video autoPlay ref={this.videoRef} id={this.props.Id}></video>;
        }
    }

    componentWillUnmount() {
        this.mediaSource.onsourceopen = null;
        this.props.projectDesignSocket.off(`${this.props.Id}VideoData`);
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error,info) {
        console.log(error,info);
    }
}

class VideoConfrence extends React.Component {
    /* prop is having projectDesignSocket,isAdmin,userList,currentRoom,userName,userId */
    constructor(props) {
        super();
        this.state = {};
        this.userVideoRef = React.createRef();
        this.mediaRecorder = null;
        this.videoStream = null;
    }

    static getDerivedStateFromProps(nextProp,prevState) {
        if (nextProp.userList !== prevState.userList) {
            return { userList: nextProp.userList }
        }
        else {
            return {};
        }
    }

    componentDidMount() {
        navigator.mediaDevices.getUserMedia({
            audio: true,video: true
        }).then(stream => {
            this.videoStream = stream;
            this.userVideoRef.current.srcObject = stream;
            this.mediaRecorder = new MediaRecorder(stream);
            this.mediaRecorder.start(100);
            this.mediaRecorder.ondataavailable = (e) => {
                if (e.data.size) { 
                    this.props.projectDesignSocket.emit('video',{
                        room: this.props.currentRoom,data: { userId: this.props.userId,blob: e.data }
                    });
                }
            }
        }).catch(err => {
            console.log(err);
        });
    }


    render() {
        return (
            <div className='videoConfrencing'>
                <video autoPlay ref={this.userVideoRef} />
                {
                    this.state.userList.map((item,index) => {
                        if (item !== this.props.userId) {
                            return <VideoElement key={index} Id={item} projectDesignSocket={this.props.projectDesignSocket} />
                        }
                        else {
                            return null;
                        }
                    })
                }
            </div>
        );
    }

    componentWillUnmount() {
        this.videoStream.getTracks().forEach(function (track) {
            track.stop();
        });
        this.mediaRecorder.ondataavailable = null;
        this.props.projectDesignSocket.off('newMemberAdded');
    }
}

和这样的后端：-

socket.on('video',function ({ room,data }) {
        // data has userid and blob as it's properties 

        if (room && data ) {
            socket.broadcast.to(room).emit(`${data.userId}VideoData`,{blob:data.blob});
        }
    })

VideoElement的componentDidMount的try / catch块发生错误

错误：-媒体资源Blob：http：// localhost：3000 / 493042c5-431b-40a1-aff6-5fafe218a677无法解码，错误：错误代码：NS_ERROR_FAILURE（0x80004005） >

基本上，我正在设计用于视频会议的应用，

我已经使用mediaRecorder将getUserMedia获得的流记录到Blob中，并将这些Blob发送到服务器的套接字（“视频事件”）

服务器接收到从中发出事件的roomName，userId和视频块，并将事件${userId}VideoData广播到特定的房间

当用户连接服务器时，开始接收blob并开始广播事件${userId}VideoData，并将{userId，blob}作为要传递给客户端的值

当另一个用户连接他的网络摄像头时，也将其发送到服务器...在该用户接收到他的视频Blob并能够播放之前，该用户已连接，该用户也收到了先前连接的用户的视频Blob但无法播放它们，第一次记录到sourceBuffer时，会记录以上警告，之后再次抛出错误！

错误是连接的用户看不到在他之前连接的其他用户的视频，但能够看到在他之后连接的用户的视频！

但是在他之前连接的用户可以观看他的视频而没有任何错误

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）