使用Gstreamer和JavaScript创建jpeg快照的实时视频setTimeout（） [英] Create live video of jpeg snapshots using Gstreamer and JavaScript setTimeout()
问题描述
一个Gstreamer管道不断地用一个文件snapshot.jpeg覆盖了一个文件snapshot.jpeg使用video4linux2以15 fps的帧速率从网络摄像头抓取的新帧。
网页呈现图像时不会每隔100 ms缓存一次。
问题在于，我在许多帧中为图像源获取 ERR_CONTENT_LENGTH_MISMATCH （在浏览器控制台中）。这在浏览器中显示为一个断开的链接。
GStreamer 0.10语法
gst-launch v4l2src！ video / x-raw-yuv，width = 640，height = 480，framerate = 15/1！ jpegenc！ multifilesink location = / var / www / video / snapshot.jpeg
HTML
<！DOCTYPE html>
< html>
< head>
< meta charset ='UTF-8'/>
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"> ;</script>
< script src =app.js>< / script>
< / head>
< body>
< img id =snapshotsrc =snapshot.jpeg/>
< / body>
< / html>
JavaScript 尝试将setTimeout挂接到Image.onload： I am trying to create a live "video" stream using an tag on a web page. A Gstreamer pipeline continually overwrites a file "snapshot.jpeg" with a new frame grabbed from a webcam using video4linux2 with a framerate of 15 fps. A web page renders the image without caching every 100 ms. The problem is that I get ERR_CONTENT_LENGTH_MISMATCH (in browser console) for the image source on many frames. This is shown as a broken link in the browser. GStreamer 0.10 syntax HTML JavaScript
Try to hook setTimeout to Image.onload:
这篇关于使用Gstreamer和JavaScript创建jpeg快照的实时视频setTimeout（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
< $ p $ $（function（）{
function refreshImage（）{
$（＃snapshot）。attr（src，'snapshot.jpeg？' + Math.random（））;
setTimeout（refreshImage，100）;
}
refreshImage（）;
}）
<$ $（$＃$）$（＃snapshot）。attr（src，'snapshot.jpeg？'）+ $（$）$（函数（）{
函数refreshImage（）{
$ （）;
$（＃snapshot）。onload = function（）{
setTimeout（refreshImage，100）;
}
refreshImage（）;
}）
gst-launch v4l2src ! video/x-raw-yuv, width=640, height=480, framerate=15/1 ! jpegenc ! multifilesink location=/var/www/video/snapshot.jpeg
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<img id="snapshot" src="snapshot.jpeg"/>
</body>
</html>
$(function() {
function refreshImage(){
$("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
setTimeout(refreshImage, 100);
}
refreshImage();
})
$(function() {
function refreshImage(){
$("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
}
$("#snapshot").onload = function(){
setTimeout(refreshImage, 100);
}
refreshImage();
})
