Как делать фотографии с помощью веб-камеры в Javascript
Добавить в избранное
Добро пожаловать в учебник о том, как делать фотографии с помощью веб-камеры в Javascript.
Да, каменный век Интернета давно закончился, и делать фотографии прямо с помощью Javascript вполне возможно… Хотя это не так просто и требует немало кода.
Как мы это делаем?
Попробуем понять в этом уроке.
ШАГ 1) HTML
Создаём файл webcam.html
<html lang="ru">
<head>
<title>Webcam Capture Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- https://fonts.google.com/icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="webcam.css">
<script defer src="webcam.js"></script>
</head>
<body>
<!-- (A) ВИДЕО ПРЯМАЯ ТРАНСЛЯЦИЯ -->
<video id="kam-live" autoplay></video>
<!-- (B) СНИМКИ -->
<div id="kam-snaps"></div>
<!-- (C) УПРАВЛЕНИЕ -->
<div id="kam-controls">
<button id="kam-take" disabled>
<span class="material-icons">фото_камера</span>
</button>
<button id="kam-save" disabled>
<span class="material-icons">Сохранить</span>
</button>
</div>
</body>
</html>
Простой HTML-интерфейс с несколькими компонентами:
A. <video id="kam-live"> здесь мы будем «прямо транслировать» трансляцию с веб-камеры.
B. <div id="kam-snaps"> где мы размещаем снимки.
C. Кнопки «Капитан Очевидность».
• <button id="kam-take"> Делает снимок, прямо вставляет его на HTML-страницу
• <input id="vid-save"> Сделайте снимок и предложите «сохранить как».
ШАГ 2) ИНИЦИАЛИЗАЦИЯ ВЕБ-КАМЕРЫ
создайте файл webcam.js
// (A) ИНИЦИАЛИЗИРОВАТЬ
hVid: null, hSnaps: null, hTake: null, hSave: null,
init: () => {
// (A1) ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
webkam.hVid = document.getElementById("kam-live"),
webkam.hSnaps = document.getElementById("kam-snaps"),
webkam.hTake = document.getElementById("kam-take"),
webkam.hSave = document.getElementById("kam-save");
// (A2) ПОЛУЧИТЬ РАЗРЕШЕНИЕ ПОЛЬЗОВАТЕЛЯ НА ДОСТУП К КАМЕРЕ
navigator.mediaDevices.getUserMedia({ video: true })
.then((stream) => {
// ВЕБ-КАМЕРА "ПРЯМОЙ ТРАНСЛЯЦИИ" НА <video>
webkam.hVid.srcObject = stream;
// ВКЛЮЧИТЬ КНОПКИ
webkam.hTake.onclick = webkam.take;
webkam.hSave.onclick = webkam.save;
webkam.hTake.disabled = false;
webkam.hSave.disabled = false;
})
.catch((err) => { console.error(err); });
},
При загрузке окна запускается webkam.init()для инициализации приложения.
• (A1) Не требует пояснений. Получите элементы HTML.
• (A2) Мы не можем напрямую получить доступ к веб-камере и должны запрашивать разрешение у пользователя –navigator.mediaDevices.getUserMedia({ video : true })
• (A2) Получив разрешение на доступ, мы просто устанавливаем поток веб-камеры в HTML-видео —webkam.hVid.srcObject = stream;
• (A2) Наконец, включите все элементы управления, когда будете готовы.
Обратите внимание — getUserMedia()требуется https://для корректной работы, http://localhostявляется исключением для тестирования. Кроме того, если пользователь отказывает в разрешении, getUserMedia()он больше не будет запрашивать. Вам придется подать собственное уведомление «как дать разрешение вручную» в формате catch().
ШАГ 3) СНИМОК НА ХОЛСТЕ HTML
webcam.js
snap: () => {
// (B1) СОЗДАТЬ НОВЫЙ ХОЛСТ
let canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
vWidth = webkam.hVid.videoWidth,
vHeight = webkam.hVid.videoHeight;
// (B2) ЗАХВАТ ВИДЕОКАДРА НА ХОЛСТ
canvas.width = vWidth;
canvas.height = vHeight;
ctx.drawImage(webkam.hVid, 0, 0, vWidth, vHeight);
// (B3) ВЫПОЛНЕНО
return canvas;
},
// (C) СДЕЛАЙТЕ СНИМОК - ПОМЕСТИТЕ ХОЛСТ В Обертку <DIV>
take: () => {
webkam.hSnaps.appendChild(webkam.snap());
},
Так как же мы можем сделать снимок?
• По сути, создайте HTML-холст —canvas = document.createElement("canvas");
• Затем получите 2D-контекст –ctx = canvas.getContext("2d");
• Нарисуйте текущий видеокадр на холсте —ctx.drawImage(VIDEO, 0, 0, VID-WIDTH, VID-HEIGHT);
Вот и всё, что касается «сложного снимка».
ШАГ 4) СКАЧАТЬ СНИМОК
webcam.js
save: () => {
// (D1) СДЕЛАТЬ СНИМОК, СОЗДАТЬ ССЫЛКУ ДЛЯ СКАЧИВАНИЯ
let canvas = webkam.snap(),
anchor = document.createElement("a");
anchor.href = canvas.toDataURL("image/png");
anchor.download = "snap.png";
// (D2) "СКАЧАТЬ ПРИНУДИТЕЛЬНО" - МОЖЕТ НЕ ВСЕГДА РАБОТАТЬ!
anchor.click();
anchor.remove();
canvas.remove();
// (D3) SAFER - LET USERS MANUAL CLICK
// anchor.appendChild(canvas);
// webkam.hSnaps.appendChild(anchor);
}
};
window.addEventListener("load", webkam.init);
это всё. css можете сделать сами.
можете посмотреть или скачать скрипт.
Посмотреть
Скачать