Día 4: Una foto al día

Se me ocurrió realizar una pequeña maqueta de una photo booth para facilitarle a usuario hacer aquel famoso ejercicio de tomarse una foto al día. Utilizando los tags de HTML5 de video, audio y canvas, es posible obtener una "foto" de la webcam del usuario.

Básicamente se está realizando una copia del frame, el cual es recibido y dibujado con canvas para así después poderlo convertir en un data URI que es utilizado como src en la etiqueta img. Esta imagen es posicionada encima del video (el stream de la webcam) con opacidad.

Puedes probarlo haciendo clic en el botón play y autorizando tu webcam. Puedes ver el script viendo el código de fuente de esta página, pero eso ya lo sabías, ¿no?


    Usuarios de celular y tablet: Lo siento, no funciona, prueba en una computadora o laptop.


    palabras / Compartir en: Facebook , Twitter o copiar enlace