logo
 JavaScript >> Javascript-Tutorial >  >> Tags >> web

So integrieren Sie eine Webcam mit JavaScript

Hallo Leute In diesem Tutorial werden wir versuchen, die unten stehende Abfrage zu lösen. Außerdem teilen wir ein einfaches JavaScript-Code-Snippet, mit dem Sie Ihre Webcam ganz einfach in eine Webseite integrieren können.

Allgemeine Abfrage

  1. Zugriff auf die Webcam in HTML5 mit JavaScript
  2. So greifen Sie mit JavaScript auf die Webcam zu
  3. So integrieren Sie eine Webcam mit JavaScript

Zuerst müssen wir mit dem folgenden Code-Snippet eine HTML-DOM-Struktur erstellen. Um die Webcam in die Webseite zu integrieren, verwenden wir HTML <video> Schild. 

<video id="video" width="100%" height="100%" autoplay></video>

Webcam per JavaScript Schritt für Schritt einbinden

Zuerst müssen wir zwei Dateien index.html erstellen und style.css dann müssen wir Code dafür schreiben.

Webcam integrieren Schritt:1

Fügen Sie den folgenden Code in index.html hinzu 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>How to Integrate Webcam using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
</head>

<body>
    <div class="webcam">
        <div class="video-outer">
            <video id="video" height="100%" width="100%" autoplay></video>
        </div>

        <div class="webcam-start-stop">
            <a href="#!" class="btn-start" onclick="start()">Start</a>
            <a href="#!" class="btn-stop" onclick="StopWebCam()">Stop</a>
        </div>
    </div>


    <script>
        var StopWebCam = function () {
            var stream = video.srcObject;
            var tracks = stream.getTracks();

            for (var i = 0; i < tracks.length; i++) {
                var track = tracks[i];
                track.stop();
            }
            video.srcObject = null;
        }

        var start = function () {
            var video = document.getElementById("video"),
                vendorURL = window.URL || window.webkitURL;

            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                    }).catch(function (error) {
                        console.log("Something went wrong");
                    });
            }
        }
        $(function () { start(); });
    </script>
</body>

</html>

Webcam integrieren Schritt:2

Dann müssen wir Code für style.css hinzufügen Welchen Code gebe ich im folgenden Bildschirm an. 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
}
body {
  height: 100vh;
  width: 100vw;
  background: #f2f4f6;
  overflow: hidden;
}
.webcam-start-stop {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 5px 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.webcam-start-stop > a {
  text-decoration: unset;
  color: #000;
  background: #fff;
  padding: 10px 20px;
}

Webcam-Videoausgabe integrieren:

Webcam-Codepen-Ausgabe integrieren:

Mein bestes Tutorial