How To Send Getusermedia Recorded Stream To Server Nodejs Realtime
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.
Post a Comment for "How To Send Getusermedia Recorded Stream To Server Nodejs Realtime"