Эта статья является частью серии, целью которой является создание базового, но полного прогрессивного веб-приложения с использованием VueJ, Webpack и Material Design, шаг за шагом и с нуля. Если вы еще не читали, то можете найти начальную часть здесь.
Если вы еще не читали их, вы можете найти предыдущие части ниже:
- [Часть 1] Создание одностраничного приложения с VueJS, Webpack и Material Design Lite (Чарльз Боше)
- [Часть 2] Подключите приложение к удаленному API с помощью Vue-Resource и VueFire
- [Часть 3] Опыт работы с сервисными работниками вне сети (Чарльз Боше)
Исходный код доступен в этом репозитории GitHub. А окончательный результат вы можете увидеть здесь.
Здесь мы остановились:
В этом четвертом руководстве основное внимание уделяется реализации встроенных функций в прогрессивном веб-приложении. Мы собираемся:
- Отображение родной камеры с MediaDevices API;
- Загрузить изображения в хранилище firebase;
- Публикуйте фотографии в Firebase.
Наслаждайся чтением!
[ЧАСТЬ 4] Доступ к камере устройства, чтобы делать снимки
Отобразите камеру
Создайте новый пустой вид компонентов / CameraView.vue:
И свяжите действие кнопки с этим новым представлением:
- Импортируйте новое представление в конфигурацию роутера (router / index.js)
import CameraView from '@/components/CameraView'
Добавьте новое представление в объект routes (router / index.js)
{ path: '/camera', name: 'camera', component: CameraView }
- Добавьте новую кнопку со ссылкой на новый CameraView (homeView.vue)
Теперь мы можем использовать mediaDevices API
- Во-первых, нам нужен пустой тег видео в cameraView, который будет содержать поток (CameraView.vue):
Мы добавляем к этому тегу атрибут ref, чтобы иметь возможность динамически связывать источник видео с тегом видео.
Во время монтажа CameraView мы инициализируем камеру.
И тадааа
Небольшое объяснение:
navigator.mediaDevices.getUserMedia({ video: true })
Этот метод запрашивает у пользователя разрешение на использование его камеры, затем включает камеру в системе и предоставляет объект MediaStream, содержащий видео / дорожку. Для получения дополнительной информации см. API doc.
NB: этот API также можно использовать для записи звука.
Теперь мы готовы сделать снимок!
Сделать фото
Начните добавлять новую кнопку, чтобы сделать снимок, и создайте пустую функцию «захват», привязанную к этой кнопке:
Теперь вы можете это увидеть:
Пришло время сделать снимок в MediaStream! Чтобы это произошло, мы будем использовать один новый интерфейс HTML. Интерфейс ImageCapture, который предоставляет интерфейс для захвата изображения из MediaStreamTrack. Чтобы получить MediaStreamTrack, мы должны сохранить текущий MediaStream в наших данных представления. Эта функция поддерживается только в Chrome 59 и новее.
Теперь мы можем завершить нашу функцию захвата:
Обычно мы видим на вашей консоли каплю.
Закройте камеру
эта часть может показаться бесполезной, но она изначальна. Во-первых, пользователь не хочет держать камеру открытой. Во-вторых, камера очень жадно расходует батарею, поэтому пользоваться ей нужно экономно.
Во время события жизненного цикла destroy мы получаем все открытые треки в нашем потоке и останавливаем их:
// CameraView.vue export default { ... destroyed () { const tracks = this.mediaStream.getTracks() tracks.map(track => track.stop()) } ... }
Загрузите картинку
Чтобы добавить сделанное фото в чат, мы должны сохранить картинку на сервере. Во второй части мы используем Firebase в качестве базы данных, но Firebase также предлагает бесплатное хранилище! Чтобы увидеть полную документацию по хранилищу, перейдите здесь.
Давайте настроим наше хранилище firebase в консоли firebase. Перейдите в интерфейс firebase ›вкладка хранилище› правила и обновите правила, чтобы сделать хранилище общедоступным. Эта манипуляция хороша только для прототипирования, для защиты хранилища используйте firebase auth.
Вы помните службу базирования огня? Мы добавим в эту службу новую строку для экспорта службы хранилища из firebase.
Теперь мы можем импортировать эту службу в наши компоненты, чтобы получить доступ к нашему хранилищу firebase.
Хорошо, давайте попробуем загрузить изображение, оно должно появиться в консоли Firebase.
Добавить картинку в список
После загрузки не нужно добавлять картинку в
Создайте новые файлы миксинов, которые будут содержать наш метод postCat, написанный во второй части (mixins / postCat.js).
Мы можем обновить postView с помощью миксинов
И используйте миксин в поле зрения камеры
Это оно ! Поздравляем, теперь мы можем сделать снимок и загрузить его в наш список!
Выводы
Надеюсь, вы лучше понимаете, как реализовать нативную функциональность с помощью HTML5 API. Мы выучили:
- как использовать
MediaStream
для доступа к родной камере; - как сохранить изображение в Firebase с
VueFire
;
Давайте взглянем на наш контрольный список для прогрессивных веб-приложений:
Одно из наших последних требований еще не выполнено. Мы разберемся с ними в следующих частях. Часть 5 покажет вам, как «использовать push-уведомления для привлечения вашего пользователя».