So laden Sie die Kamera in HTML

Wirkungsdiagramm: Gesamtwirkung:

Video wird geladen:

Foto:

Schritt 1: HTML-Elemente erstellen

Zuerst müssen wir ein HTML5-Dokument erstellen.

<!doctype html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</Kopf>

<Text>
</body>
</html>

Fügen Sie dann den folgenden Code in <body></body> ein:

<video id="video" width="640" height="480" automatische Wiedergabe></video>
<button id="snap">Bildschirmfoto</button>
<canvas id="canvas" width="640" height="480"></canvas>

Schritt 2: Erstellen Sie das JavaScript

Erstellen Sie zunächst ein JavaScript in <head></head> :

<Skriptsprache="Javascript">
	// Elemente erfassen, Einstellungen vornehmen, etc.
var video = document.getElementById('video');

// Erhalten Sie Zugriff auf die Kamera!
wenn (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Kein Hinzufügen von `{ audio: true }`, da wir jetzt nur Video wollen
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = Fenster.URL.createObjectURL(Stream);
        video.srcObject = Stream;
        video.abspielen();
    });
}
/* Legacy-Code unten: getUserMedia 
sonst wenn(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ Video: true }, Funktion(Stream) {
        video.src = Stream;
        video.abspielen();
    }, errZurück);
} sonst wenn (navigator.webkitGetUserMedia) { // mit WebKit-Präfix
    navigator.webkitGetUserMedia({ Video: true }, Funktion(Stream){
        video.src = Fenster.webkitURL.createObjectURL(Stream);
        video.abspielen();
    }, errZurück);
} sonst wenn (navigator.mozGetUserMedia) { // mit Mozilla-Präfix
    navigator.mozGetUserMedia({ Video: true }, Funktion(Stream){
        video.srcObject = Stream;
        video.abspielen();
    }, errZurück);
}
*/
</Skript>

Fügen Sie dann den folgenden Code nach dem gerade erstellten HTML- Element ein:

<Skriptsprache="Javascript">
	// Elemente zum Aufnehmen des Schnappschusses
var Leinwand = document.getElementById('Leinwand');
var Kontext = Canvas.getContext('2d');
var video = document.getElementById('video');

// Fotoaufnahme auslösen
document.getElementById("snap").addEventListener("klicken", function() {
	Kontext.drawImage(Video, 0, 0, 640, 480);
});
</Skript>

Jetzt kann dieses HTML die Funktionen zum Öffnen der Kamera und Aufnehmen von Bildern ausführen!

Dies ist das Ende dieses Artikels zum Laden der Kamera in HTML. Weitere relevante HTML-Inhalte zum Laden der Kamera finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)

>>: Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)