Tomar una Foto con Javascript

Tomar una Foto con Javascript

Tomar una Foto con Javascript
5 (100%) 2 votos

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

Recientemente estaba navegando por Internet buscando novedades en el desarrollo web cuando me encontre con un post donde hablabla precisamente de lo que veremos el dia de hoy y, aunque no es algo nuevo, me parecio bastante interesante postear un demo el dia de hoy.

Tomar una foto con Javascript puro

Lo que haremos el dia 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 fotogrfía tomada.

tomar una foto con javascript 1


¿Sabías que?

¿Necesitas hospedaje web? DigitalServer te ofrece un 50% de descuento en cualquier plan de hosting a partir del plan Micro! Solo copia el cupon: PROMOEXH y sigue el siguiente enlace:

Obtener 50% de descuento

Puedes visualizar un demo funcional aquí

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:

Espero este post de como tomar una foto con javascript puro te sirva para alguno de tus proyectos web.

Saludos!

Fuente: http://tutorialzine.com/2016/07/take-a-selfie-with-js/

Tomar una Foto con Javascript
5 (100%) 2 votos

1
Dejar un comentario

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Johan Corrales Recent comment authors
  Subscribe  
Notify of
Johan Corrales
Guest
Johan Corrales

Hola, Excelente aporte, soy nuevo en esta funcion de JS, me interesaria saber como podria manipular la imagen para subirla al servidor? de antemano, muchas gracias!