Cómo hacer una instantánea de una corriente MJPEG en HTML

tengo la siguiente página web HTML:Cómo hacer una instantánea de una corriente MJPEG en HTML

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

Esta página web muestra la alimentación de una cámara IP de transmisión de datos MJPEG. Puede probar el código anterior aquí: http://jsfiddle.net/jU4aq/ (no funciona desde IE)

Mi pregunta es cómo puedo hacer una instantánea de esa fuente. Básicamente quiero agregar un botón que cuando el usuario haga clic en él, aparecerá un cuadro de diálogo y le dará la opción de guardar la imagen.

Fuente

2011-02-28 LEM

Esto definitivamente no es posible en HTML puro. ¿Qué idiomas del lado del cliente y (más realistamente) del lado del servidor pueden usar? –

Javascript es mi única opción. No puedo usar ningún idioma del lado del servidor. – LEM

Hmm. Recuperar la imagen en un elemento canvas podría funcionar, si eso solo captura el fotograma actual. Reetiquetado para una mejor exposición ... Sin embargo, para que realmente sirva el archivo localmente como una descarga "Guardar como", también puede necesitar Flash. –

Su corriente no parece estar funcionando en este momento pero trate de un poco de javascript lienzo, como:

<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>

Fuente

2011-02-28 18:25:21

Muchas gracias por su respuesta. Acabo de probarlo en Firefox pero no ocurre nada cuando hago clic en el botón guardar. ¿Se supone que debe mostrar un diálogo de guardar? La corriente funciona para mí ahora mismo. Si no funciona, también puedes probar http://extcam-16.se.axis.com/axis-cgi/mjpg/video.cgi, que es incluso más rápido. Gracias – LEM

Oh mi. De 4.8.11.3 en la especificación: "Siempre que se llame al método toDataURL() de un elemento de lienzo cuya bandera de limpieza de origen se establece en falso, el método debe generar una excepción SECURITY_ERR". Aparentemente, el acto de dibujar una imagen en el lienzo no le permite usar toDataURL. Es posible que solo funcione si aloja el html en el mismo origen en el que se aloja el feed. Tendrás que intentar eso. –

Tenga en cuenta que si no planea hospedar el html en el mismo origen (dominio) que el canal de información, puede que tenga que hacer algo complicado. –

Algunas cámaras IP tienen un camino para las fotos. Por ejemplo, Vivotek se ejecuta en "/cgi-bin/viewer/video.jpg?streamid=0".

Puede configurar un botón HTML que active un evento JS que creará un elemento IMG DOM con esa URL como atributo "src". Pero probablemente necesite evitar los problemas entre dominios http://en.wikipedia.org/wiki/Same_origin_policy.

La solución que he visto más es usar un lenguaje del lado del servidor como php, nodo, python, ruby, etc., para descargar la instantánea y guardarla como un archivo público para su página web.

Fuente

2011-08-16 17:26:20 rodowi

uso AXIS API para obtener instantáneas, se puede obtener aquí: http://www.axis.com/techsup/cam_servers/dev/cam_http_api_index.php

En ti URL caso es "http://your.server/axis-cgi/jpg/image.cgi"

También se pueden utilizar parámetros adicionales, como la resolución y la compresión

Fuente

2013-06-13 07:34:21