четверг, 27 сентября 2018 г.

Управление камерой и видео с помощью HTML5


Публикация описывает способ получения доступ к камере с помощью navigator.getUserMedianavigator.mediaDevices.getUserMedia.
Разработчики браузеров недавно добавили ограничение для использования getUserMedia – теперь функция может работать только через https. Поэтому вам необходим серитфикат SSL для того что бы этот код работал.
Клиентское API для мобильных и настольных устройств быстро предоставляет одинаковое API. Конечно наши мобильные устройства получают доступ к некоторому API быстрее, но те же API мелденно добираются и до десктопа. Одним из таких API является getUserMedia API, которое предоставляет доступ разработчику к камере пользователя. Давайте взглянем на то как это работает.

HTML

Пожалуйста обратите внимание на мои комментарии в коде:
<!--
       Ideally these elements aren't created until it's confirmed that the
       client supports video/camera, but for the sake of illustrating the
       elements involved, they are created with markup (not JavaScript)

-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>

<canvas id="canvas" width="640" height="480"></canvas>

Каждый из этих элементов должен быть создан только после того, как получено подтверждение поддержки камеры, но что бы упростить данную публикацию, я просто хочу показать как может выглядеть подобная разметка. Обратите внимание что мы работаем с разрешением 640х480.

Java Script

Раз уж HTML мы определили, количество кода JavaScript будет меньше чем вы это себе представляете:

// Grab elements, create settings, etc.
var video = document.getElementById('video');

// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}

/* Legacy code below: getUserMedia
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}
*/

Как только вы определили что браузер поддерживает navigator.mediaDevices.getUserMedia,простой метод устанавливает в качестве источника для виде элемента камеру пользователя. Вызов метода play – запускает процесс стриминга видео. Это все что нужно для того что бы присоединить вашу камеру к браузеру!
Получение фото сложнее только на словах. Просто добавьте обработчик клика на кнопку и нарисуйте картинку из видео.

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
       context.drawImage(video, 0, 0, 640, 480);
});

Разумеется вы можете добавить какие-нибудь крутые фильтры для того что бы улучшить картинку и заработать миллион долларов, но это я оставлю для следующего раза. Как минимум вы можете преобразовать canvas в картинку.  А о фильтрах я поговорю в другой раз.
Имея возможность получать доступ к камере из браузера без необходимости использования каких-либо сторонних библиотек – это очень здорово. В купе с использованием canvas и небольшого фрагмента JavaScript, камера становится еще проще для использования. И не только камера, но из-за того что canvas очень гибкий инструмент, мы может добавить какие-нибудь фильтры для изображения в стиле Instagram. Сейчас же, возможность использовать камеру в браузере переносит нас на мили вперед. Получайте удовольствие от фотографирования себя в браузере.


Комментариев нет: