Селфи через JavaScript

sourse

В этом уроке мы покажем как через 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. Наш небольшой эксперимент завершён!

Итог

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tutorialzine.com/2016/07/take-a-selfie-with-js/
Перевел: Станислав Протасевич
Урок создан: 29 Июля 2016
Просмотров: 7396
Правила перепечатки


5 последних уроков рубрики "jQuery"

  • Вычисление позиции курсора мыши

    Данный сниппет поможет вам определить координаты пользовательского курсора практически во всех браузерах.

  • Отключение прокрутки на Google картах

    Скорее всего каждый из нас хоть один раз вставлял Google карты на свои страницы. Тогда вы не могли не столкнуться с проблемой: во время прокрутки страницы, если курсор попадал на карту Google, то вместо смещения страницы, начинала масштабироваться карта. Мы ответим на вопрос о том, как отключить прокрутку в Google картах.

  • 16 jQuery плагинов для создания “каруселей”

    Данные jQuery плагины позволят быстро и безболезненно создать слайдер контента.

  • Извлечение GET параметров через JavaScript

    Параметры в URL могут содержать кучу полезной информации: данные о товаре, пользовательские настройки, идентификатор партнёра. В этой статье посмотрим как через JS можно извлечь данную информацию.

  • Удаление элементов через JavaScript

    Существует несколько методов удаления элементов через JavaScript: традиционный, перебирая элементы и новый - прямой метод DOM4.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Августа 2016 15:49
    ygen
    "нужно преобразовать дынный поток через метод createObjectURL" дынный поток формируется через createDyniaURL :)
  • 8 Августа 2016 14:05
    Сергей Потёмкин
    На мобильных браузерах не работает? safari?
  • 9 Августа 2016 20:56
    kull
    чета ошибка какая та There was an error with accessing the camera stream: PermissionDeniedError
^ Наверх ^