Question

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

我已经阅读了一些关于RTSP的内容，这似乎是像这样的传统选项。如果我不能使用UDP来实现这一点，那么我可能会依赖它，但如果是这种情况，我仍然不确定如何使用RTSP / RTMP / RTP，或者所有这些之间的差异首字母缩略词，如果有的话。

我认为HTTP自适应流可能是一段时间内最好的选择，但似乎所有使用它的解决方案都是专有的（Microsoft IIS Smooth Streaming，Apple HTTP Live Streaming或Adobe HTTP Dynamic Streaming），而且我不是'我有很多运气想知道如何自己完成它。 MPEG-DASH听起来也是一个很棒的解决方案，但它似乎还没有被使用，因为它仍然是如此新颖。但现在我被告知我应该期待通过UDP接收视频，所以这些解决方案可能对我来说无关紧要。

我已经谷歌搜索这些东西好几天没有太多运气找到任何东西来帮助我实现它。我所能找到的只是解释这些技术的文章（例如RTSP，HTTP自适应流媒体等）或者您可以购买的工具，以便通过网络传输您自己的视频。非常感谢您的指导！

Answer 1

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

我希望这会帮助你顺利开始。

Answer 2

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

对于非实时视频，HTML5中的视频嵌入的出现显示了承诺，并且使用Canvas和JavaSCript流应该在技术上是可行的，但处理流和预加载二进制视频对象必须在JavaScript中完成并且不会非常简单

Answer 3

如果您不需要声音，则可以发送带有以下标题的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标签，它也可以工作。

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

3 个答案: