Ahora muchos navegadores tienen la habilidad de acceder a la entrada de audio y video desde el usuario. Sin embargo, según el navegador puede ser una experiencia en línea y totalmente dinámica o puede ser delegada a otra app en el dispositivo del usuario.
Comienza de forma simple y progresiva
Lo más sencillo es simplemente pedirle al usuario un archivo grabado previamente. Para ello, crea un elemento simple de entrada de archivo y agrega un filtro accept
que indique que solo podemos aceptar archivos de video y un atributo capture
que indique que queremos obtenerlo directamente desde la cámara.
<input type="file" accept="video/*" capture />
Este método funciona en todas las plataformas. En el escritorio, se le solicitará al usuario que suba un archivo desde el sistema de archivos (ignorando el atributo capture
). En Safari para iOS, se abrirá la app de la cámara, lo que te permitirá grabar un video y, luego, enviarlo a la página web. En Android, se le dará al usuario la opción de elegir qué app quiere usar para grabar el video antes de enviarlo a la página web.
Muchos dispositivos móviles tienen más de una cámara. Si tienes una preferencia, puedes establecer el atributo capture
en user
si quieres que la cámara esté orientada hacia el usuario o en environment
si quieres que esté orientada hacia afuera.
<input type="file" accept="video/*" capture="user" />
<input type="file" accept="video/*" capture="environment" />
Ten en cuenta que esta es solo una sugerencia. Si el navegador no admite la opción o el tipo de cámara que solicitas no está disponible, es posible que el navegador elija otra cámara.
Una vez que el usuario haya terminado la grabación y esté de vuelta en el sitio web, tienes que adquirir los datos del archivo de algún modo. Puedes obtener un acceso rápido si
adjuntas un evento onchange
al elemento de entrada y, luego, lees
la propiedad files
del objeto de evento.
<input type="file" accept="video/*" capture="camera" id="recorder" />
<video id="player" controls></video>
<script>
var recorder = document.getElementById('recorder');
var player = document.getElementById('player');
recorder.addEventListener('change', function (e) {
var file = e.target.files[0];
// Do something with the video file.
player.src = URL.createObjectURL(file);
});
</script>
Una vez que obtienes acceso al archivo, puedes hacer lo que quieras con él. Por ejemplo, puedes hacer lo siguiente:
- Adjuntarlo directamente a un elemento
<video>
para que puedas reproducirlo - Descárgalo en el dispositivo del usuario
- Sube el archivo a un servidor adjuntándolo a un
XMLHttpRequest
- Dibuja los marcos en un lienzo y aplícale filtros
Si bien el uso del método de elemento de entrada para la obtención de acceso a los datos de video es ubicuo, es la opción menos atractiva. Realmente queremos obtener acceso a la cámara y proporcionar una experiencia agradable directamente en la página.
Acceder a la cámara de manera interactiva
Los navegadores modernos pueden tener acceso directo a la cámara, lo cual nos permite compilar experiencias que estén totalmente integradas con la página web, de modo que el usuario nunca tenga que abandonar el navegador.
Adquirir acceso a la cámara
Podemos acceder de forma directa a la cámara usando una API en la especificación WebRTC llamada getUserMedia()
. getUserMedia()
le solicitará al usuario acceso a sus micrófonos y cámaras conectados.
Si tiene éxito, la API muestra un Stream
que contiene datos de la cámara o el micrófono, y luego podemos adjuntarlo a un elemento <video>
, a una transmisión de WebRTC o guardarlo con la API de MediaRecorder
.
Para obtener datos desde la cámara, simplemente configuramos video: true
en el objeto de restricciones que se pasa a la API de getUserMedia()
.
<video id="player" controls></video>
<script>
var player = document.getElementById('player');
var handleSuccess = function (stream) {
player.srcObject = stream;
};
navigator.mediaDevices
.getUserMedia({audio: true, video: true})
.then(handleSuccess);
</script>
Si quieres elegir una cámara en particular, primero puedes enumerar las cámaras disponibles.
navigator.mediaDevices.enumerateDevices().then((devices) => {
devices = devices.filter((d) => d.kind === 'videoinput');
});
Luego, puedes pasar el deviceId que deseas usar cuando llames a getUserMedia
.
navigator.mediaDevices.getUserMedia({
audio: true,
video: {
deviceId: devices[0].deviceId,
},
});
Por sí solo, no es tan útil. Todo lo que podemos hacer es tomar los datos del video y reproducirlo.
Accede a los datos sin procesar desde la cámara
Para acceder a los datos de video sin procesar de la cámara, puedes dibujar cada fotograma en un <canvas>
y manipular los píxeles directamente.
Para un lienzo 2D, puedes usar el método drawImage
del contexto para dibujar el marco actual de un elemento <video>
en el lienzo.
context.drawImage(myVideoElement, 0, 0);
Con un lienzo WebGL, puedes usar un elemento <video>
como fuente de una textura.
gl.texImage2D(
gl.TEXTURE_2D,
0,
gl.RGBA,
gl.RGBA,
gl.UNSIGNED_BYTE,
myVideoElement,
);
Ten en cuenta que, en cualquier caso, se usará el fotograma actual de un video que se esté reproduciendo. Para procesar varios fotogramas, debes volver a dibujar el video en el lienzo cada vez.
Obtén más información en nuestro artículo sobre cómo aplicar efectos en tiempo real a imágenes y videos.
Guarda los datos de la cámara
La forma más sencilla de guardar los datos de la cámara es usar la API de MediaRecorder
.
La API de MediaRecorder
tomará la transmisión creada por getUserMedia
y, luego, guardará de forma progresiva los datos de la transmisión en tu destino preferido.
<a id="download">Download</a>
<button id="stop">Stop</button>
<script>
let shouldStop = false;
let stopped = false;
const downloadLink = document.getElementById('download');
const stopButton = document.getElementById('stop');
stopButton.addEventListener('click', function() {
shouldStop = true;
})
var handleSuccess = function(stream) {
const options = {mimeType: 'video/webm'};
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.addEventListener('dataavailable', function(e) {
if (e.data.size > 0) {
recordedChunks.push(e.data);
}
if(shouldStop === true && stopped === false) {
mediaRecorder.stop();
stopped = true;
}
});
mediaRecorder.addEventListener('stop', function() {
downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
downloadLink.download = 'acetest.webm';
});
mediaRecorder.start();
};
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(handleSuccess);
</script>
En nuestro caso, estamos guardando los datos directamente en un array que luego podemos convertir en un Blob
y que podemos usar para guardar en nuestro servidor web o directamente en el almacenamiento del dispositivo del usuario.
Solicitar permiso para usar la cámara de forma responsable
Si el usuario no le otorgó acceso a la cámara a tu sitio anteriormente, en el momento en que llames a getUserMedia
, el navegador le solicitará al usuario que le otorgue permiso a tu sitio para acceder a la cámara.
A los usuarios no les gusta que se les solicite acceso a los dispositivos potentes de su máquina y, con frecuencia, bloquean la solicitud o la ignoran si no comprenden el contexto por el cual se creó la solicitud. Es mejor solo pedir acceso a la cámara la primera vez que se necesita. Una vez que el usuario otorgue el acceso, no se le volverá a preguntar. Sin embargo, si lo rechaza, no podrás volver a obtener acceso para pedirle permiso.
Usa la API de permisos para comprobar si ya tienes acceso
La API de getUserMedia
no te permite saber si ya tienes acceso a la cámara. Esto te presenta un problema, para proporcionar una buena IU para hacer que el usuario te otorgue acceso a la cámara, tienes que pedir acceso a la cámara.
Esto se puede resolver en algunos navegadores usando la Permission API. La API de navigator.permission
te permite consultar el estado de la capacidad de acceder a APIs específicas sin tener que volver a solicitar.
Para consultar si tienes acceso a la cámara del usuario, puedes pasar {name: 'camera'}
al método de consulta y mostrará lo siguiente:
granted
: El usuario te otorgó acceso a la cámara anteriormente.prompt
: El usuario no te otorgó acceso y se lo solicitarán cuando llames agetUserMedia
.denied
: El sistema o el usuario bloqueó explícitamente el acceso a la cámara y no podrás obtener acceso a ella.
Ahora puedes comprobar rápidamente si necesitas modificar tu interfaz de usuario para acomodar las acciones que el usuario necesita tomar.
navigator.permissions.query({name: 'camera'}).then(function (result) {
if (result.state == 'granted') {
} else if (result.state == 'prompt') {
} else if (result.state == 'denied') {
}
result.onchange = function () {};
});