Используя Javascript Camera API, вы можете получить доступ к передней и задней камерам устройства со своей статической HTML-страницы. Не требует установки какой-либо библиотеки или модуля. вы можете сделать это, просто написав небольшой код. Пошагово объясню.

Во-первых, вам нужно добавить тег видео html5 в ваш index.html.

<video id="video"></video>

В файл camera.js добавьте следующий фрагмент кода. Сначала проверьте, поддерживает ли ваш браузер navigator.mediaDevices.

if(navigator && navigator.mediaDevices){
    //Your browser is supporting camera API.
}else{
    console.log("camera API is not supported by your browser")
}

На следующем шаге мы добавим код API камеры.

if(navigator && navigator.mediaDevices){
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
       //use the stream to you code
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}

как вы можете видеть, в приведенном выше коде есть параметры параметров. Это объект конфигурации, который мы передадим, чтобы ограничить или разрешить некоторые его функции. Например, чтобы разрешить звук:

{ audio: true }

для доступа к фронтальной камере:

{ video: { facingMode: "user" } }

для доступа к задней камере:

{ video: { facingMode: { exact: "environment" } } }

Для получения дополнительной информации о настройке посетите этот документ. Мы почти закончили с настройкой, теперь назначим поток тегу видео.

if(navigator && navigator.mediaDevices){
    const options = { audio: false, video: { facingMode: "user", width: 200, height: 200  } }
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
        var video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}

Итак, мы почти закончили, теперь мы добавим кнопку для захвата изображения из видео и отображения его на холсте. Это наш последний файл camera.js.

var video, canvas, ctx;
if(navigator && navigator.mediaDevices){
    const options = { audio: false, video: { facingMode: "user", width: 300, height: 300  } }
    navigator.mediaDevices.getUserMedia(options)
    .then(function(stream) {
        video = document.querySelector('video');
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
    })
    .catch(function(err) {
        //Handle error here
    });
}else{
    console.log("camera API is not supported by your browser")
}

function clickPhoto() {
   ctx.drawImage(video, 0,0, canvas.width, canvas.height);
 }

Вот наш окончательный файл index.html.

<body>
     <div style="text-align: center;">                                                   
          <video id="video" style="text-align: center; border-radius: 20px;"></video>
        </div>
        <div  style="text-align: center;">
            <button type="button" class="btn btn-warning" onclick="clickPhoto();">Take Photo</button>
         </div>
         <div style="text-align: center;">
            <canvas id="myCanvas" width="300" height="300" style="text-align: center; border-radius: 20px;"></canvas>
        </div>
</body>

Скачать финальный репозиторий кодовой базы.

Смотрите демо здесь.

Если вам нравится блог, пожалуйста, поделитесь им. Удачного кодирования… :)