Если камера предоставляет необработанные изображения 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