Ausführliche praktische Erklärung der HTML5-Foto- und Kamerafunktionen

Kürzlich arbeite ich an einer Cloud-Kameraanwendung für die Chrome-App. Die Anwendung umfasst Kernfunktionen wie das Aufnehmen von Bildern, Videoaufzeichnung, das Speichern von Fotos und Videos, das Hochladen von Dateien usw., was viele HTML5-APIs im Zusammenhang mit dem Medienstreaming umfasst. Der Zweck des Schreibens dieses Artikels besteht erstens darin, die Wissenspunkte zusammenzufassen und zu ordnen und vor allem Lesern mit relevanten Bedürfnissen eine Anleitung zu geben.

Hinweis: Dieser Artikel basiert auf tatsächlichen Kämpfen und vermittelt nicht zu viel theoretisches Wissen.

Die getUserMedia-API von HTML5 bietet Benutzern eine Schnittstelle für den Zugriff auf Hardware-Mediengeräte (Kamera, Video, Audio, geografischer Standort usw.). Basierend auf dieser Schnittstelle können Entwickler auf Hardware-Mediengeräte zugreifen, ohne auf Browser-Plug-Ins angewiesen zu sein.

Die Browserkompatibilität ist wie folgt:

Wie Sie auf dem Bild oben sehen können, werden die Mainstream-Browser Firefox, Chrome, Safari, Opera usw. vollständig unterstützt.

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

 // enumerateDevices ruft alle Mediengeräte ab const mediaDevices = waiting navigator.mediaDevices.enumerateDevices(); // Filter zum Abrufen des Kamerageräts über das Geräteinstanz-King-Attribut videoinput const videoDevices = mediaDevices.filter(item => item.kind === 'videoinput') ||. []; // Holen Sie sich die Frontkamera const videoDeviceId = videoDevices[0].deviceId; videoConstraints = { deviceId: { Exact: videoDeviceId }, width: 1366, height: 768 }; let stream = waiting navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoDevices[1].deviceId; const videoConstraints = { deviceId: { Exact: videoDeviceId }, width: 1366, height: 768 }; let stream = waiting navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints });

 // Erfassen Sie den Videostream über Canvas und generieren Sie ein Bild im Base64-Format const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); context.drawImage(videoNode, 0, 0, canvas.width, canvas.height download(canvas.toDataURL('image/jpeg')); // Bildfunktion herunterladen (src) { if (!src) return; const a = document.createElement('a'); .click(); }

 let stream = wait navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); Schalte die Kamera nach 3 Sekunden aus setTimeout(function () { stream.getTracks().forEach(track => track.stop( )) ; stream = null }, 3000);

Damit ist die einfache Kameraaufnahmefunktion abgeschlossen

Der grundlegende Prozess der Fotografie besteht darin, einen Videostream aufzuzeichnen und ihn als Audio- und Videodatei zu speichern. Das HTML5 MediaRecorder-Objekt bietet Multimedia-Aufzeichnungs- und Videoaufzeichnungsfunktionen.

Die Browserkompatibilität ist wie folgt:

Wie in der Abbildung oben gezeigt, ist die Kompatibilität des Browsers mit MediaRecorder weitaus schlechter als bei getUserMedia. Derzeit bieten nur Chrome und Firefox eine bessere Unterstützung für MediaRecorder.

==Hinweis: Das Video-Tag des Kameravorschau-Players muss stummgeschaltet sein (um das durch Echo verursachte harte Rauschen zu eliminieren)==

 const videoConstraints = { width: 1366, height: 768 }; let stream = waiting navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); let mediaRecorderChunks = []; / Datenstrom aufzeichnen mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) { // Erstellen Sie eine Datei-Binärdateninstanz über das Blob-Objekt. 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)); // Videofunktion herunterladen (src) { if (!src) return; )); a.href = src; a.click(); mediaRecorder.stop();

Ich glaube, dass die Leser durch die oben genannten praktischen Übungen grundlegende Kamerafunktionen wie das Aufnehmen von Bildern, das Aufzeichnen von Videos, das Speichern von Dateien usw. beherrschen. Da es sich bei dem Anwendungsprojekt nicht um ein persönliches Projekt handelt und der Quellcode nicht öffentlich ist, möchten Interessierte es vielleicht einmal ausprobieren.