Как получить доступ к веб камере в HTML

HTML5 позволяет получить доступ к камере и микрофону вашего компьютера. Вы могли видеть такие примеры на сайтах для видео чатов и видео конференций, для стриминга, для валидации на финансовых сайтах и прочих. Чтобы видеопоток передавался на сервер, нужно предусмотреть принимающий код на сервере. В этой статье да HTML код только для показа изображения в веб-браузере. С его помощью вы сможете начать разработу по передачи видео с веб сайта на сервер.

Предварительно любой сайт должен получить ваше согласие на это действие.

Если вам нужен HTML код для получения видео с вашей камеры, то вот он:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="Display Webcam Stream" name="title">
        <title>Display Webcam Stream</title>
        <style>
            body {
                margin: 30px;
            }

            h1 {
                font-family: sans-serif;
                color: #666;
            }

            #container {
                width: 500px;
                height: 375px;
                border: 10px #333 solid;
            }

            #videoElement {
                width: 500px;
                height: 375px;
                background-color: #666;
            }

            button {
                margin-top: 20px;
                font-size: 12px;
                font-weight: bold;
                padding: 5px;
                background-color: white;
                border: 5px solid black;
            }

            button:hover {
                background-color: yellow;
            }

            button:active {
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <h1>Проверка веб камеры онлайн</h1>
        <div id="container">
            <video autoplay id="videoElement">
            </video>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="stop">Stop Video</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button id="start">Start Video</button>
        <script>

            var video = document.querySelector("#videoElement");
            var stopVideo = document.querySelector("#stop");
            var startVideo = document.querySelector("#start");


            stopVideo.addEventListener("click", stop, false);
            startVideo.addEventListener("click", startWebCam, false);


            function startWebCam() {
                if (navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({video: true})
                            .then(function (stream) {
                                video.srcObject = stream;
                            })
                            .catch(function (err0r) {
                                console.log("Something went wrong!");
                            });
                }
            }

            function stop(e) {
                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;
            }
        </script>
    </body>
</html>

Сохраните этот код в файл с расширением .htm и откройте любым веб-браузером.

Вы можете использовать этот файл, например, для проверки своей веб-камеры и качество видео.

Обратите внимание, что изображение никуда не пересылается — всё происходит внутри вашего веб-браузера.

Сайт, который использует этот же самый код для проверки веб камеры: https://w-e-b.site/?act=check-web-cam-online

На данном сайте проверка происходит в вашем браузере и изображение никуда не отправляется.

Как получить доступ к веб камере в HTML

Связанные статьи:

Рекомендуемые статьи:

Оставить комментарий Отменить ответ