I am creating a Video Chat App with WerbRTC + NodeJS + Socket.io but I have problems to recover the video and show in a video HTML element.
Client 1, I capture the stream blob with next code
this.mediaRecorder = new MediaRecorder(this.stream, options);
this.mediaRecorder.ondataavailable = dataAvailable.bind(this);
this.mediaRecorder.start(10);
function dataAvailable(e){
socket.emit('streaming', e.data);
};
Server I just receive the bytes and resend to the client2
this.streaming = function(data){
for (var key in clients) {
if(key != data.clientID){
var client = clients[key];
client.emit('streaming', data);
};
};
}.bind(this); socket.on('streaming', this.streaming);
All above is working, but my question is when I receive the ArrayBuffer how I process it to display the streaming again in a video tag elements, I try with the next code, but not work.
Client 2
this.type = 'video/webm;codecs=vp9';
this.blob = new Blob([], { type:this.type});
this.receiveStream = function(data){
var stream = data.stream;
if(stream.byteLength <= 0) return;
this.blob = new Blob([this.blob, new Uint8Array(stream)], { type:this.type});
this.nodes.video.src = URL.createObjectURL(this.blob);
}
Thank you....