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 <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
<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! |
>>: Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)
Artikel empfehlen
Detailliertes Tutorial zum Festlegen des Passworts für die kostenlose MySQL-Installationsversion
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
Verwenden von js, um einen Wasserfalleffekt zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker
Vor Kurzem musste ich die Zoom-Videokonferenz tes...
Natives JavaScript zur Implementierung einer zufälligen Namensaufruftabelle
In diesem Artikelbeispiel wird der spezifische Co...
Integrierte Objekte, Werttypen und Referenztypen in JavaScript-Objekten erklärt
Inhaltsverzeichnis Objekt Objektdefinition Iterie...
Ubuntu führt regelmäßig Beispielcode eines Python-Skripts aus
Originallink: https://vien.tech/article/157 Vorwo...
Detaillierte Erklärung zur sauberen Deinstallation von Docker
Zunächst die Informationen zur Serverumgebung: Gr...
So verwenden Sie Nginx als Load Balancer für MySQL
Hinweis: Die Nginx-Version muss 1.9 oder höher se...
So zeigen Sie im Hintergrund laufende Programme in Linux an und schließen sie
1. Führen Sie die .sh-Datei aus Sie können es dir...
Vue+Swiper realisiert Timeline-Effekt
In diesem Artikel wird der spezifische Code von v...
In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt
Ich möchte eine Frage stellen. Ich habe in Dreamw...
Interaktive Erlebnistrends, die 2015-2016 zum Mainstream werden
Der wichtigste Artikel zum interaktiven Design im...
Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen
1. Komplexe SQL-Abfragen 1.1. Einzeltabellenabfra...
Einführung mehrerer benutzerdefinierter Schriftarten in CSS3
Heute habe ich ein Problem in HTML gefunden. Es s...
Erläutern Sie das Binlog-Protokoll von MySQL und wie Sie das Binlog-Protokoll zum Wiederherstellen von Daten verwenden
Wie wir alle wissen, sind Binlog-Protokolle für M...