HTML — Как правильно отобразить снимок MJPEG из CCTV в переполнение стека
У меня есть IP-камера видеонаблюдения, которая поддерживает MJPEG. Я хотел бы отобразить изображение в HTML (из сценария PHP) вместе с другими данными.
Я знаю, что могу получить скриншот с камеры, используя:
http://username:password@<servername>/Streaming/channels/1/picture
Однако, когда я использую этот простой код HTML изображение не всегда отображается:
<html>
<body>
<IMG id="myImage" SRC='http://username:password@192.168.0.20/Streaming/channels/1/picture'>
</body>
</html>
В Microsoft Edge невозможно даже войти в камеру.
На Firefox работает отлично.
Камера Chrome включена, но изображение не отображается.
Так что вопрос в том, как я могу получить изображение в HTML или лучше в PHP, чтобы отобразить его на странице. Я предпочитаю использовать PHP, потому что я хочу добавить больше данных на страницу, например, температуру и т. Д.
Также будет приятно обновить изображение, но это можно будет сделать позже в AJAX.
Решение
Используйте второй скрипт PHP, чтобы получить изображение и указать <img> тег к этому. Возможно, потому, что страница, на которой вы отображаете изображение, использует HTTPS, а камера поддерживает только HTTP. Прокси с помощью PHP позволит вам все это получать из одного и того же источника, а PHP будет обрабатывать HTTP-аутентификацию, что позволит избежать любых проблем совместимости вашего браузера.
<IMG id="myImage" SRC='currentimage.php'>
currentimage.php:
<?php
$crl = curl_init('http://<servername>/Streaming/channels/1/picture');
curl_setopt($crl, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($crl, CURLOPT_USERPWD, 'username:password');
curl_setopt($crl, CURLOPT_RETURNTRANSFER, TRUE);
$contents = curl_exec($crl);
curl_close($crl);
header("Content-Type: image/jpeg");
echo $contents;
?>
Чтобы сэкономить нагрузку на сервер и позволить ему обрабатывать больше трафика, вы также можете кэшировать последнее полученное изображение в файл на 5-10 секунд, но это отдельная проблема, которую нужно решить.
Другие решения
Этот код, кажется, работает нормально для меня:
<?php
while (@ob_end_clean());
header('Content-type: image/jpeg');
// create curl resource
$ch = curl_init();
curl_setopt($ch, CURLOPT_USERAGENT, $useragent);
curl_setopt($ch, CURLOPT_URL, 'http://<servername>/Streaming/channels/1/picture');
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt($ch, CURLOPT_USERPWD, 'username:password');
// $output contains the output string
$output = curl_exec($ch);
echo $output;
// close curl resource to free up system resources
curl_close($ch);
?>