Эта статья является частью серии, целью которой является создание базового, но полного прогрессивного веб-приложения с использованием VueJ, Webpack и Material Design, шаг за шагом и с нуля. Если вы еще не читали, то можете найти начальную часть здесь.

Если вы еще не читали их, вы можете найти предыдущие части ниже:

Исходный код доступен в этом репозитории 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-уведомления для привлечения вашего пользователя».