JPEG 实时流 html 慢

Question

从原始视频源，我正在尝试使用 linux.

在嵌入式 platform/board 中尽快将 jpeg 图像流式传输到 html

在 gstreamer 端，我可以看到 jpeg 图像以 ~37fps 的速度更新，管道如下所示：

appscr -> videoconvert -> jpegenc -> multifilesink

基于这个question我创建了下一个嵌入式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>

和 java 脚本：

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

从 PC 打开网络浏览器并输入 platform/board IP 我可以看到视频流，但问题是图像更新太慢，我希望更多 fluid/fast给定源帧速率 (37fps) 的视频。

有谁知道更新慢的原因是什么？

Answer 1

我认为这值得进行适当的分析，因为它是一个有趣的主题（至少对我而言）。

测试环境

我在同一局域网内的两台电脑上完全复制了场景。

PC 1 正在使用以下管道从实时流创建 jpeg 图像

gst-launch-1.0 -v rtspsrc location="rtsp://freja.hiof.no:1935/rtplive/_definst_/hessdalen03.stream" \
! rtph264depay ! avdec_h264 \
! timeoverlay halignment=right valignment=bottom \
! videorate ! video/x-raw,framerate=37000/1001 ! jpegenc ! multifilesink location="snapshot.jpeg"

并使用 python 的简单 http 服务器

服务 index.html、app.js 和（不断更新）snapshot.jpeg

python -m SimpleHTTPServer 8080

PC 2 正在使用 Chrome 浏览器（使用开发人员工具 window）访问 index.html 并显示图像。

用于测试目的

我在 gstreamer 管道中添加了 timeoverlay，它在右下角的每个图像上添加了时间戳。
我将 JS 函数的刷新周期增加到 1000 毫秒。

测试结果分析

这里是浏览器的网络日志

时间列显示浏览器从服务器获取（下载）一幅图像所花费的时间（以毫秒为单位）。这些周期 并不总是相同的，对于大小为 ~87KB 的图像，平均为 ~100 毫秒。

抓取时间间隔实际包括：

HTTP GET 从浏览器到达服务器所需的时间间隔，
服务器需要从磁盘读取图像并将其作为 HTTP 响应发回的时间间隔，
HTTP 响应到达浏览器所需的时间间隔。

第一个和第三个间隔直接取决于"internet"环境：如果浏览器"farther"远离服务器间隔会更大。

第二个间隔与服务器成正比"speed"：服务器从磁盘读取图像和处理 HTTP 的速度有多快request/response

还有一个与运行浏览器的 PC "speed" 成正比的区间：PC 处理 HTTP GET request/response 和 re-render 图片的速度。

结论

有很多不可避免的延迟间隔，这取决于测试环境——互联网和服务器机器的能力以及带有浏览器的客户端机器——你的代码在浏览器中的执行速度与它一样快可能可以。

无论如何，37 fps 听起来像是一些直播视频。有专门的协议可以通过提供视频 chunk-by-chunk（每个块包含许多视频帧）在浏览器中显示流式视频（例如 MPEG DASH or HLS）。

JPEG 实时流 html 慢

JPEG live stream in html slow

html

jpeg

gstreamer