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
Zugriff auf die Webcam in HTML5 mit JavaScript
So greifen Sie mit JavaScript auf die Webcam zu
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>