Как интегрировать веб-камеру с помощью JavaScript
Здравствуйте, ребята. В этом уроке мы попытаемся решить приведенный ниже запрос на упоминание. а также мы поделимся простым фрагментом кода JavaScript, с помощью которого вы сможете легко интегрировать веб-камеру в веб-страницу.
Общий запрос
- Как получить доступ к веб-камере в html5 с помощью JavaScript
- Как получить доступ к веб-камере с помощью JavaScript
- Как интегрировать веб-камеру с помощью JavaScript
Во-первых, нам нужно создать структуру HTML DOM, используя следующий фрагмент кода. Чтобы интегрировать веб-камеру в веб-страницу, мы будем использовать HTML-тег <video>
.
<video id="video" width="100%" height="100%" autoplay></video>
Интеграция веб-камеры с помощью JavaScript шаг за шагом
Во-первых, нам нужно создать два файла index.html и style.css, затем нам нужно написать для них код.
Интеграция веб-камеры Шаг: 1
Добавьте код ниже в index.html
<!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>
Интеграция веб-камеры Шаг: 2
Затем нам нужно добавить код для style.css, который я привожу на экране ниже.
* { 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; }