Explication pratique détaillée des fonctions HTML5 photo et appareil photo

Récemment, je travaille sur une application de caméra cloud pour l'application Chrome. L'application comprend des fonctions de base telles que la prise de photos, l'enregistrement vidéo, l'enregistrement de photos et de vidéos, le téléchargement de fichiers, etc., qui impliquent de nombreuses API HTML5 liées au streaming multimédia. Le but de la rédaction de cet article est, premièrement, de résumer et de trier les points de connaissances, et surtout, de fournir quelques conseils aux lecteurs qui ont des besoins pertinents.

Remarque : cet article est basé sur des combats réels et n'introduit pas trop de connaissances théoriques.

L'API getUserMedia de HTML5 fournit aux utilisateurs une interface pour accéder aux médias des périphériques matériels (appareil photo, vidéo, audio, emplacement géographique, etc.). Sur la base de cette interface, les développeurs peuvent accéder aux périphériques multimédias matériels sans recourir à des plug-ins de navigateur.

La compatibilité du navigateur est la suivante :

Comme vous pouvez le voir sur l'image ci-dessus, les navigateurs grand public Firefox, Chrome, Safari, Opera, etc. bénéficient d'une prise en charge complète.

 <video id=video autoplay></video> --------------------------------------- ----------------------- const videoConstraints = { largeur : 1366, hauteur : 768 }; const videoNode = document.querySelector('#video'); stream = wait navigator.mediaDevices.getUserMedia({ audio : true, video : videoConstraints }); videoNode.play();

 // enumerateDevices obtient tous les périphériques multimédias const mediaDevices = wait navigator.mediaDevices.enumerateDevices(); // Filtre pour obtenir le périphérique de caméra via l'attribut king de l'instance de périphérique videoinput const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput ') || []; // Récupère la const de la caméra frontale videoDeviceId = videoDevices[0].deviceId; videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 }; let stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoDevices[1].deviceId; const videoConstraints = {deviceId : { exact : videoDeviceId }, width : 1366, height : 768 } ; let stream = wait navigator.mediaDevices.getUserMedia({ audio : true, video : videoConstraints });

 // Capturez le flux vidéo via Canvas et générez une image au format base64 const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); contexte. drawImage (videoNode, 0, 0, canvas.width, canvas.height download (canvas.toDataURL ('image/jpeg')); // Télécharger la fonction d'image download (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date()); .cliquez();

 let stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // Éteignez la caméra après 3 s setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; flux = nul }, 3000);

Ceci complète la fonction simple de prise de vue de l'appareil photo

Le processus de base de la photographie consiste à enregistrer un flux vidéo et à le sauvegarder sous forme de fichier audio et vidéo. L'objet HTML5 MediaRecorder fournit des fonctions d'enregistrement multimédia et d'enregistrement vidéo.

La compatibilité du navigateur est la suivante :

Comme le montre la figure ci-dessus, la compatibilité du navigateur avec MediaRecorder est bien inférieure à celle de getUserMedia. Actuellement, seuls Chrome et Firefox offrent une meilleure prise en charge de MediaRecorder.

==Remarque : la balise vidéo du lecteur d'aperçu de la caméra doit être réglée sur muet (pour éliminer le bruit agressif causé par l'écho)==

 const videoConstraints = { largeur : 1366, hauteur : 768 } ; let stream = wait navigator.mediaDevices.getUserMedia({ audio : true, video : videoConstraints }); let mediaRecorder = new MediaRecorder(stream); / Enregistrer le flux de données mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // Crée une instance de données binaires de fichier via l'objet Blob. let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType }); mediaRecorderChunks = []; const file = new File([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { type : 'video/mp4' }); download(URL.createObjectURL(file)); // Télécharger la fonction vidéo download (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date( )); a.href = src; a.click(); } }; // Arrêter l'enregistrement et déclencher l'événement onstop

Grâce aux exercices pratiques ci-dessus, je pense que les lecteurs maîtrisent les fonctions de base de l'appareil photo, telles que la prise de photos, l'enregistrement vidéo, la sauvegarde de fichiers, etc. Le projet d'application n'étant pas un projet personnel et le code source n'étant pas public, ceux qui sont intéressés voudront peut-être l'essayer.