Introducción

Nota: ya hay una versión 3 de este código. En ese nuevo post explico cómo dar la posibilidad de que el usuario cambie la cámara, además de que introduzco otras mejoras y actualizaciones. Míralo aquí.

Esta es la versión 2 de la primera entrada que escribí. Estaba probando la app en Chrome, y aparecía un mensaje que dice así:

[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead. See https://www.chromestatus.com/features/5618491470118912 for more details.

Quiere decir que el método que estamos utilizando es obsoleto y pronto será removido. Así que es hora de actualizar, cosa que no llevará más de medio minuto.

Lado del cliente

Los permisos se mantienen intactos, así como la petición AJAX. Lo único que cambia es la asignación del stream.

El código fuente original, es decir, el “desactualizado” se ve exactamente así:

El cambio que tenemos que hacer es asignar directamente el stream a la propiedad srcObject del elemento vídeo. Ya no usamos window.URL.createObjectURL, sino que le asignamos el stream justo como viene. Así:

Lo único que cambia, como se ve, es la línea 26.

Con eso hemos actualizado el script para que no quede obsoleto. El lado del servidor, así como la vista, quedan intactos. Recuerda que esto es una modificación al código que vimos aquí.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Relacionado:  Cambiar zona horaria o timezone en Laravel

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 702 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

16 Comments

Claudia · julio 25, 2019 a las 7:57 pm

Hola! estoy tratando de implementarlo como una función oculta en un botón, el sistema es para monitorear que quien esté ingresando datos sea la misma persona que está logueada, por lo que además de tomar la foto estoy ingresando otras variables en la bd el problema me lo está generando en if(strlen($imagenCodificada) <= 0) exit ("No se recibió ninguna imagen"); solo se queda en la pantalla con el mensaje, si toma la foto e ingresa la ruta en la bd pero el resto de los datos que tengo en post no los ingresa y no termina de ejecutar el php que al final redirecciona. Intenté quitarle el "=" pero con esto me genera 2 archivos png, uno dañado y me genera 2 líneas en la bd una con todos los datos y la ruta del archivo dañado y la segunda todo vacío excepto el campo de la ruta del png bueno.

    parzibyte · julio 25, 2019 a las 8:50 pm

    Hola, lo entiendo. Cuando se envíe el formulario toma la foto y mándala usando AJAX, pero además de la foto también manda los otros datos de tu formulario (usando JSON por ejemplo) y del lado de PHP simplemente recuperas todos, incluso la foto.
    Si necesitas ayuda con tu código no dudes en contactarme: https://parzibyte.me/blog/contrataciones-ayuda/

    Saludos

    CLAUDIA · julio 31, 2019 a las 6:10 pm

    Muchas gracias por tu respuesta! Después de muchos intentos di con la solución que me genera menos cambios en el proyecto agregando un input hidden en el formulario, este lo agregué junto con mi formulario a los elementos del DOM para devolver el nombre de la foto en el input y posteriormente hago el submit desde el script. Tal vez es una manera muy arcaica pero ya tenia el proyecto casi terminado y de otra forma tenia casi que volver a hacer todo.

    parzibyte · julio 31, 2019 a las 6:25 pm

    Me alegra saber que haya funcionado 🙂
    Te invito a seguirme en mis redes sociales y a suscribirte para estar pendiente de mi contenido
    Saludos

Porque me aparece el error $video is null? · junio 13, 2019 a las 12:59 pm

Estoy probando el script pero me da el error $video is null, porque seria?

    parzibyte · junio 13, 2019 a las 1:45 pm

    Porque la llamada a querySelector con el id del vídeo devuelve null, lo que significa que no existe, en el HTML, un elemento con ese id (tal vez eliminaste el elemento vídeo o cambiaste su id).
    O es que el elemento no existe a la hora de llamar tu script, lo que se solucionaría con un:
    document.addEventListener(“DOMContentLoaded”, ()=>{
    // Aquí recuperar el elemento
    });

falopy · abril 2, 2019 a las 10:55 am

aahhhh, no estaba tan perdido hahaha, oye muchas gracias hoy mismo checamos el dato, y pues ya, ya quedo funcionando perfecto, lo demas es pan comido, te agradesco el dato, espero y quiero suponer que estas funciones, podrian detectar tambien la camara de un celular, conectada a la pc, de no ser asi no hay problema, solo seria darle un toque mas acorde a una posible necesidad.
Exito! y estoy al pendiente del blog

    parzibyte · abril 2, 2019 a las 11:38 am

    No entiendo muy bien eso de la cámara del celular conectada a la PC pero mientras puedas acceder a la misma desde la app nativa, podrás hacerlo desde el navegador. Igualmente si accedes desde el celular usará la cámara que tiene; y en otros tutoriales que he escrito sobre esto puse la opción para intercambiar entre la trasera y la frontal.
    Saludos y gracias por tus comentarios

Falopy · febrero 28, 2019 a las 12:24 pm

Hola, en un inicio baje el codigo para hacer pruebas y efectivamente me tiraba un error, y efectivamente, el error no decia mucho,el detalle es una de posiblemente 2 cosas
1.- no estas ejecutando tu script en un servidor “https” <—- esto lo dejaron bien claro

2.- que bajaron el codigo que amablemente nos pusieron aqui, pero nunca hicieron las correcciones a la linea 26, explicado en este post.
una vez que realize estos pasos el script me funciono, muy bien y agradesco mucho la ayuda.
Ahora toca romperme un poco la cabeza para poder enviar la foto e informacion a mi base de datos mysql.

    parzibyte · febrero 28, 2019 a las 12:45 pm

    Me da gusto que al final haya funcionado. Para las imágenes te recomiendo que las guardes en un lugar separado en el disco duro, y en tu base de datos únicamente guardes la ruta de guardado (es mi recomendación, no es obligatorio).
    Te invito a seguirme en mis redes sociales y en mi blog. Saludos 🙂

    falopy · abril 1, 2019 a las 4:32 pm

    Hola de nuevo, apenas retome el proyecto y veo que hay una buena actualizacion de ello, Gracias… una duda nada mas y es, (perdona la ignorancia) pero, que linea es que la te marca la ruta para guardar la imagen?

    parzibyte · abril 1, 2019 a las 7:00 pm

    Hola, la ruta de guardado se define en la variable $nombreImagenGuardada en el código del lado del servidor en el siguiente post: https://parzibyte.me/blog/2017/11/22/tomar-foto-javascript-camara-guardarla-servidor-php/

    (el cual se ve aquí: https://github.com/parzibyte/fotos_js/blob/master/guardar_foto.php)

    Si quisieras cambiar la ruta simplemente escribirías (valga la redundancia) la ruta en donde quieras guardarla. Por ejemplo, para guardarla en la carpeta fotos (suponiendo que existe) sería:
    $nombreImagenGuardada = "fotos/foto_" . uniqid() . ".png";
    Alternativamente podrías indicar la ruta absoluta:

    $nombreImagenGuardada = "/home/parzibyte/foto_" . uniqid() . ".png";

    Incluso hacer que el nombre sea estático:

    $nombreImagenGuardada = "fotos/foto_de_la_webcam.png";

    Podría poner más ejemplos pero no terminaría nunca, en resumen puedes ponerle el nombre que quieras aprovechando el lenguaje. No olvides que debe tener la extensión PNG pues así fue enviada desde JS

Josaphat · diciembre 28, 2018 a las 9:13 am

Pues desde las ultimas actualizaciones dejo de funcionar esta funcion no se por que pero las versiones antiguas si funcionaban bien no se si hay alguna actualizacion

    parzibyte · diciembre 28, 2018 a las 12:00 pm

    Tienes razón, con la última actualización de Chrome se ha roto la app; toca esperar, porque lo único que dice es DOMException y no da más pistas, a ver si con Chrome 72 se soluciona, siempre que se actualiza tiene que romper algo…
    Mientras tanto puedes usar Firefox, me parece que ahí sigue funcionando

    Josaphat · enero 3, 2019 a las 11:41 am

    Hola!, pues no Mozilla tiene el mismo problema, la solución que he encontrado es con Opera, pero eso hasta que se actualize también..

Tomar foto con Javascript y cámara para guardarla en servidor PHP - Parzibyte's blog · diciembre 11, 2018 a las 12:43 am

[…] Más información aquí: Tomar foto de cámara web con Javascript, actualizado […]

Deja un comentario

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

A %d blogueros les gusta esto: