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

发布于 2024-12-29 02:55:37 字数 718 浏览 1 评论 0原文

我想在网络浏览器中显示实时视频流。（如果可能的话，与 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 自适应流式传输等）或可以购买用于在网络上流式传输自己的视频的工具的文章。非常感谢您的指导！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终止放荡 2025-01-05 02:55:37

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

我希望这能帮助您走上自己的道路。

回复收藏 0 原文

长发绾君心 2025-01-05 02:55:37

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

Content-Type: multipart/x-mixed-replace

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

要运行示例，您需要使用 npm install opencv4nodejs 安装此库，这可能需要一段时间，然后像这样启动服务器：node app.js，这里是应用程序.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 标记中，它也可以工作。

If you don't need sound, you can send JPEGs with header like this:

Content-Type: 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.

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

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

UPDATE: it also works, if you stream this into html img tag.

回复收藏 0 原文