将视频流式传输到Web浏览器
我想在web浏览器中显示实时视频流。(如果可能的话，与IE、Firefox和Chrome的兼容性会更好。)其他人将负责流式视频，但我必须能够接收和显示它。我将通过UDP接收视频，但现在我只是使用VLC将其流式传输给自己用于测试目的。有没有开源库可以帮助我使用超文本标记语言和/或JavaScript来实现这一点？或者是一个好的网站，可以帮助我弄清楚如何自己做这件事？
我读过一些关于RTSP的文章，它似乎是处理这类事情的传统选择。如果我不能使用UDP实现这一点，我可能不得不求助于此，但如果是这样的话，我仍然不确定如何使用RTSP/RTMP/RTP来实现这一点，或者所有这些缩写之间的区别是什么，如果有的话。
我认为HTTP自适应流在一段时间内可能是最好的选择，但似乎使用它的所有解决方案都是专有的(Microsoft IIS平滑流、Apple HTTP Live流或Adobe HTTP Dynamic流)，而且我没有多少运气知道如何自己完成它。MPEG-DASH听起来也像是一个很棒的解决方案，但它似乎还没有投入使用，因为它仍然很新。但现在我被告知，无论如何我都应该期待通过UDP收到视频，所以这些解决方案对我来说可能已经不再重要了。
我已经在谷歌上搜索了几天，但没有找到任何可以帮助我实现它的东西。我能找到的都是解释技术的文章(例如RTSP、HTTP自适应流等)。或者你可以购买的工具，在网络上播放你自己的视频。您的指导将不胜感激！
回答 3
Stack Overflow用户
发布于 2012-01-31 21:19:29
大多数视频网站使用FLV是不正确的，MP4是最受支持的格式，它也是通过Flash播放器播放的。实现你想要的最简单的方法是打开一个S3Amzon/cloudFront帐户，然后使用JW player。然后，您可以使用RTMP软件来流式传输视频和音频。这项服务非常便宜。如果你想了解更多，请查看这些教程：http://www.miracletutorials.com/category/s3-amazon-cloudfront/从底部开始，然后逐步向上学习更高层次的教程。
我希望这能帮助你走上自己的路。
Stack Overflow用户
发布于 2012-01-24 09:05:31
真正的跨浏览器流只能通过像Flash这样的“富媒体”客户端，这就是为什么几乎所有的视频网站都默认使用奥多比专有的.flv格式提供视频。
对于非直播视频，HTML5中视频嵌入的出现显示出了希望，使用Canvas和JavaSCript流在技术上应该是可行的，但处理流和预加载二进制视频对象必须在JavaScript中完成，并且不会非常简单。
Stack Overflow用户
发布于 2020-02-17 02:05:55
如果你不需要声音，你可以发送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标签中，它也可以工作。
https://stackoverflow.com/questions/8980858
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号