Селфи через JavaScript
В этом уроке мы покажем как через JavaScript можно захватить изображение с телефона, камеры ноутбука или веб-камеры ПК. Задействовать будем различные API, от сторонних библиотек будем держаться подальше — только чистый JavaScript!
Заметка: данное приложение является экспериментальным, не гарантируется работа во всех браузерах. На данный момент не работает на Safari.
Приложение
Для реализации нашей задачи потребуется:
- Осуществить доступ к камере и получить видео поток, используя getUserMedia API.
- Пустить поток с камеры в HTML элемент video.
- При клике по кнопке, сохранить текущий кадр и отобразить его в элементе canvas.
- Преобразовать 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
Просмотров: 38154
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.