我在使用视频流时遇到问题。
我正在使用套接字 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 上面的警告会被记录,之后如果再次附加,则会引发错误!
错误是连接的用户看不到在他之前连接的其他用户的视频,但能够看到在他之后连接的用户的视频!
但在他之前连接的用户可以毫无错误地看到他的视频