Explicação prática detalhada das funções de foto e câmera HTML5

Recentemente, estou trabalhando em um aplicativo de câmera em nuvem para o Chrome. O aplicativo inclui funções básicas, como tirar fotos, gravar vídeos, salvar fotos e vídeos, fazer upload de arquivos, etc., o que envolve muitas APIs HTML5 relacionadas ao streaming de mídia. O objetivo de escrever este artigo é, em primeiro lugar, resumir e ordenar os pontos de conhecimento e, o mais importante, fornecer algumas orientações aos leitores que tenham necessidades relevantes.

Nota: Este artigo é baseado em combate real e não apresenta muito conhecimento teórico.

A API getUserMedia do HTML5 fornece aos usuários uma interface para acessar mídia de dispositivo de hardware (câmera, vídeo, áudio, localização geográfica, etc.). Com base nesta interface, os desenvolvedores podem acessar dispositivos de mídia de hardware sem depender de nenhum plug-in de navegador.

A compatibilidade do navegador é a seguinte:

Como você pode ver na imagem acima, os navegadores convencionais Firefox, Chrome, Safari, Opera, etc.

 <id do vídeo=reprodução automática do vídeo></vídeo> --------------------------------------- ----------------------- const videoConstraints = { largura: 1366, altura: 768 }; stream = aguarda navigator.mediaDevices.getUserMedia({áudio: true, vídeo: videoConstraints }); videoNode.play();

 // enumerateDevices obtém todos os dispositivos de mídia const mediaDevices = await navigator.mediaDevices.enumerateDevices(); // Filtra para obter o dispositivo da câmera por meio do atributo king da instância do dispositivo videoinput const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput ') || []; // Obtenha a câmera frontal const videoDeviceId = videoDevices[0].deviceId const; videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoDevices[1].deviceId const videoConstraints = { deviceId: { exato: videoDeviceId }, largura: 1366, altura: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });

 // Capture o fluxo de vídeo através do canvas e gere uma imagem no formato base64 const canvas = document.createElement('const context = canvas.getContext('2d'); contexto.drawImage(videoNode, 0, 0, canvas.width, canvas.height download(canvas.toDataURL('image/jpeg')); // Baixar função de imagem download (src) { if (!src) return; .clique();

 let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Desliga a câmera após 3s setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; fluxo = nulo }, 3000);

Isso completa a função simples de tirar a câmera

O processo básico da fotografia é gravar um stream de vídeo e salvá-lo como um arquivo de áudio e vídeo. O objeto HTML5 MediaRecorder fornece funções de gravação de multimídia e gravação de vídeo.

A compatibilidade do navegador é a seguinte:

Conforme mostrado na figura acima, a compatibilidade do navegador com o MediaRecorder é muito inferior ao getUserMedia. Atualmente, apenas o Chrome e o Firefox têm melhor suporte para o MediaRecorder.

==Nota: A tag de vídeo do player de visualização da câmera deve ser definida como silenciada (para eliminar o ruído forte causado pelo eco)==

 const videoConstraints = { largura: 1366, altura: 768 }; deixe stream = await navigator.mediaDevices.getUserMedia ({áudio: verdadeiro, vídeo: videoConstraints }); / Gravar fluxo de dados mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data }; mediaRecorder.onstop = (e) => { // Cria uma instância de dados binários de arquivo por meio do objeto Blob. deixe recorderFile = new Blob (mediaRecorderChunks, { 'type': mediaRecorder.mimeType }); mediaRecorderChunks = []; /./g, '-') + '.mp4', { tipo: 'vídeo/mp4' }); download(URL.createObjectURL(file)); // Baixar função de vídeo download (src) { if (!src) return; )); a.href = src; a.click();

Através dos exercícios práticos acima, acredito que os leitores dominaram as funções básicas da câmera, como tirar fotos, gravar vídeos, salvar arquivos, etc. Como o projeto do aplicativo não é um projeto pessoal e o código-fonte não é público, os interessados ​​podem tentar.