Как сделать снимок из MJPEG-потока в HTML

У меня есть следующая веб-страница HTML:

<html>
<body>
<IMG SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>
</body>
</html>

На этой веб-странице отображается поток данных IP-камеры, передающий данные MJPEG. Вы можете попробовать приведенный выше код здесь: http://jsfiddle.net/jU4aq/ (это не работает из ИЕ)

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


javascript canvas html mjpeg
person LEM    schedule 28.02.2011    source источник
comment
Это определенно невозможно в чистом HTML. Какие клиентские и (что более реалистично) серверные языки вы можете использовать?   -  person Pekka    schedule 28.02.2011
comment
Javascript - мой единственный вариант. Я не могу использовать какие-либо серверные языки.   -  person LEM    schedule 28.02.2011
comment
Хм. Извлечение изображения в элемент холста может работать, если это надежно захватывает только текущий кадр. Повторная пометка для лучшей экспозиции... Однако для фактического локального использования файла в качестве загрузки «Сохранить как» вам может дополнительно понадобиться Flash.   -  person Pekka    schedule 28.02.2011
comment
Спасибо за ваш ответ. Я не слишком хорошо знаком с HTML, поэтому, надеюсь, кто-нибудь поможет предоставить код для извлечения холста!   -  person LEM    schedule 28.02.2011

Ответы (3)


arrow_upward
3
arrow_downward

Ваш поток, похоже, не работает прямо сейчас, но попробуйте немного javascript холста, например:

<html>
<body>
<IMG id="myImage" SRC='http://85.46.64.155/axis-cgi/mjpg/video.cgi'>

<input type="button" id="save" value="Save to PNG"> 

<script type="text/javascript">
document.getElementById('save').onclick = function () {

var c = document.createElement('canvas');
var img = document.getElementById('myImage');
c.width = img.width;
c.height = img.height;
var ctx = c.getContext('2d');


ctx.drawImage(img, 0, 0);
//window.location = c.toDataURL('image/png');
window.open(c.toDataURL('image/png'))
};

</script>

</body>
</html>
person Simon Sarris    schedule 28.02.2011
comment
Большое спасибо за ваш ответ. Я только что попробовал это в Firefox, но ничего не происходит, когда я нажимаю кнопку «Сохранить». Должен ли он показывать диалог сохранения? Поток работает для меня прямо сейчас. Если это не работает, вы также можете попробовать extcam-16 .se.axis.com/axis-cgi/mjpg/video.cgi, что еще быстрее. Спасибо - person LEM; 28.02.2011
comment
О боже. Из 4.8.11.3 в спецификации: всякий раз, когда вызывается метод toDataURL() элемента холста, для которого флаг очистки происхождения установлен в значение false, метод должен вызвать исключение SECURITY_ERR. По-видимому, процесс рисования изображения на холсте не позволяет вам использовать toDataURL. Это может работать только в том случае, если вы размещаете html в том же источнике, что и канал. Вам придется попробовать это. - person Simon Sarris; 28.02.2011
comment
Обратите внимание: если вы не планируете размещать html в том же источнике (домене), что и канал, вам, возможно, придется сделать что-то хитрое. - person Simon Sarris; 28.02.2011
comment
Спасибо за это, но, к сожалению, фид не будет в том же домене. Возможно, для этого нет простого решения... - person LEM; 01.03.2011
comment
@LEM Сервер, который обслуживает изображение, должен разрешать использование без источника, указав это в заголовке. Если нет, вам нужно разместить веб-страницу в том же источнике (в основном домене), что и канал камеры. Поговорите с веб-мастером и узнайте, могут ли они добавить Access-Control-Allow-Origin: * (подробнее см. здесь: w3.org/ TR/cors). При желании можно превратить свой собственный сервер в прокси-сервер, загрузив его с вашего сервера, а затем отправив оттуда на свою страницу. - person ; 13.06.2013

arrow_upward
3
arrow_downward

Используйте API AXIS для получения моментального снимка, вы можете получить его здесь: http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php

В вашем случае URL-адрес "http://your.server/axis-cgi/jpg/image.cgi"

Также вы можете использовать дополнительные параметры, такие как разрешение и сжатие.

person Binoklev    schedule 13.06.2013

arrow_upward
1
arrow_downward

Некоторые IP-камеры имеют путь для снимков. Например, Vivotek работает по адресу «/cgi-bin/viewer/video.jpg?streamid=0».

Вы можете настроить кнопку HTML, которая запускает событие JS, которое создаст IMG DOMElement с этим URL-адресом в качестве атрибута «src». Но вам, вероятно, придется обойти междоменные проблемы http://en.wikipedia.org/wiki/Same_origin_policy .

Решение, которое я видел чаще всего, заключается в использовании серверного языка, такого как php, node, python, ruby ​​и т. д., для загрузки моментального снимка и сохранения его в качестве общедоступного файла для вашей веб-страницы.

person defvol    schedule 16.08.2011