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>
Nach dem Login kopieren
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>
Nach dem Login kopieren
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!
