Grabar vídeo de cámara con JavaScript y subirlo a PHP usando MediaRecorder, fetch, getUserMedia y FormData

Grabar vídeo con JavaScript y enviarlo a servidor con PHP

Esta es la continuación del post en donde vimos cómo grabar un vídeo (con audio incluido) usando JavaScript accediendo a la cámara web y al micrófono.

En ese mismo post tenemos enlaces a tutoriales para:

Grabar vídeo de cámara con JavaScript y subirlo a PHP usando MediaRecorder, fetch, getUserMedia y FormData

Grabar vídeo de cámara con JavaScript y subirlo a PHP usando MediaRecorder, fetch, getUserMedia y FormData

Así que es momento de grabar un vídeo con JavaScript pero enviar el resultado a un servidor con PHP.

(más…)

Grabar vídeo de cámara con JavaScript, MediaRecorder y getUserMedia

Grabar vídeo de cámara con JavaScript

A través del tiempo hemos visto cómo tomar fotos con JavaScript (así como enviarlas a un servidor con PHP) y cómo grabar el audio del micrófono (o guardarlo en un servidor).

En este post vamos a ver la “unión” de esas operaciones para grabar un vídeo con JavaScript.

El vídeo que vamos a grabar será tomado de la cámara web en caso de que sea una portátil, o de la cámara de un teléfono o tableta.

También podremos capturar vídeo de cualquier otra cámara, al igual que el audio. Por ejemplo, en los móviles vamos a elegir entre la cámara trasera o la frontal.

Grabar vídeo de cámara con JavaScript, MediaRecorder y getUserMedia

Grabar vídeo de cámara con JavaScript, MediaRecorder y getUserMedia

Lo que haremos será ver cómo acceder a la cámara y al micrófono, grabar el audio y el vídeo para descargar finalmente el vídeo que grabamos.

(más…)

Grabar audio del micrófono con JavaScript y descargar la grabación

En este post voy a explicar cómo grabar audio del micrófono con JavaScript, MediaRecorder y la API de getUserMedia.

Grabar audio del micrófono con JavaScript, getUserMedia y MediaRecorder

Grabar audio del micrófono con JavaScript, getUserMedia y MediaRecorder

Al final seremos capaces de:

  • Pedir permiso de acceder al micrófono
  • Obtener una lista de micrófonos
  • Seleccionar el micrófono para grabar
  • Comenzar una grabación
  • Detener la grabación de audio
  • Descargar el audio grabado

Todo eso sin usar plugins, extensiones ni esas cosas: se utiliza JavaScript puro.

(más…)

Tomar foto con JavaScript y descargarla como imagen PNG

Tomar foto de cámara web con JavaScript y descargarla como imagen

En mi blog he hecho varios posts sobre tomar fotos con la cámara web desde JavaScript, para enviarlas a PHP; pero nunca he hecho un ejemplo sin usar PHP.

Es por ello que hoy voy a explicar cómo tomar una foto de la cámara web (igualmente de la cámara trasera o delantera en los dispositivos compatibles) y guardarla o descargarla directamente como archivo, sin usar código del servidor.

Tomar foto con JavaScript y descargarla como imagen PNG

Tomar foto con JavaScript y descargarla como imagen PNG

El código para tomar la foto funciona en varios dispositivos con un navegador actualizado, desde teléfonos y tabletas Android, iPads y más.

(más…)