使用Gstreamer和JavaScript setTimeout(）创建jpeg快照的实时视频

Create live video of jpeg snapshots using Gstreamer and JavaScript setTimeout()

本文关键字：jpeg 创建 快照 实时视频 Gstreamer JavaScript setTimeout 使用      更新时间：2023-09-26

我正在尝试使用网页上的标签创建实时"视频"流。

Gstreamer管道使用video4linux2以每秒15帧的帧速率从网络摄像头上获取新帧，不断覆盖文件"snapshot.jpeg"。

一个网页在没有缓存的情况下每100毫秒渲染一次图像。

问题是，我在许多帧上得到了图像源的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="snapshot" src="snapshot.jpeg"/>
    </body>
</html>

JavaScript

$(function() {
    function refreshImage(){
    $("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
    setTimeout(refreshImage, 100);
    }
    refreshImage();
})

尝试将setTimeout挂接到Image.onload:

$(function() {
    function refreshImage(){
        $("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
    }
    $("#snapshot").onload = function(){
        setTimeout(refreshImage, 100);
    }
    refreshImage();
})
相关文章：