Kommentar: Die Client -APIs auf mobilen Geräten und Desktop -Computern wurden zunächst nicht synchronisiert. Zuerst gibt es immer einige Funktionen und entsprechende APIs auf mobilen Geräten, aber langsam werden diese APIs auf Desktop -Computern angezeigt. Eine der Anwendungsschnittstellentechnologien ist die GetUsMedia-API, mit der Anwendungsentwickler auf Benutzerkameras oder integrierte Kameras zugreifen können.
Client -APIs auf mobilen Geräten und Desktop -Computern wurden zunächst nicht synchronisiert. Zuerst gibt es immer einige Funktionen und entsprechende APIs auf mobilen Geräten, aber langsam werden diese APIs auf Desktop -Computern angezeigt. Eine der Anwendungsschnittstellentechnologien ist die GetUsMedia-API, mit der Anwendungsentwickler auf Benutzerkameras oder integrierte Kameras zugreifen können. Lassen Sie mich Ihnen zeigen, wie Sie über einen Browser auf Ihre Kamera zugreifen und Screenshots extrahieren können.
HTML -Code
Ich habe einige Kommentare in den folgenden Code geschrieben. Bitte lesen Sie:
<!-
Idealerweise sollten wir zunächst feststellen, ob sich Ihr Gerät eingeschaltet hat
Es gibt Kameras oder Kameras, aber zum Einfachheit halber sind wir direkt hier
Schreiben Sie HTML -Tags, anstatt JavaScript zuerst zu verwenden, um zuerst zu urteilen
Generieren Sie diese Tags dynamisch dynamisch
->
<Video autoplay> </Video>
<Taste> Snap Photo </button>
<Canvas> </canvas>
Bevor Sie die oben genannten Tags schreiben, sollten Sie feststellen, ob der Client des Benutzers Kameraunterstützung hat. Um nicht so problematisch zu sein, werden diese HTML -Tags hier direkt geschrieben. Es ist zu beachten, dass die Länge und die Breite, die wir hier verwenden, 640 × 480 sind.
JavaScript -Code
Da wir HTML von Hand schreiben, ist der folgende JS -Code viel einfacher als Sie denken.
// Event -Hörer einsetzen
window.addeventListener ("DomContentLode", function () {
// Elemente schnappen, Einstellungen erstellen usw.
var canvas = document.getElementById ("canvas"),
context = canvas.getContext ("2d"),
Video = document.getElementById ("Video"),
VideoOBJ = {"Video": true},
Errback = Funktion (Fehler) {
console.log ("Video -Erfassungsfehler:", error.code);
};
// Video -Hörer einsetzen
if (navigator.getUlermedia) {// Standard
Navigator.getUlermedia (VideoObj, Funktion (Stream) {
Video.src = Stream;
Video.play ();
}, errback);
} else if (navigator.webkitgetUnermedia) {// webkit-prefixed
navigator.webkitgetUnermedia (VideoObj, Funktion (Stream) {
Video.src = window.webkiturl.createObjecturl (Stream);
Video.play ();
}, errback);
}
sonst wenn (navigator.mozgetUlermedia) {// Firefox-Prefixed
navigator.mozgetUsermedia (VideoObj, Funktion (Stream) {
Video.src = window.url.createObjecturl (Stream);
Video.play ();
}, errback);
}
}, FALSCH);
Sobald festgestellt wird, dass der Browser des Benutzers GetUsMedia unterstützt, ist Folgendes sehr einfach. Sie müssen das SRC dieses Videoelements nur auf die Live -Videoverbindung des Benutzers einstellen. Das sind alles, was Sie tun müssen, um mit einem Browser auf Ihre Kamera zuzugreifen!
Die Funktion der Fotos kann nur ein wenig komplizierter sein. Wir fügen der Schaltfläche einen Monitor hinzu, um das Video auf der Leinwand zu zeichnen.
// die 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 ...
In der Vergangenheit mussten wir Plug-Ins von Drittanbietern verwenden, um über den Browser auf die Kamera des Benutzers zuzugreifen, was etwas kompliziert war. Jetzt benötigen wir nur noch HTML5 -Canvas -Technologie und JavaScript, um die Kameras der Benutzer einfach und schnell zu betreiben. Es geht nicht nur darum, auf die Kamera zuzugreifen, sondern auch, weil die Canvas -Technologie von HTML5 so leistungsfähig ist, dass wir den Bildern verschiedene faszinierende Filtereffekte verleihen können. Verwenden Sie jetzt Ihre eigene Kamera, um ein Foto von sich in Ihrem Browser zu machen!