2

我在使用视频流时遇到问题。

我正在使用套接字 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 和视频 blob，并将事件广播${userId}VideoData到特定房间

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

当另一个用户连接他的网络摄像头时，他的网络摄像头源也被发送到服务器......在他之前连接的用户接收到他的视频 blob 并能够播放它们，这个用户也接收到以前连接的用户的视频 blob 但无法播放它们，首先附加到 sourceBuffer 上面的警告会被记录，之后如果再次附加，则会引发错误！

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

但在他之前连接的用户可以毫无错误地看到他的视频

4

0 回答 0