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í.
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.
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
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.
Me alegra saber que haya funcionado 🙂
Te invito a seguirme en mis redes sociales y a suscribirte para estar pendiente de mi contenido
Saludos
Estoy probando el script pero me da el error $video is null, porque seria?
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
});
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
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
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.
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 🙂
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?
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
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
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
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..
Pingback: Tomar foto con Javascript y cámara para guardarla en servidor PHP - Parzibyte's blog