2010-09-23 19 views
8

Necesito capturar una imagen de una cámara web (cámara atada, etc.) en un formulario o lienzo html5 para poder guardar la imagen en el servidor. Además, me gustaría poder obtener una vista previa de la imagen en vivo en la página.Capturar imagen de la cámara en el formulario o en el lienzo html5

Por ejemplo, tengo un navegador ejecutándose en un registro de registro en la estación. Me gustaría tomar una foto del asistente que está parado frente a la mesa y enviar esa imagen a la base de datos. Entonces puedo usar esa imagen para imprimir la insignia del asistente con su imagen en ella.

Estoy usando rieles y clip, aunque dudo que importe.

¿Alguien hizo esto antes, o tiene algunas ideas de cómo hacerlo?

+0

Para otros que vendrán aquí de Google: la solución pura de HTML5 ahora funciona en todos los navegadores actuales. Ver http://www.html5rocks.com/en/tutorials/getusermedia/intro/. –

+0

@HubertOG http://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-screenshot no funciona para mí –

Respuesta

9

Hay un complemento para jQuery titulado 'jQuery Webcam Plugin' que proporciona una manera amigable y fácil de interactuar con una cámara web. En realidad, se basa en un pequeño componente flash (desafortunadamente), pero hace un gran trabajo facilitando la interacción, además de proporcionar funcionalidad para copiar imágenes directamente en un lienzo HTML5.

Una vez más, es lamentable que se basa en Flash, pero creo que cualquier solución confiable va a necesitar flash en este momento.

El plug-in está disponible aquí: http://www.xarg.org/project/jquery-webcam-plugin/ se supone

+0

Excelente solución. De acuerdo en que la necesidad de flash es un mal necesario. – Karl

3

En este momento, si desea interactuar con una cámara web desde una página web, debe utilizar el complemento. Flash tiene una interfaz madura para cámaras web, por lo que sería mi primera opción de herramienta.

Solía ​​haber una especificación para la compatibilidad con la cámara web nativa en HTML 5, pero se ha convertido en its own, independent, specification. Actualmente there is no browser support por fuera de experimental Opera builds.

+0

desafortunadamente, estoy de acuerdo en que la mejor apuesta es el flash. – Peter

+0

Ahora Chrome 18+ es compatible con esto. Vea el ejemplo en www.html5rocks.com – Spiff

1

Android> = 3.0 (en un montón de pastillas y un teléfono en breve) para apoyar esto. La búsqueda de "captura de medios html" y "dispositivo api" le proporcionará mucha más información.

En el lado del borde sangrante ni siquiera alfa, hay cosas como webrtc y el complemento mozilla rainbow.

Cuestiones relacionadas