JPEG прямой эфир в html медленно - PullRequest
Новая
       7

JPEG прямой эфир в html медленно

1 голос
/ 23 января 2020

Из необработанного источника видео я пытаюсь максимально быстро передавать изображения в формате JPEG в html на встроенной платформе / плате, используя linux.

На стороне gstreamer я вижу, что Изображение JPEG обновляется со скоростью ~ 37 кадров в секунду, конвейер выглядит следующим образом: 

appscr -> videoconvert -> jpegenc -> multifilesink

на основе этого вопроса Я создал следующий встроенный 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();
})

Открытие веб-браузера с P C и ввод IP-адреса платформы / платы. Я вижу видеопоток, но проблема в том, что изображение тоже обновляется. медленный, и я ожидал бы более плавное / быстрое видео, учитывая исходную частоту кадров (37 кадров в секунду).

Кто-нибудь знает, что может быть причиной медленного обновления?

1 Ответ

1 голос
/ 25 января 2020

Я думаю, что это заслуживает надлежащего анализа, поскольку это интересная тема (по крайней мере, для меня).

Среда тестирования

Я полностью воспроизвел сценарий на 2 компьютерах в одном и том же LAN.

P C 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"

и индексом обслуживания. html, приложение. js и (постоянно обновляется) snapshot.jpeg с простым http-сервером python 

python -m SimpleHTTPServer 8080

P C 2 осуществляет доступ к индексу. html с использованием браузера Chrome (с окно инструментов разработчика) и отображение изображений.

Для целей тестирования

  • Я добавил timeoverlay в конвейер gstreamer, который добавляет метку времени для каждого изображения в правом нижнем углу.
  • Я увеличил refre sh период в функции JS на 1000 мс.

Анализ результатов теста

Вот сетевой журнал браузера

enter image description here

В столбце времени показаны периоды (в мс), которые браузер тратит на выборку (загрузку) одного изображения с сервера. Эти периоды не всегда совпадают со средним значением ~ 100 мс для изображений размером ~ 87 КБ.

Интервал выборки фактически включает:

  • интервал, который HTTP GET необходимо получить доступ к серверу из браузера, интервал
  • , который необходим серверу для считывания изображения с диска и отправки его обратно в виде ответа HTTP, интервал
  • , необходимый для получения ответа HTTP для браузера.

1-й и 3-й интервал напрямую зависят от среды "inte rnet": если браузер "дальше" от серверного интервала, будет больше.

2-й интервал пропорционален "скорости" сервера: как быстро сервер может считывать образы с диска и обрабатывать HTTP-запрос / ответ

Существует еще один интервал, пропорциональный «скорости» P C, который запускает браузер: как быстро P C может обрабатывать HTTP-запрос GET / ответ и повторное отображение изображения.

Заключение

Существует множество неизбежных интервалов задержки , которые зависят от среды тестирования - inte rnet и возможности серверного компьютера и клиентского компьютера с браузером - и ваш код в браузере выполняется настолько быстро, насколько это возможно.

В любом случае, 37 кадров в секунду звучит как живое потоковое видео, Существуют специализированные протоколы для потоковой передачи видео, которые могут отображаться в браузере (например, MPEG DA SH или HLS ), обслуживая фрагмент видео по частям (где каждый блок содержит много видео кадры).

...