How to Stream audio/video with socket (.io) from node.js server to html5 page

Question

I need to stream mp3 or mp4 from a node.js server and watch it on a html5 page. I am trying to use socket.io to sped up communications and i hope it will lower the latency t

Answer 1

please see socket.io-stream project https://www.npmjs.org/package/socket.io-stream

Answer 2

Try ffmpeg to make sync audio/video streaming. In HTML5 audio and video tag automatically play it when you give source address of server in src element of audio/video tag.

Answer 3

Check this example:

    var captureMe = function () {
      if (!videoStreamUrl) alert('error')

      context.translate(canvas.width, 0);
      context.scale(-1, 1);

context.drawImage(video, 0, 0, video.width, video.height);
      var base64dataUrl = canvas.toDataURL('image/png');
      context.setTransform(1, 0, 0, 1, 0, 0);
      var img = new Image();
      img.src = base64dataUrl;
      window.document.body.appendChild(img);
    }

    button.addEventListener('click', captureMe);

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL;

    navigator.getUserMedia({video: true}, function (stream) {
      allow.style.display = "none";
      try {
        video.srcObject = stream;
      } catch (error) {
        video.src = window.URL.createObjectURL(stream);
      }
    }, function () {
      console.log('streaming error');
    });
  };

working example anonymous chat video test

original link http://html5.by/blog/html5-image-capture-getusermedia-stream-api-mirror/