Всем привет! Мы уже научились стримить видео с вашей веб-камеры на страницу в реальном времени, а сегодня я покажу, как делать фотографии с вашей веб-камеры на javascript .
Всем привет! Мы уже научились стримить видео с вашей веб-камеры на страницу в реальном времени, а сегодня я покажу, как делать фотографии с вашей веб-камеры на javascript.
Откроем файл index.html и пропишем следующий код:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Take pictures from your webcam</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300" autoplay></video>
<a href="#" id="capture" class="booth-capture-button">Сфотографировать</a>
<canvas id="canvas" width="400" height="300"></canvas>
<img src="http://goo.gl/qgUfzX" id="photo" alt="Ваша фотография">
</div>
<script src="photo.js"></script>
</body>
</html>
И пропишем следующие стили для нашей структуры:
.booth {
width: 400px;
background: #ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
.booth-capture-button {
display: block;
margin: 10px 0;
padding: 10px 20px;
background: cornflowerblue;
color: #fff;
text-align: center;
text-decoration: none;
}
#canvas {
display: none;
}
И, конечно же, двигатель нашей задумки - javascript.
(function() {
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
photo = document.getElementById('photo'),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.
mozGetUserMedia || navigator.msGetUserMedia;
navigator.getMedia({
video: true,
audio: false
}, function(stream) {
video.src = vendorUrl.createObjectURL(stream);
video.play();
}, function(error) {
alert('Ошибка! Что-то пошло не так, попробуйте позже.');
});
document.getElementById('capture').addEventListener('click', function() {
context.drawImage(video, 0, 0, 400, 300);
photo.setAttribute('src', canvas.toDataURL('image/png'));
});
})();
Вот таким довольно несложным способом можно сделать захват изображения с вашей веб-камеры, а использовать это можно, к примеру, при регистрации для аватарки.
Спасибо за внимание и удачи!
