Heim > Artikel > Web-Frontend > Wie öffne ich eine Webcam mit JavaScript?

Wie öffne ich eine Webcam mit JavaScript?

PHPznach vorne: 2023-08-24 15:09:082155Durchsuche

如何使用 JavaScript 打开网络摄像头？

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.

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>

Wie Sie auf dem Ausgabebildschirm sehen können, werden wir beim Klicken auf die Schaltfläche „Kamera öffnen“ um Zugriff auf die Webcam gebeten. Wenn wir diesen Zugriff zulassen, wird der Webcam-Videostream im Videobereichsbildschirm gestartet. Wenn wir dies tun, wird der Webcam-Videostream gestartet Wenn Sie keinen Zugriff gewähren, wird keine Ausgabe angezeigt.

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie stelle ich die Höhe einer Ellipse mit FabricJS ein?Nächster Artikel：Wie stelle ich die Höhe einer Ellipse mit FabricJS ein?

In Verbindung stehende Artikel

Mehr sehen