Question

因此，我想建立一个实时流媒体平台，其中一个用户正在实时流媒体，而另一个用户正在观看连接到其生成的URL的视频。

我能够通过RecordRTC录制视频，设置timeSlice和ondataavailable，并通过套接字将每个块发送到服务器。然后，我将该Blob块广播到其他套接字。

现在，如果我是“观察者”，并且在流开始之前进行调优，并且流器开始了流，那么它工作正常。

但是，如果稍后再收听，则在流启动之后，它会崩溃。

我发现我缺少的是发送包含webm头数据的第一个块。

现在，我的问题是，如何用此标头数据包装每个blob块，在服务器或客户端上执行此操作，因此每当观察者连接并且套接字发出信号给他时，它都有正确的标头来播放视频

或者，如果这不是一个好方法（用标题封装每个blob），那么这样做的好方法是什么？

P.S。请不要使用冰服务器或一些复杂的东西，我想保持这个简单

// HOST
this.recorder = new RecordRTCPromisesHandler(this.camera.stream, {
    type: 'video',
    mimeType: 'video/webm',
    timeSlice: 1000,
    ondataavailable: (e) => {
        console.log(e)
        Window.socket.emit('stream', e)
    }

});
this.recorder.startRecording();

// SERVER (just passing data to all other sockets)
// this is where I noticed first Buffer is different from others

socket.on('stream', (data) => {
    socket.broadcast.emit('stream', data)
})

// WATCH
this.stream = new MediaSource();
this.buffer = null;
window.socket.on('stream', data => {
   const blob = new Blob([data], { type: 'video/webm;codecs=vp8,opus' })
   if(this.buffer && this.stream.readyState === 'open')
   // I noticed here if I append "blob", it doesnt work, only appending "data" works 
       this.buffer.appendBuffer(data)
   })

this.video.src = window.URL.createObjectURL(this.stream);
this.stream.addEventListener('sourceopen', (stream) => {
    window.URL.revokeObjectURL(this.video.src);
    this.buffer = this.stream.addSourceBuffer('video/webm;codecs=vp8,opus');
    this.buffer.mode = 'sequence';
}, false)

MediaRecorder用标头包装每个blob

0 个答案: