Я пытаюсь отобразить поток MJpeg в HTML5, используя тег img. Когда я запускаю следующее, все работает отлично, то есть видео начинает воспроизводиться до тех пор, пока видео не закончится:
<img src="https://[some ip]:[port]/mjpg">
Мой вопрос в том, как я могу получить поток кадр за кадром. Для каждого кадра я хочу получить его, сделать что-то (вызов ajax на сервер), а затем отобразить кадр как изображение.
Спасибо.
Вы можете сделать это без повторных запросов Http. Достаточно будет только одного. Вы можете использовать fetch API для создания ReadableStream, перейдите по адресу Reader и продолжайте читать из потока.
Когда у вас есть читатель, продолжайте рекурсивно читать куски из потока. Ищите SOI (0xFF 0xD8) в потоке байтов, который сигнализирует о конце заголовка и начале кадра JPEG. Заголовок будет содержать длину файла JPEG в байтах для чтения. Прочитайте это количество байтов из фрагмента и любых последующих фрагментов и сохраните их в Uint8Array. После того, как вы успешно прочитаете фрейм, преобразуйте его в большой двоичный объект, создайте из него объект UrlObject и назначьте его свойству src вашего объекта img.
Продолжайте делать это, пока соединение не будет закрыто.
Бессовестная вилка. Вот ссылка на рабочий пример на github.
Если камера предоставляет необработанные изображения 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 будет воспроизводиться при загрузке страницы, но не будут доступны функции воспроизведения/паузы/остановки.
Если ваш источник потока не может возвращать кадры по другому адресу (https://[какой-то ip]:[порт]/frame/XXX), вы можете использовать анализатор потока MJPEG на сервере. Например, Paparazzo.js анализирует поток и возвращает один файл JPEG. На самом деле возвращает только последний кадр без сохранения предыдущего, но это можно изменить.
Проблема не решается только в браузере с js без каких-то плагинов и сервера.
