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

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

5 голосов
/ 28 февраля 2011

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

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

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

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

Ответы [ 3 ]

3 голосов
/ 13 июня 2013

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

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

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

3 голосов
/ 28 февраля 2011

Ваш поток сейчас не работает, но попробуйте немного 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>
1 голос
/ 16 августа 2011

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

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

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

...