Tomar una Foto con Javascript

Tomar una Foto con Javascript

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


Suscríbete!

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

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/

Una respuesta ¿Qué opinas tú del tema?

  1. Johan Corrales

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *