How To Send Getusermedia Recorded Stream To Server Nodejs Realtime

I am able to send stream blob using socket.io to node js server. But, it is blinking while updating the blob data in video player. I want it to run smooth. How I can send data with

Solution 1:

You're using socket.io which uses TCP connection. If you want to make your application real-time something like skype, you must use UDP connection.

If one frame lags behind then your application should ignore this but in your case you're using TCP connection so it will always deliver in order. Firewall is also an issue for TCP connection. You said that you tried setting up timeout to 500 ms which is too big for real-time application that's why your video is blinking.

If you're willing to give up on TCP connection, I have a small solution for this. I've tried this and it is working fine.

https://www.youtube.com/watch?v=ieBtXwHvoNk

Just one problem is that in this case you cannot send your packets on WAN directly as you can easily do in websockets. You have to implement STUN/TURN or something like that on your server.

If you still have some doubts then see this github issue and read all the replies : https://github.com/socketio/socket.io/issues/1175

I hope this would help.

Solution 2:

But, it is blinking while updating the blob data in video player.

You are changing the .src of the <video> element.

URL.createObjectURL() and MediaStreamRecorder are not necessary.

Instead of changing the .src of <video> element you can pass the MediaStream object once and set <video> element .srcObject to the passed MediaStream.

videoElement = document.getElementById("video");

functiononMediaSuccess(stream) {
  if (videoElement.srcObject === null) {
    videoElement.srcObject = stream
  }
}

---

var videoElement = document.getElementById("video");

videoElement.oncanplay = function() {
  videoElement.play();
}

var media = document.createElement("video");

media.src = "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4";

media.oncanplay = function() {
  media.play();
  var stream = media.captureStream();
  onMediaSuccess(stream);
}

functiononMediaSuccess(stream) {
  if (videoElement.srcObject === null) {
    videoElement.srcObject = stream
  }
}

<videoid="video"></video>

If requirement is to send a Blob you can use MediaSource, convert Blob to an ArrayBuffer using FileReader or fetch() and append the ArrayBuffer to SourceBuffer, see Unable to stream video over a websocket to Firefox.