如何使用socket（.io）从node.js服务器将音频/视频流式传输到html5页面

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 that i have using simple http. I set up socket.io in my project, both on the client (mobile web application) and the server, but i can't figure out nor find on the web how to properly send data and lead it to a tag.

我需要从node.js服务器流式传输mp3或mp4,并在html5页面上观看它。我正在尝试使用socket.io来加速通信,我希望它会降低我使用简单http的延迟。我在我的项目中设置了socket.io,无论是在客户端(移动Web应用程序)还是服务器上,但我无法弄清楚,也无法在网上找到如何正确发送数据并将其引导到标签。

3 个解决方案

#1

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

请参阅socket.io-stream项目https://www.npmjs.org/package/socket.io-stream

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

尝试使用ffmpeg进行同步音频/视频流。在HTML5中,当您在音频/视频标签的src元素中提供服务器的源地址时,音频和视频标签会自动播放。

#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";
      videoStreamUrl = window.URL.createObjectURL(stream);
      video.src = videoStreamUrl;
    }, function () {
      console.log('streaming error');
    });
  };

working example anonymous chat video test

工作示例匿名聊天视频测试

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

原始链接http://html5.by/blog/html5-image-capture-getusermedia-stream-api-mirror/

#1