Kommentar: Machen Sie zuerst ein Foto bei HTML5. Schauen wir uns die HTML -Codestruktur an. Natürlich sollte dieser Teil des DOM -Inhalts dynamisch geladen werden, nachdem der Benutzer die Verwendung seiner Kameraereignisse ermöglicht. Interessierte Freunde können darüber lernen.
Demo -Adresse: HTML5 -FotodemonstrationSchauen wir uns zunächst die HTML -Codestruktur an. Natürlich sollte dieser Teil des DOM -Inhalts dynamisch geladen werden, nachdem der Benutzer die Verwendung seiner Kameraereignisse gestartet hat.
Hinweis: Wir verwenden die Auflösung von 640 x 480. Wenn Sie JS Dynamic Generation verwenden, können Sie die Auflösung flexibel steuern.
<!-
Aussage: Diese DIV sollte dynamisch generiert werden, nachdem Webcam, Webcam, dynamisch generiert werden sollte
Breite und Höhe: 640 * 480, natürlich kann es dynamisch gesteuert werden!
->
<!-
Im Idealfall werden diese Elemente erst erstellt, wenn bestätigt wurde, dass die
Der Client unterstützt Video/Kamera, um die zu veranschaulichen
Die beteiligten Elemente werden mit Markup erstellt (nicht JavaScript)
->
<Video autoplay> </Video>
<Taste> Snap Photo </button>
<Canvas> </canvas>
JavaScript
Solange das obige HTML -Element erstellt wird, ist der JavaScript -Teil einfacher als Sie denken:
// Setzen Sie das Ereignishören, DOM -Inhalt wird geladen, was dem $ .Ready () -Effekt von JQuery ähnelt.
window.addeventListener ("DomContentLode", function () {
// Das Canvas -Element wird zur Erfassung verwendet
var canvas = document.getElementById ("canvas"),
context = canvas.getContext ("2d"),
// Videoelement, um den Datenstrom der Kamera zu empfangen und abzuspielen
Video = document.getElementById ("Video"),
VideoOBJ = {"Video": true},
// Eine Fehlerrückruffunktion druckt die Fehlermeldung auf der Konsole aus
Errback = Funktion (Fehler) {
if ("object" === Typeof Fenster.Console) {
console.log ("Video -Erfassungsfehler:", error.code);
}
};
// Video -Hörer einsetzen
// für Standardbrowser
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);
}
// Hören Sie sich den Ereignis der Fototaste an
document.getElementById ("snap"). addEventListener ("klicken", function () {
// Zeichnen Sie auf die Leinwand
context.drawimage (Video, 0, 0, 640, 480);
});
}, FALSCH);
Denken Sie schließlich daran, Ihre Webseite unter den Webserver zu setzen und über das HTTP -Protokoll darauf zuzugreifen.
Darüber hinaus muss die Browserversion neuer sein und neue HTML5-Funktionen unterstützt.
Der Übersetzer ist nicht qualifiziert und hat nicht gemäß dem Originaltext übersetzt. Der verwendete Browser ist Chrom 28.
Veröffentlichen Sie schließlich den vollständigen Code, der starrer ist.
<! DocType html>
<html>
<kopf>
<title> Browser Webcamera </title>
<meta content = "editPlus">
<meta content = "[email protected]">
<meta content = "Inveted von:">
<Script>
// Setzen Sie das Ereignishören, DOM -Inhalt wird geladen, was dem $ .Ready () -Effekt von JQuery ähnelt.
window.addeventListener ("DomContentLode", function () {
// Das Canvas -Element wird zur Erfassung verwendet
var canvas = document.getElementById ("canvas"),
context = canvas.getContext ("2d"),
// Videoelement, um den Datenstrom der Kamera zu empfangen und abzuspielen
Video = document.getElementById ("Video"),
VideoOBJ = {"Video": true},
// Eine Fehlerrückruffunktion druckt die Fehlermeldung auf der Konsole aus
Errback = Funktion (Fehler) {
if ("object" === Typeof Fenster.Console) {
console.log ("Video -Erfassungsfehler:", error.code);
}
};
// Video -Hörer einsetzen
// für Standardbrowser
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);
}
// Hören Sie sich den Ereignis der Fototaste an
document.getElementById ("snap"). addEventListener ("klicken", function () {
// Zeichnen Sie auf die Leinwand
context.drawimage (Video, 0, 0, 640, 480);
});
}, FALSCH);
</script>
</head>
<body>
<div>
<!-
Aussage: Diese DIV sollte dynamisch generiert werden, nachdem Webcam, Webcam, dynamisch generiert werden sollte
Breite und Höhe: 640 * 480, natürlich kann es dynamisch gesteuert werden!
->
<!-
Im Idealfall werden diese Elemente erst erstellt, wenn bestätigt wurde, dass die
Der Client unterstützt Video/Kamera, um die zu veranschaulichen
Die beteiligten Elemente werden mit Markup erstellt (nicht JavaScript)
->
<Video autoplay> </Video>
<Taste> Snap Photo </button>
<Canvas> </canvas>
</div>
</body>
</html>