Используя 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>
Скачать финальный репозиторий кодовой базы.
Смотрите демо здесь.
Если вам нравится блог, пожалуйста, поделитесь им. Удачного кодирования… :)