Send and Receive Blob + Visual in Video tag (WebRTC/Socket.IO/NodeJS)

Viewed 946

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....

0 Answers
Related