WedX - журнал о программировании и компьютерных науках

Рендеринг потока MJpeg в html5

Я пытаюсь отобразить поток MJpeg в HTML5, используя тег img. Когда я запускаю следующее, все работает отлично, то есть видео начинает воспроизводиться до тех пор, пока видео не закончится:

<img src="https://[some ip]:[port]/mjpg">

Мой вопрос в том, как я могу получить поток кадр за кадром. Для каждого кадра я хочу получить его, сделать что-то (вызов ajax на сервер), а затем отобразить кадр как изображение.

Спасибо.

13.10.2013

Ответы:


1

Вы можете сделать это без повторных запросов Http. Достаточно будет только одного. Вы можете использовать fetch API для создания ReadableStream, перейдите по адресу Reader и продолжайте читать из потока.

Когда у вас есть читатель, продолжайте рекурсивно читать куски из потока. Ищите SOI (0xFF 0xD8) в потоке байтов, который сигнализирует о конце заголовка и начале кадра JPEG. Заголовок будет содержать длину файла JPEG в байтах для чтения. Прочитайте это количество байтов из фрагмента и любых последующих фрагментов и сохраните их в Uint8Array. После того, как вы успешно прочитаете фрейм, преобразуйте его в большой двоичный объект, создайте из него объект UrlObject и назначьте его свойству src вашего объекта img.

Продолжайте делать это, пока соединение не будет закрыто.

Бессовестная вилка. Вот ссылка на рабочий пример на github.

14.09.2018

2

Если камера предоставляет необработанные изображения JPEG (не расширение .MJPEG), вам придется повторно загрузить его вручную (если расширение .MJPEG, браузер сделает все, просто укажите правильный src). Если у вас есть .MJPEG и вы хотите использовать необработанный .JPEG, проверьте документацию вашей камеры. Большинство камер предоставляют как .MJPEG, так и необработанные потоки .JPEG (только по разным URL-адресам).

К сожалению, вы не сможете легко получить изображение через ajax, но вы можете периодически менять src изображения.

Вы можете использовать Date.getTime() и добавить его в строку запроса, чтобы браузер перезагрузил изображение и повторял это каждый раз при загрузке изображения.

Если вы используете jQuery, код будет выглядеть примерно так:

камера.html

<!DOCTYPE html>
<html>

<head>
    <title>ipCam</title>
</head>

<body>
    <h1>ipCam</h1>
    <img id="motionjpeg" src="https://user:[email protected]:8080/" />
    <script src="motionjpeg.js"></script>
    <script>
        //Using jQuery for simplicity

        $(document).ready(function() {
            motionjpeg("#motionjpeg"); // Use the function on the image
        });
    </script>
</body>

</html>

движениеjpeg.js

function motionjpeg(id) {
    var image = $(id), src;

    if (!image.length) return;

    src = image.attr("src");
    if (src.indexOf("?") < 0) {
        image.attr("src", src + "?"); // must have querystring
    }

    image.on("load", function() {
        // this cause the load event to be called "recursively"
        this.src = this.src.replace(/\?[^\n]*$/, "?") +
            (new Date()).getTime(); // 'this' refers to the image
    });
}

Обратите внимание, что в моем примере MotionJPEG будет воспроизводиться при загрузке страницы, но не будут доступны функции воспроизведения/паузы/остановки.

17.12.2015

3

Если ваш источник потока не может возвращать кадры по другому адресу (https://[какой-то ip]:[порт]/frame/XXX), вы можете использовать анализатор потока MJPEG на сервере. Например, Paparazzo.js анализирует поток и возвращает один файл JPEG. На самом деле возвращает только последний кадр без сохранения предыдущего, но это можно изменить.

Проблема не решается только в браузере с js без каких-то плагинов и сервера.

14.10.2013
Новые материалы

Как создать диаграмму градиентной кисти с помощью D3.js
Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


Для любых предложений по сайту: [email protected]