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
PHP-bezogene Pfade und Änderungsmethoden in der Ubuntu-Umgebung
PHP-bezogene Pfade in der Ubuntu-Umgebung PHP-Pfa...
Detaillierte Erklärung zur Verwendung struktureller Pseudoklassenselektoren und Pseudoelementselektoren in CSS3
Einführung in strukturelle Pseudoklassenselektore...
So verwenden Sie Portainer zum Erstellen einer visuellen Schnittstelle für Docker
Portainer-Einführung Portainer ist ein grafisches...
Automatisches Erstellen und Bereitstellen mit Docker+Jenkins
Dieser Artikel stellt die automatische Build-Bere...
Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
MySQL Detaillierte Analyse vom Löschen der Datenbank bis zum Weglaufen_Fortgeschritten (I) - Datenintegrität
1. Einführung in die Datenintegrität 1. Einführun...
So implementieren Sie eine Remote-Verbindung für Redis unter Linux
Nachdem Sie Redis unter Linux installiert haben, ...
So mounten Sie die Datenfestplatte nach dem Initialisieren der Systemfestplatte in Linux erneut
Erneutes Mounten des Datenträgers nach dem Initia...
Das Umschalten zwischen React-Antd-Tabs führt zu wiederholter Aktualisierung von Unterkomponenten
beschreiben: Wenn die Tabs-Komponente hin- und he...
So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue
Bei der Verwendung von Vue zur Entwicklung von Pr...
Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios
Inhaltsverzeichnis Ideen Abfangen von Anfragen An...
Verwenden Sie die Vue3+Vant-Komponente, um die Suchverlaufsfunktion der App zu implementieren (Beispielcode).
Ich entwickle derzeit ein neues App-Projekt. Dies...
Details zur MySQL-Datenbankarchitektur
Inhaltsverzeichnis 1. MySQL-Architektur 2. Netzwe...
Natives JS zur Implementierung eines Dropdown-Menüs
Dropdown-Menüs sind auch im wirklichen Leben weit...
So verwenden Sie eine Multi-Core-CPU, um Ihre Linux-Befehle zu beschleunigen (GNU Parallel)
Mussten Sie schon einmal sehr große Datenmengen (...