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

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

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

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

Спасибо.

источник

2013-10-13 Lior Ohana

Если источник потока не может возвращать кадры по другому адресу (http: // [some ip]: [port]/frame/XXX), вы можете использовать парсер MJPEG на сервере. Например, Paparazzo.js разобрать поток и вернуться к одному jpeg. Фактически он возвращает только последний кадр без сохранения предыдущего, но его можно изменить.

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

источник

2013-10-14 22:05:21 Alex

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

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

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

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

camera.html

<!DOCTYPE html> 
<html> 

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

<body> 
    <h1>ipCam</h1> 
    <img id="motionjpeg" src="http://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>

motionjpeg.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 при загрузке страницы, но не допускает функции воспроизведения/паузы/останова

источник

2015-12-17 12:05:26 Zorgatone

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

Предполагая, что идентификаторы для canvas и img бы то же самое:

var ctx = canvas.getContext("2d"); 
canvas.width = img.width; 
canvas.height = img.height; 

(function loop() { 
    ctx.drawImage(img, 0, 0);   // grab frame 
    // extract frame here if needed 
    requestAnimationFrame(function() { 
    requestAnimationFrame(loop);  // updates per 1/30 fps 
    }); 
})();

Конечно, цикл не требуется, если это необходимо, просто вызвать drawImage() «по требованию». Затем используйте холст для добавления текста (отметка времени и т. Д.).) Или что-то и извлечь как изображение:

var dataURL = canvas.toDataURL("image/jpeg", 0.75); 
var img = new Image; 
img.onload = function() { 
    // image ready 
}; 
img.src = dataURL;

или немного быстрее и памяти для пользователя, но асинхронный (не поддерживается в IE):

canvas.toBlob(function(blob) { 
    var img = new Image; 
    img.onload = function() { 
    // image ready. 
    }; 
    img.src = (URL || webkitURL).createObjectURL(blob); 
}, "image/jpeg", 0.75);

Чтобы вернуть изображение/кадр из холста можно извлечь a Data-URI следующим образом:

var uri = canvas.toDataURL("image/jpeg", 0.75);

источник

2016-06-19 01:04:06 K3N

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

ответ

Смежные вопросы