javascript 将视频流式传输到 Web 浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8980858/
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
Streaming Video to Web Browser
提问by Steph
I would like to display a live video stream in a web browser. (Compatibility with IE, Firefox, and Chrome would be awesome, if possible.) Someone else will be taking care of streaming the video, but I have to be able to receive and display it. I will be receiving the video over UDP, but for now I am just using VLC to stream it to myself for testing purposes. Is there an open source library that might help me accomplish this using HTML and/or JavaScript? Or a good website that would help me figure out how to do this on my own?
我想在网络浏览器中显示实时视频流。（如果可能，与 IE、Firefox 和 Chrome 的兼容性会很棒。）其他人将负责流式传输视频，但我必须能够接收和显示它。我将通过 UDP 接收视频，但现在我只是使用 VLC 将其流式传输给自己以进行测试。是否有开源库可以帮助我使用 HTML 和/或 JavaScript 完成此任务？或者一个好的网站可以帮助我弄清楚如何自己做到这一点？
I've read a bit about RTSP, which seems like the traditional option for something like this. That might be what I have to fall back on if I can't accomplish this using UDP, but if that is the case I still am unsure of how to go about this using RTSP/RTMP/RTP, or what the differences between all those acronyms are, if any.
我读过一些关于 RTSP 的文章，这似乎是此类内容的传统选项。如果我无法使用 UDP 完成此操作，那可能是我必须依靠的，但如果是这种情况，我仍然不确定如何使用 RTSP/RTMP/RTP 来解决此问题，或者所有这些之间的区别是什么缩写词是，如果有的话。
I thought HTTP adaptive streaming might be the best option for a while, but it seemed like all the solutions using that were proprietary (Microsoft IIS Smooth Streaming, Apple HTTP Live Streaming, or Adobe HTTP Dynamic Streaming), and I wasn't having much luck figuring out how to accomplish it on my own. MPEG-DASH sounded like an awesome solution as well, but it doesn't seem to be in use yet since it is still so new. But now I am told that I should expect to receive the video over UDP anyways, so those solutions probably don't matter for me anymore.
我认为 HTTP 自适应流媒体可能是一段时间以来的最佳选择，但似乎所有使用它的解决方案都是专有的（Microsoft IIS Smooth Streaming、Apple HTTP Live Streaming 或 Adobe HTTP Dynamic Streaming），而且我没有太多幸运地弄清楚如何自己完成它。MPEG-DASH 听起来也是一个很棒的解决方案，但它似乎还没有被使用，因为它仍然很新。但是现在我被告知无论如何我应该期望通过 UDP 接收视频，所以这些解决方案对我来说可能不再重要了。
I've been Googling this stuff for several days without much luck on finding anything to help me implement it. All I can find are articles explaining what the technologies are (e.g. RTSP, HTTP Adaptive Streaming, etc.) or tools that you can buy to stream your own videos over the web. Your guidance would be greatly appreciated!
我已经在谷歌上搜索这些东西好几天了，但没有找到任何帮助我实现它的东西。我所能找到的只是解释什么是技术（例如 RTSP、HTTP 自适应流媒体等）的文章，或者您可以购买的工具来通过网络流式传输您自己的视频。您的指导将不胜感激！
采纳答案by RudolfB
It is incorrect that most video sites use FLV, MP4 is the most widely supported format and it is played via Flash players as well. The easiest way to accomplish what you want is to open a S3Amzon/cloudFront account and work with JW player. Then you have access to RTMP software to stream video and audio. This service is very cheap. if you want to know more about this, check out these tutorials: http://www.miracletutorials.com/category/s3-amazon-cloudfront/Start at the bottom and work your way up to the tutorials higher up.
大多数视频网站使用 FLV 是不正确的，MP4 是最广泛支持的格式，它也可以通过 Flash 播放器播放。完成您想要的最简单的方法是开设一个 S3Amzon/cloudFront 帐户并与 JW 播放器合作。然后您就可以使用 RTMP 软件来流式传输视频和音频。这项服务非常便宜。如果您想了解更多相关信息，请查看以下教程：http: //www.miracletutorials.com/category/s3-amazon-cloudfront/从底部开始，逐步学习到更高的教程。
I hope this will help you get yourself on your way.
我希望这能帮助你走上正轨。
回答by Stepan Yakovenko
If you don't need sound, you can send JPEGs with header like this:
如果您不需要声音，您可以发送带有如下标题的 JPEG：
Content-Type: multipart/x-mixed-replace
内容类型：multipart/x-mixed-replace
This is a simple demo with nodejs, it uses library opencv4nodejs to generate images. You can use any other HTTP server which allows to append data to the socket while keeping connection opened. Tested on Chrome and FF on Ubuntu Linux.
这是一个使用 nodejs 的简单演示，它使用库 opencv4nodejs 来生成图像。您可以使用任何其他 HTTP 服务器，它允许在保持连接打开的同时将数据附加到套接字。在 Ubuntu Linux 上的 Chrome 和 FF 上测试。
To run the sample you will need to install this library with npm install opencv4nodejs, it might take while, then start the server like this: node app.js, here is app.js itself
要运行示例，您需要使用npm install opencv4nodejs安装此库，可能需要一段时间，然后像这样启动服务器：node app.js，这是 app.js 本身
var http = require('http')
const cv = require('opencv4nodejs');
var m=new cv.Mat(300, 300, cv.CV_8UC3);
var cnt = 0;
const blue = new cv.Vec3(255, 220, 120);
const yellow = new cv.Vec3(255, 220, 0);
var lastTs = Date.now();
http.createServer((req, res) => {
if (req.url=='/'){
res.end("<!DOCTYPE html><style>iframe {transform: scale(.67)}</style><html>This is a streaming video:<br>" +
"<img src='/frame'></img></html>")
} else if (req.url=='/frame') {
res.writeHead(200, { 'Content-Type': 'multipart/x-mixed-replace;boundary=myboundary' });
var x =0;
var fps=0,fcnt=0;
var next = function () {
var ts = Date.now();
var m1=m.copy();
fcnt++;
if (ts-lastTs > 1000){
lastTs = ts;
fps = fcnt;
fcnt=0;
}
m1.putText(`frame ${cnt} FPS=${fps}`, new cv.Point2(20,30),1,1,blue);
m1.drawCircle(new cv.Point2(x,50),10,yellow,-1);
x+=1;
if (x>m.cols) x=0;
cnt++;
var buf = cv.imencode(".jpg",m1);
res.write("--myboundary\r\nContent-type:image/jpeg\r\nDaemonId:0x00258009\r\n\r\n");
res.write(buf,function () {
next();
});
};
next();
}
}).listen(80);
A bit later I've found this example with some more details in python: https://blog.miguelgrinberg.com/post/video-streaming-with-flask
稍后我在 python 中找到了一些更多细节的例子：https: //blog.miguelgrinberg.com/post/video-streaming-with-flask
UPDATE: it also works, if you stream this into html img tag.
更新：如果您将其流式传输到 html img 标签中，它也可以工作。
回答by buley
True cross-browser streaming is only possible through "rich media" clients like Flash, which is why almost all video websites default to serving video using Adobe's proprietary .flvformat.
真正的跨浏览器流式传输只能通过像 Flash 这样的“富媒体”客户端实现，这就是为什么几乎所有视频网站都默认使用 Adobe 的专有.flv格式提供视频的原因。
For non-live video the advent of video embeds in HTML5 shows promise, and using Canvas and JavaSCript streaming should be technically possible, but handling streams and preloading binary video objects would have to be done in JavaScript and would not be very straightforward.
对于非实时视频，HTML5 中视频嵌入的出现显示了希望，使用 Canvas 和 JavaSCRipt 流在技术上应该是可能的，但处理流和预加载二进制视频对象必须在 JavaScript 中完成，并且不会很简单。
