Wie öffne ich eine Webcam mit JavaScript?
Aug 24, 2023 pm 03:09 PM
In diesem Tutorial schauen wir uns den Vorgang zum Öffnen einer Webcam mit JavaScript an. Dies kann also mit WebRTC erfolgen. WebRTC ist die Abkürzung für Web Real-Time Communications. Mit diesem Objekt können wir auf die auf dem Gerät des Benutzers verfügbaren Webcam- und Mikrofongeräte zugreifen und diese erfassen.
Wie greife ich auf die Webcam zu?
Wir können über das ECMAScript-Objekt navigator.mediaDevices.getUserMedia(constraints) auf die Webcam und das Mikrofon des Benutzergeräts zugreifen.
Daher fragt die Funktion getUserMedia() standardmäßig nach der Benutzererlaubnis zur Verwendung Ihrer Webcam. Die Funktion gibt ein „Versprechen“ zurück. Sobald Sie auf „OK“ klicken und die Erlaubnis erteilen, wird das Versprechen ausgelöst und die Webcam in Ihrem System aktiviert. Andernfalls wird auch eine Catch-Methode ausgeführt, wenn Sie dies nicht zulassen Schalten Sie die Webcam aus. Wir können der Funktion
getUserMedia()auch Parameter übergeben, genau wie wir ein Bild mit einer bestimmten Breite oder Höhe wünschen. Der Vorgang des Öffnens der Webcam
Wir können die folgenden Schritte ausführen, um die Webcam mit JavaScript zu öffnen.
- Schritt 1
– Fügen Sie HTML-Elemente wie Videos hinzu, um den Webcam-Stream anzuzeigen und Taste.
- Schritt 2
– Überprüfen Sie, ob die Webcam verfügbar ist, und lösen Sie das zurückgegebene Versprechen getUserMedia-Funktion.
- SCHRITT 3
– Übergeben Sie Parameter wie Audio und Video an die Funktion getUserMedia() wahr, weil wir sie nutzen werden
- Schritt 4
– Für Smartphones müssen wir die Option faceingMode als beides verwenden Die Kamera ist verfügbar und standardmäßig schalten wir sie mit der Frontkamera ein.
Beispiel
Nachfolgend finden Sie eine einfache Vorgehensweise zum Einschalten Ihrer Webcam. Wir haben die oben genannten Schritte befolgt, um unsere Aufgabe abzuschließen.
<html>
<head>
<title>Open webcam using JavaScript. </title>
</head>
<body>
<h1>Open WebCam Using JavaScript</h1>
<br/>
<button id="startBtn" onclick="openCam()">Open Webcam</button>
<br/><br/>
<video id="videoCam"></video>
<script>
function openCam(){
let All_mediaDevices=navigator.mediaDevices
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
console.log("getUserMedia() not supported.");
return;
}
All_mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(vidStream) {
var video = document.getElementById('videoCam');
if ("srcObject" in video) {
video.srcObject = vidStream;
} else {
video.src = window.URL.createObjectURL(vidStream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(e) {
console.log(e.name + ": " + e.message);
});
}
</script>
</body>
</html>
Verwenden Sie CSS, um die Benutzeroberfläche zu entwerfen
Lassen Sie uns zunächst unsere Weboberfläche mit HTML und CSS entwerfen.
Wir fügen eine Komponente wie den Webcam-Videobereich hinzu und setzen deren Höhe und Breite mithilfe von CSS auf 400 Pixel und die Hintergrundfarbe auf Schwarz. Es wird der Webcam-Videostream angezeigt.
Fügen Sie eine Schaltfläche namens „Kamera öffnen“ hinzu und wenden Sie deren CSS-Eigenschaften an. Diese Schaltfläche wird zum Starten der Webcam verwendet.
Jetzt fügen wir den Funktionscode hinzu und betten ihn in das Hauptprogramm ein. Wir rufen diese Funktion auf, wenn auf die Schaltfläche „Kamera öffnen“ geklickt wird, und innerhalb dieser Funktion werden alle Anweisungen wie oben beschrieben ausgeführt.
Beispiel
Im folgenden Beispiel haben wir etwas CSS hinzugefügt, um eine interaktivere Benutzeroberfläche zu entwerfen.
<html>
<head>
<title>Open webcam using JavaScript.</title>
<style>
*{
background-color: #658EA9;
}
#videoCam {
width: 630px;
height: 300px;
margin-left: 0px;
border: 3px solid #ccc;
background: black;
}
#startBtn {
margin-left: 280px;
width: 120px;
height: 45px;
cursor: pointer;
font-weight: bold;
}
#startBtn:hover{
background-color: #647C90;
color: red;
}
</style>
</head>
<body>
<h1>Open WebCam Using JavaScript</h1>
<br/>
<video id="videoCam"></video>
<br/><br/>
<button id="startBtn" onclick="openCam()">Open Camera</button>
<script>
function openCam(){
let All_mediaDevices=navigator.mediaDevices
if (!All_mediaDevices || !All_mediaDevices.getUserMedia) {
console.log("getUserMedia() not supported.");
return;
}
All_mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(vidStream) {
var video = document.getElementById('videoCam');
if ("srcObject" in video) {
video.srcObject = vidStream;
} else {
video.src = window.URL.createObjectURL(vidStream);
}
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(e) {
console.log(e.name + ": " + e.message);
});
}
</script>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie öffne ich eine Webcam mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Ersetzen Sie Stringzeichen in JavaScript
Mar 11, 2025 am 12:07 AM
Ersetzen Sie Stringzeichen in JavaScript
Benutzerdefinierte Google -Search -API -Setup -Tutorial
Mar 04, 2025 am 01:06 AM
Benutzerdefinierte Google -Search -API -Setup -Tutorial
8 atemberaubende JQuery -Seiten -Layout -Plugins
Mar 06, 2025 am 12:48 AM
8 atemberaubende JQuery -Seiten -Layout -Plugins
Erstellen Sie Ihre eigenen AJAX -Webanwendungen
Mar 09, 2025 am 12:11 AM
Erstellen Sie Ihre eigenen AJAX -Webanwendungen
Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter
Mar 05, 2025 am 12:54 AM
Verbessern Sie Ihr JQuery -Wissen mit dem Quell Betrachter
10 Mobile Cheat Sheets für die mobile Entwicklung
Mar 05, 2025 am 12:43 AM
10 Mobile Cheat Sheets für die mobile Entwicklung
