Селфи через JavaScript

В этом уроке мы покажем как через JavaScript можно захватить изображение с телефона, камеры ноутбука или веб-камеры ПК. Задействовать будем различные API, от сторонних библиотек будем держаться подальше — только чистый JavaScript!

Заметка: данное приложение является экспериментальным, не гарантируется работа во всех браузерах. На данный момент не работает на Safari.

Приложение

Для реализации нашей задачи потребуется:

1. Осуществить доступ к камере и получить видео поток, используя getUserMedia API.
2. Пустить поток с камеры в HTML элемент video.
3. При клике по кнопке, сохранить текущий кадр и отобразить его в элементе canvas.
4. Преобразовать canvas в изображение dataURL, которое можно скопировать или скачать в формате PNG.

Исходный пример можно получить, нажав на соответствующую кнопку. Так же доступен пример на JSfiddle.

Доступ к камере

В JavaScript есть нативный API для осуществления доступа к камере через метод navigator.getUserMedia. Поскольку данные, сохранённые с камеры считаются сугубо личными, то для работы с данным API вашему сайту потребуется протокол HTTPS.

Если пользователь дал доступ к камере, то метод navigator.getUserMedia передаст видео поток в наш колбэк. Для того чтобы получить видео картинку нужно преобразовать дынный поток через метод createObjectURL.

navigator.getUserMedia(
    // Настройки
    {
        video: true
    },
    // Колбэк для успешной операции
    function(stream){

        // Создаём объект для видео потока и
        // запускаем его в HTLM элементе video.
        video.src = window.URL.createObjectURL(stream);

        // Воспроизводим видео.
        video.play();

    },
    // Колбэк для не успешной операции
    function(err){

        // Наиболее частые ошибки — PermissionDenied и DevicesNotFound.
        console.error(err);

    }
);

Снимок

Теперь когда у нас есть видео поток можем захватить какой-то отдельный кадр через <canvas> и отобразить его в элементе <img>.

function takeSnapshot(){

    var hidden_canvas = document.querySelector('canvas'),
        video = document.querySelector('video.camera_stream'),
        image = document.querySelector('img.photo'),

        // Получаем размер видео элемента.
        width = video.videoWidth,
        height = video.videoHeight,

        // Объект для работы с canvas.
        context = hidden_canvas.getContext('2d');


    // Установка размеров canvas идентичных с video.
    hidden_canvas.width = width;
    hidden_canvas.height = height;

    // Отрисовка текущего кадра с video в canvas.
    context.drawImage(video, 0, 0, width, height);

    // Преобразование кадра в изображение dataURL.
    var imageDataURL = hidden_canvas.toDataURL('image/png');

    // Помещение изображения в элемент img.
    image.setAttribute('src', imageDataURL);

}

Элемент canvas вполне может быть скрыт и действовать в фоновом режиме.

Загрузка фотографии

Помимо всего этого, мы хотим дать возможность пользователю скачать снимок. Для этого создадим специальную ссылку:

<a id="dl-btn" href="#" download="glorious_selfie.png">Save Photo</a>

Атрибут download преобразует ссылку в кнопку. Его значение — название скачиваемого файла. Ссылка href на файл в данный момент пуста. Для того чтобы поместить туда изображение нужно чуть переписать код:

function takeSnapshot(){

    //...

    // Помещение изображения в элемент img.
    var imageDataURL = hidden_canvas.toDataURL('image/png');

    // Устанавливаем значение атрибуту href.
    document.querySelector('#dl-btn').href = imageDataURL;
}

Теперь после того как снимок будет создан, можно будет скачать файл под названием glorious_selfie.png. Наш небольшой эксперимент завершён!

Итог

Надеемся что данный урок был вам полезен и навёл на мысли о создании фото-видео приложения.