HTML5 Canvas JS steuert die Kamera auf Ihrem Computer oder Mobiltelefon. Instanz_html5-Tutorial-Fähigkeiten

Client-APIs auf Mobilgeräten und Desktop-Computern werden zunächst nicht synchronisiert. Bestimmte Funktionen und entsprechende APIs werden zunächst immer auf mobilen Geräten verfügbar sein, langsam werden diese APIs aber auch auf Desktop-Computern Einzug halten. Eine solche Anwendungsschnittstellentechnologie ist die getUserMedia-API, die Anwendungsentwicklern den Zugriff auf die Kamera des Benutzers oder die integrierte Kamera ermöglicht. Ich zeige Ihnen, wie Sie über einen Browser auf Ihre Kamera zugreifen und Screenshots extrahieren.

HTML-Code

Ich habe einige Kommentare in den folgenden Code geschrieben, bitte lesen Sie:

Kopieren Sie den Code

Der Code lautet wie folgt :

<!--
Idealerweise sollten wir zunächst feststellen, ob sich
auf Ihrem Gerät befindet Es gibt eine Webcam oder eine Kamera, aber der Einfachheit halber machen wir es einfach hier
Schreiben Sie HTML-Tags, anstatt JavaScript zur Beurteilung von
zu verwenden Dann generieren Sie diese Tags dynamisch
-->
<video id="video" width="640" height="480" automatische Wiedergabe></video>
<button id="snap">Foto aufnehmen</button>
<canvas id="canvas" width="640" height="480"></canvas>

Bevor Sie die oben genannten Tags schreiben, sollten Sie feststellen, ob der Client des Benutzers über Kameraunterstützung verfügt. Um Probleme zu vermeiden, werden diese HTML-Tags jedoch direkt hier geschrieben. Beachten Sie, dass die hier verwendete Länge und Breite 640 × 480 beträgt.

JavaScript-Code

Da wir den HTML-Code manuell geschrieben haben, ist der folgende js-Code viel einfacher als Sie denken.

Code kopieren

Der Code lautet wie folgt:

// Event-Listener einrichten
window.addEventListener("DOMContentLoaded", function() {
// Elemente greifen, Einstellungen erstellen usw.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Videoaufnahmefehler: ", error.code); };
// Video-Listener einrichten
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if(navigator.mozGetUserMedia) { // Firefox-Präfix
navigator.mozGetUserMedia(videoObj, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);

Sobald festgestellt wurde, dass der Browser des Benutzers getUserMedia unterstützt, ist Folgendes ganz einfach: Sie müssen nur den Quellcode des Videoelements auf die Live-Videoverbindung der Kamera des Benutzers festlegen. Das ist alles, was Sie tun müssen, um über Ihren Browser auf die Kamera zuzugreifen!
Die Funktion zum Aufnehmen von Bildern kann nur als etwas kompliziert bezeichnet werden. Wir fügen der Schaltfläche einen Listener hinzu und zeichnen den Videobildschirm auf die Leinwand.

Code kopierenDer Code lautet wie folgt:

//Fotoaktion auslösen
document.getElementById("snap")
.addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});

Natürlich können Sie dem Bild auch einige Filtereffekte hinzufügen…
Früher mussten wir ein Plug-in eines Drittanbieters verwenden, um über den Browser auf die Kamera des Benutzers zuzugreifen, was etwas kompliziert war. Jetzt benötigen wir nur noch die HTML5-Canvas-Technologie und JavaScript und können die Kamera des Benutzers einfach und schnell bedienen. Es ist nicht nur der Zugriff auf die Kamera, sondern dank der leistungsstarken Canvas-Technologie von HTML5 können wir den Bildern auch verschiedene bezaubernde Filtereffekte hinzufügen. Machen Sie jetzt ein Foto von sich mit Ihrer eigenen Kamera in Ihrem Browser!