HTML慢速JPEG实时流

Question

从原始视频源中，我试图使用Linux在嵌入式平台/板上尽可能快地将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打开Web浏览器并键入平台/板IP，我可以看到视频流，但是问题是图像更新速度太慢，鉴于源帧速率，我希望视频更加流畅/快速（ 37fps）。

有人知道更新缓慢的原因是什么吗？

Answer 1

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

测试环境

我在同一局域网内的两台PC上完全复制了方案。

[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浏览器（带有开发者工具窗口）访问index.html并显示图像。

出于测试目的

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

测试结果分析

这里是浏览器的网络日志

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

获取时间间隔实际上包括：
HTTP GET从浏览器到达服务器所需的时间间隔，
服务器需要从磁盘读取图像并将其作为HTTP响应发送回的间隔，
HTTP响应到达浏览器所需的时间间隔。
第一和第三间隔直接取决于“互联网”环境：如果浏览器距离服务器“更远”，则间隔会更大。
第二间隔与服务器“速度”成正比：服务器从磁盘读取图像并处理HTTP请求/响应的速度有多快
还有另一个与运行浏览器的PC的“速度”成比例的间隔：PC能够以多快的速度处理HTTP GET请求/响应并重新呈现图像。
结论
有许多
不可避免的延迟间隔
取决于测试环境-Internet以及具有浏览器的服务器和客户端计算机的功能-浏览器中的代码将尽可能快地执行。无论如何，
37 fps听起来像一些实时流视频
。通过提供视频块（每个块包含许多视频帧），有专门的协议可以流传输可在浏览器中显示的视频（例如MPEG DASH或HLS）。

HTML慢速JPEG实时流

问题描述投票：0回答：1

1个回答

最新问题

HTML慢速JPEG实时流

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1