Javascript 将视频流传输到Web浏览器
我想在web浏览器中显示实时视频流。（如果可能的话，与IE、Firefox和Chrome的兼容性将非常棒。）其他人将负责视频流，但我必须能够接收和显示视频。我将通过UDP接收视频，但目前我只是使用VLC将视频流传输给自己进行测试。是否有一个开源库可以帮助我使用HTML和/或JavaScript实现这一点？或者一个好的网站，可以帮助我找到如何做到这一点，我自己 我读过一些关于RTSP的文章，它似乎是类似这样的东西的传统选项。如果我不能使用UDP实现这一点，那么这可能就是我必须依靠的，但如果是这样，我仍然不确定如何使用RTSP/RTMP/RTP实现这一点，或者所有这些首字母缩写词之间的区别是什么（如果有的话） 我认为HTTP自适应流媒体可能是一段时间内的最佳选择，但似乎所有使用它的解决方案都是专有的（Microsoft IIS平滑流媒体、Apple HTTP Live流媒体或Adobe HTTP Dynamic流媒体），而我自己也没有多少运气弄清楚如何实现这一点。MPEG-DASH听起来也是一个很棒的解决方案，但它似乎还没有投入使用，因为它仍然很新。但现在我被告知我应该期望通过UDP接收视频，所以这些解决方案可能对我来说不再重要了Javascript 将视频流传输到Web浏览器,javascript,html,video,streaming,video-streaming,Javascript,Html,Video,Streaming,Video Streaming,我想在web浏览器中显示实时视频流。（如果可能的话，与IE、Firefox和Chrome的兼容性将非常棒。）其他人将负责视频流，但我必须能够接收和显示视频。我将通过UDP接收视频，但目前我只是使用VLC将视频流传输给自己进行测试。是否有一个开源库可以帮助我使用HTML和/或JavaScript实现这一点？或者一个好的网站，可以帮助我找到如何做到这一点，我自己 我读过一些关于RTSP的文章，它似乎是类似这样的东西的传统选项。如果我不能使用UDP实现这一点，那么这可能就是我必须依靠的，但如果是这样，
我已经在谷歌上搜索了好几天，没有找到任何东西来帮助我实现它。我能找到的所有文章都解释了这些技术（如RTSP、HTTP自适应流媒体等）或工具，您可以购买这些工具通过web流媒体播放自己的视频。非常感谢您的指导 真正的跨浏览器流媒体只能通过Flash等“富媒体”客户端实现，这就是为什么几乎所有视频网站默认使用Adobe专有的
.flv对于非实时视频，HTML5中嵌入视频的出现显示了希望，使用画布和JavaSCript流媒体在技术上应该是可行的，但处理流和预加载二进制视频对象必须用JavaSCript完成，而且不会非常简单。大多数视频网站使用FLV是不正确的，MP4是最广泛支持的格式，也可以通过Flash播放器播放。 要实现您的目标，最简单的方法是打开一个S3Amzon/cloudFront帐户并与JW player合作。然后您可以访问RTMP软件来流式传输视频和音频。这项服务很便宜。如果您想了解更多信息，请查看以下教程： 从最底层开始，一直到最高层的教程
我希望这将帮助您上路。如果您不需要声音，您可以发送标题如下的JPEG： 内容类型：多部分/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);
var http=require（'http'））
const cv=require（'opencv4nodejs'）；
var m=新的cv.Mat（300，300，cv.cv_8UC3）；
var-cnt=0；
常数蓝=新cv.Vec3（255、220、120）；
常量黄色=新的cv.Vec3（255,220,0）；
var lastTs=Date.now（）；
http.createServer（（req，res）=>{
如果（请求url=='/'））{
res.end（“iframe{transform:scale（.67）}这是一个流式视频：
”+
"")
}else if（请求url='/frame'）{
res.writeHead（200，{'Content-Type'：'multipart/x-mixed-replace；boundary=myboundary'}）；
var x=0；
var fps=0，fcnt=0；
var next=函数（）{
var ts=Date.now（）；
var m1=m.copy（）；
fcnt++；
如果（ts lasts>1000）{
lastTs=ts；
fps=fcnt；
fcnt=0；
}
m1.putText（`frame${cnt}FPS=${FPS}`，新的cv.Point2（20,30），1,1，蓝色）；
m1.画圈（新等高线点2（x，50），10，黄色，-1）；
x+=1；
如果（x>m.cols）x=0；
cnt++；
var buf=cv.imencode（“.jpg”，m1）；
res.write（“--myboundary\r\n内容类型：image/jpeg\r\nDaemonId:0x00258009\r\n\r\n”）；
res.write（buf，函数（）{
next（）；
});
};
next（）；
}
}).听（80）；
更新：如果您将其流式传输到html img标记中，它也会起作用。那么您是说目前确实没有一种处理HTML5流式传输的好方法吗？如果是这样的话，那么我想我需要停止使用HTML5，如果有另一种方法可以让视频流在web浏览器中工作，那就好了。这就是为什么我试图研究我在问题中提到的一些其他选项（例如RTSP）。还有，当你说“预加载二进制视频对象”时，你是什么意思。我不太确定视频对象是如何二进制的。这是否意味着能够关闭/打开视频？感谢教程的链接，它们看起来非常全面和有用。