Explicación práctica detallada de las funciones de cámara y fotografía HTML5

Recientemente, estoy trabajando en una aplicación de cámara en la nube para Chrome. La aplicación incluye funciones básicas como tomar fotografías, grabar videos, guardar fotos y videos, cargar archivos, etc., lo que involucra muchas API HTML5 relacionadas con la transmisión de medios. El propósito de escribir este artículo es, en primer lugar, resumir y ordenar los puntos de conocimiento y, lo más importante, brindar orientación a los lectores que tengan necesidades relevantes.

Nota: este artículo se basa en combates reales y no introduce demasiados conocimientos teóricos.

La API getUserMedia de HTML5 proporciona a los usuarios una interfaz para acceder a los medios de los dispositivos de hardware (cámara, video, audio, ubicación geográfica, etc.). Según esta interfaz, los desarrolladores pueden acceder a los dispositivos de medios de hardware sin depender de ningún complemento del navegador.

La compatibilidad del navegador es la siguiente:

Como puede ver en la imagen de arriba, los principales navegadores Firefox, Chrome, Safari, Opera, etc. son totalmente compatibles.

 <ID de vídeo=reproducción automática de vídeo></vídeo> --------------------------------------- ----------------------- const videoConstraints = { ancho: 1366, alto: 768 }; const videoNode = document.querySelector('#video'); flujo = espera navigator.mediaDevices.getUserMedia({ audio: verdadero, video: videoConstraints }); videoNode.play();

 // enumerateDevices obtiene todos los dispositivos multimedia const mediaDevices = await navigator.mediaDevices.enumerateDevices(); // Filtro para obtener el dispositivo de la cámara a través del atributo king de la instancia del dispositivo videoinput const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput ') || []; // Obtener la cámara frontal const videoDeviceId = videoDevices[0].deviceId; videoConstraints = { deviceId: { exacto: videoDeviceId }, ancho: 1366, alto: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Obtener la cámara trasera const videoDeviceId = videoDevices[1].deviceId; const videoConstraints = { dispositivoId: { exacto: videoDeviceId }, ancho: 1366, alto: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints } // Y así sucesivamente...

 // Capture la transmisión de video a través del lienzo y genere una imagen en formato base64 const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); contexto. drawImage(videoNode, 0, 0, lienzo.ancho, lienzo.alto descargar(canvas.toDataURL('image/jpeg')); // Descargar función de imagen descargar (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('descargar', new Date()); .hacer clic();

 let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Apague la cámara después de 3 segundos setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; secuencia = nulo; }, 3000);

Esto completa la sencilla función de toma de cámara.

El proceso básico de la fotografía es grabar una transmisión de video y guardarla como un archivo de audio y video. El objeto HTML5 MediaRecorder proporciona funciones de grabación multimedia y grabación de vídeo.

La compatibilidad del navegador es la siguiente:

Como se muestra en la figura anterior, la compatibilidad del navegador con MediaRecorder es muy inferior a la de getUserMedia. Actualmente, solo Chrome y Firefox tienen mejor soporte para MediaRecorder.

==Nota: La etiqueta de vídeo del reproductor de vista previa de la cámara debe estar silenciada (para eliminar el ruido fuerte causado por el eco)==

 const videoConstraints = { ancho: 1366, alto: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); let mediaRecorder = new MediaRecorder(stream); / Grabar flujo de datos mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // Crea una instancia de datos binarios de archivo a través del objeto Blob. let recorderFile = new Blob(mediaRecorderChunks, { 'tipo': mediaRecorder.mimeType }); mediaRecorderChunks = []; const file = new File([this.recorderFile], (nueva fecha).toISOString().replace(/:| /./g, '-') + '.mp4', { tipo: 'video/mp4' }); descargar(URL.createObjectURL(archivo)); // Descargar función de video descargar (src) { if (!src) return; const a = document.createElement('a'); )); a.href = src; a.click(); } }; mediaRecorder.stop();

A través de los ejercicios prácticos anteriores, creo que los lectores han dominado las funciones básicas de la cámara, como tomar fotografías, grabar videos, guardar archivos, etc. Dado que el proyecto de la aplicación no es un proyecto personal y el código fuente no es público, aquellos que estén interesados ​​pueden intentarlo.