如何使用套接字 (.io) 将音频/视频从 node.js 服务器流式传输到 html5 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23822821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Stream audio/video with socket (.io) from node.js server to html5 page
提问by Alessandro Annini
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 应用程序）和服务器上，但我无法弄清楚也无法在网络上找到如何正确发送数据并将其引导到标签。
回答by Nikolay Lukyanchuk
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
回答by Munam Tariq
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 元素中提供服务器的源地址时，会自动播放它。
回答by Roman Vasilyev
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/
