¿Te gustaría aprender Java desde cero?
Tenemos los diplomados que necesitas.¡Haz clic aquí!

 

En este post te vamos a mostrar como puedes crear la funcionalidad de tomar una foto con javascript puro, sin necesidad de librerías externas o plugins adicionales, esto te permitirá tomar fotografías desde webcam para directamente descargarlas a tu pc, seguro que más de en un proyecto web vendría bien esta funcionalidad.

TOMAR UNA FOTO CON JAVASCRIPT PURO

Lo que haremos el día de hoy será mostrar al usuario una interfaz que permite obtener el flujo de tu webcam y mostrarlo en la pantalla, en el momento de que el usuario decide tomar una foto entonces se presentan las opciones de: eliminar esta imagen y descargar a tu ordenador la fotografía tomada.

LA ESTRUCTURA

La estructura es bastante simple, unicamente asegurate de utilizar los mismos identificadores para que funcione el codigo javascript:

Como puedes visualizar hay una parte donde importamos nuestro estilo css:

y otra donde importamos nuestra funcionalidad en javascript:

LA FUNCIONALIDAD

Nuestra funcionalidad viene por nuestro codigo javascript 100% puro, sin ningun plugin o dependencia externa:

Como puedes ver el codigo viene un poco documentado, de cualquier forma si tienes alguna duda o comentario no dudes en dejarme un comentario.

EL ESTILO

El estilo css lo puedes ver a continuación, no es obligatorio pero le da un toque un poco más profesional:

About Author

NGuerrero

0 0 votos
Article Rating
Suscribir
Notificar de
guest
2 Comments
La mas nueva
Más antiguo Más votada
Comentarios.
Ver todos los comentarios
Yunior González Rosabal
Yunior González Rosabal
3 Años Texto atrás

Por favor, necesito algún código para tomar fotos sin necesidad de estar conectado a la internet. Encontré en ProgramaEnLinea ¿Como Tomar una Foto con JavaScript? y me ha interesado muchísimo pero honestamente traté de usarlo y no me funciona. Solo soy un aficionado a estos leguajes, aunque me gustan mucho, no los domino a la perfección. Por otra parte, el dispositivo que uso es un Chromebook. Quizás esta información le sirva de algo para ayudarme a que esta cámara se ejecute sin ningún problema en dicho dispositivo:
Google Chrome 43.0.2357.131 (Build oficial) (32 bits)
Revisión 1a26cd4c53ce1422588a5345501b4c3a075485b4
Plataforma 6946.68.0 (Official Build) stable-channel veyron_speedy
Blink 537.36 (@197431)
JavaScript V8 4.3.61.32
Flash 18.0.0.194-r1
Agente de usuario Mozilla/5.0 (X11; CrOS armv7l 6946.68.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.131 Safari/537.36

De acurdo a esto que explico, me sentiría muy agradecido si me enviaran el código completo de la cámara, listo para ser ejecutado, lo necesito. En la espera de su pronta respuesta, muchísimas gracias de antemano. Yunior.

2
0
¿Te gusta este articulo? por favor comentax