57237

How to send getusermedia recorded stream to server nodejs realtime

Question:

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 without blinking of video player. Here is my server code

var express = require("express"); var app = express(); var http = require("http").Server(app); var io = require("socket.io")(http); var fs = require("fs") app.use(express.static('public')) app.get("/", function(req, res){ res.sendFile(__dirname+ "/public/index.html"); }); io.on("connection", function(socket) { console.log("A user is connected"); socket.on("send", function(data){ console.log(data); socket.emit("data", data); }); socket.on("disconnect", function() { console.log("A user is disconnected"); }); }); http.listen(3000, function(){ console.log("Server is started at port 3000\nTo close use Ctrl+C"); });

And here is my client side code,

<html> <head><title>Testing</title> <script src="socket.io/socket.io.js"></script> <script type="text/javascript" src="MediaStreamRecorder.js"></script> </head> <body> <video autoplay="true" id="video"></video> <script type="text/javascript"> var socket = io(); window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL; socket.on("data", function(data){ var binaryData = []; binaryData.push(data); videoElement = document.getElementById('video'); videoElement.src = window.URL.createObjectURL(new Blob(binaryData, {type: "video/webm"})); }); var mediaConstraints = { video: true }; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError); function onMediaSuccess(stream) { var arrayOfStreams = [stream]; var medias = new MediaStreamRecorder(stream); medias.ondataavailable = function(blob) { socket.emit("send", blob); }; medias.start(); } function onMediaError(e) { console.error('media error', e); } </script> </body> </html>

I have change timeslice value in MediaStreamRecorder api to 500 default. So, sending data to server after 500 millisecond. But is blinking in the webpage. I have to this to make it real time. Any help will appreciated.

Answer1:

<blockquote>

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

</blockquote>

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"); function onMediaSuccess(stream) { if (videoElement.srcObject === null) { videoElement.srcObject = stream } } <hr />

<pre class="snippet-code-js lang-js prettyprint-override">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); } function onMediaSuccess(stream) { if (videoElement.srcObject === null) { videoElement.srcObject = stream } } <pre class="snippet-code-html lang-html prettyprint-override"><video id="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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/SourceBuffer" rel="nofollow">SourceBuffer</a>, see <a href="https://stackoverflow.com/questions/38081377/unable-to-stream-video-over-a-websocket-to-firefox/" rel="nofollow">Unable to stream video over a websocket to Firefox</a>.

Answer2:

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.

<a href="https://www.youtube.com/watch?v=ieBtXwHvoNk" rel="nofollow">https://www.youtube.com/watch?v=ieBtXwHvoNk</a>

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 : <a href="https://github.com/socketio/socket.io/issues/1175" rel="nofollow">https://github.com/socketio/socket.io/issues/1175</a>

I hope this would help.

Recommend

  • Video.js Stalling during file load on iOS
  • Find current Slide div and add Class
  • Creating a simple, full-width, infinite carousel with jQuery
  • Read quicktime movie from servlet in a webpage?
  • Unmute facebook live video
  • Flowplayer playing over everything
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • How to view images from protected folder with php?
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • Display images in Django
  • Play WS (2.2.1): post/put large request
  • Alert pop up with LWUIT
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • HTML download movie download link
  • Resize panoramic image to fixed size
  • Updating server-side rendering client-side
  • MySQL WHERE-condition in procedure ignored
  • Importing jscolor library in angular 2
  • Web-crawler for facebook in python
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • How to disable jQuery.jplayer autoplay?
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • AngularJs get employee from factory
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • trying to dynamically update Highchart column chart but series undefined
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How to stop GridView from loading again when I press back button?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • java string with new operator and a literal