将视频流式传输到 Web 浏览器答案

【问题标题】：Streaming Video to Web Browser将视频流式传输到 Web 浏览器
【发布时间】：2012-02-17 08:19:44
【问题描述】：

我想在网络浏览器中显示实时视频流。（如果可能的话，与 IE、Firefox 和 Chrome 的兼容性会很棒。）其他人将负责流式传输视频，但我必须能够接收和显示它。我将通过 UDP 接收视频，但现在我只是使用 VLC 将其流式传输给自己以进行测试。是否有一个开源库可以帮助我使用 HTML 和/或 JavaScript 完成此任务？或者一个可以帮助我自己弄清楚如何做到这一点的好网站？

我读过一些关于 RTSP 的文章，这似乎是此类事情的传统选择。如果我无法使用 UDP 完成此操作，那可能是我必须依靠的，但如果是这种情况，我仍然不确定如何使用 RTSP/RTMP/RTP 来解决这个问题，或者所有这些之间的区别是什么首字母缩略词，如果有的话。

我认为 HTTP 自适应流可能是一段时间内的最佳选择，但似乎所有使用它的解决方案都是专有的（Microsoft IIS 平滑流、Apple HTTP 实时流或 Adobe HTTP 动态流），而我不是我很幸运地弄清楚如何自己完成它。 MPEG-DASH 听起来也是一个很棒的解决方案，但它似乎还没有被使用，因为它仍然很新。但是现在我被告知无论如何我都应该期望通过 UDP 接收视频，所以这些解决方案可能对我来说不再重要了。

我已经在谷歌上搜索了几天这些东西，但没有找到任何可以帮助我实现它的东西。我能找到的只是解释这些技术是什么的文章（例如 RTSP、HTTP 自适应流媒体等）或您可以购买的用于在网络上流式传输您自己的视频的工具。非常感谢您的指导！

【问题讨论】：

dynamic adaptive streaming on http

标签： javascript html video streaming video-streaming

【解决方案1】：

如果您不需要声音，您可以发送带有如下标题的 JPEG：

内容类型：multipart/x-mixed-replace

这是一个简单的 nodejs 演示，它使用库 opencv4nodejs 生成图像。您可以使用任何其他 HTTP 服务器，它允许在保持连接打开的同时将数据附加到套接字。在 Ubuntu Linux 上的 Chrome 和 FF 上测试。

要运行示例，您需要使用 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);

稍后我在 python 中找到了这个示例，其中包含更多详细信息：https://blog.miguelgrinberg.com/post/video-streaming-with-flask

更新：如果您将其流式传输到 html img 标签中，它也可以工作。

【讨论】：

【解决方案2】：

大多数视频网站使用 FLV 是不正确的，MP4 是最广泛支持的格式，它也可以通过 Flash 播放器播放。完成您想要的最简单的方法是打开一个 S3Amzon/cloudFront 帐户并使用 JW 播放器。然后，您可以访问 RTMP 软件来流式传输视频和音频。这项服务非常便宜。如果您想了解更多相关信息，请查看以下教程： http://www.miracletutorials.com/category/s3-amazon-cloudfront/ 从底部开始，一直到更高的教程。

我希望这能帮助您顺利上路。

【讨论】：

感谢教程的链接，它们看起来非常全面且很有帮助。

【解决方案3】：

只有通过像 Flash 这样的“富媒体”客户端才能实现真正的跨浏览器流式传输，这就是为什么几乎所有视频网站都默认使用 Adobe 专有的 .flv 格式提供视频。

对于非实时视频，HTML5 中视频嵌入的出现显示出前景，使用 Canvas 和 JavaSCript 流式传输在技术上应该是可行的，但处理流式传输和预加载二进制视频对象必须在 JavaScript 中完成，而且不是很简单.

【讨论】：

那么您是说目前真的没有很好的方法来处理 HTML5 流式传输吗？如果是这种情况，那么我想我需要停止使用 HTML5，如果有另一种方法可以使视频流在网络浏览器中工作，那很好。这就是为什么我试图研究我在问题中提到的其他一些选项（例如 RTSP）。是否也没有直接的方法来实现这些其他选项？
另外，“预加载二进制视频对象”是什么意思。我不太确定视频对象是如何二进制的。这是否意味着能够关闭/打开视频？