Прогресивна веб-програма з Vue JS, Webpack & Material Design [Частина 4]

Ця стаття є частиною серії, яка має на меті створити основну, але повну прогресивну веб-програму з VueJs, Webpack & Material Design, поетапно та з нуля. Якщо ви ще цього не прочитали, ви можете знайти тут початкову частину.

Якщо ви їх ще не прочитали, попередні частини ви можете знайти нижче:

  • [Частина 1] Створіть програму на одній сторінці за допомогою VueJS, Webpack та Material Design Lite (автор Чарльз Бочет)
  • [Частина 2] Підключіть додаток до віддаленого API за допомогою Vue-Resource та VueFire
  • [Частина 3] Офлайн-досвід із працівниками служби (Чарльз Бочет)

Джерело коду доступне в цьому сховищі GitHub. І ви можете побачити кінцевий результат тут.

Ось де ми зупинилися:

Цей четвертий підручник зосереджений на впровадженні нативного функціоналу в прогресивний веб-додаток. Ми збираємося:

  • Показувати нативну камеру за допомогою API MediaDevices;
  • Завантажуйте зображення на сховище Firebase;
  • Опублікувати зображення на Firebase.
Перегляд камери (на робочому столі)

Насолоджуйтесь читанням!

[ЧАСТИНА 4] Доступ до камери пристрою для фотографування

Покажіть камеру

Створіть нові компоненти порожнього перегляду / CameraView.vue:

І зв’яжіть дію кнопки з цим новим поданням:

  • Імпорт нового перегляду в конфігурацію маршрутизатора (router / index.js)
 імпортувати CameraView з "@ / компоненти / CameraView"

Додайте новий вид у об’єкт маршрутів (маршрутизатор / index.js)

{
  шлях: '/ камера',
  назва: "камера",
  компонент: CameraView
}
  • Додайте нову кнопку із посиланням на новий CameraView (homeView.vue)

Тепер ми можемо використовувати API MediaDevices

  • Спочатку нам потрібен порожній відеотег у cameraView, який буде містити потік (CameraView.vue):

Ми додаємо атрибут ref до цього тегу, щоб мати можливість динамічно віднести джерело відео до відеотега.

Під час кріплення CameraView ми будемо ініціалізувати камеру

І тадааа

Невелике пояснення:

navigator.mediaDevices.getUserMedia ({відео: правда})

Цей метод запитує у користувача запит на отримання дозволу на використання його камери, потім вмикає камеру в системі та надає об’єкт MediaStream, що містить відео / трек. Для отримання додаткової інформації див. Док. API

Примітка: цей API можна використовувати і для запису аудіо.

Тепер ми готові сфотографуватися!

Зробити знімок

Почніть додавати нову кнопку, щоб зробити знімок, і створіть порожню функцію "захоплення", прив'язану до цієї кнопки:

Тепер ви можете бачити це:

Настав час знімати зображення в MediaStream! Для цього ми використаємо один новий інтерфейс HTML. Інтерфейс ImageCapture, який надає інтерфейс для зйомки зображення з MediaStreamTrack. Щоб отримати MediaStreamTrack, ми повинні зберегти поточну MediaStream у наших даних про перегляд. Ця функція підтримується лише в Chrome 59 або вище.

Тепер ми можемо виконати нашу функцію захоплення:

Зазвичай ми побачимо крапку у вашій консолі

Закрийте камеру

ця частина може здатися марною, але вона споконвічна. По-перше, користувач не хоче тримати камеру відкритою. По-друге, камера є дуже жадібною в акумуляторі, тому ми повинні використовувати її з посидючості.

Під час події знищення життєвого циклу ми отримуємо всі відкриті доріжки в нашому потоці і ми зупиняємо їх:

// CameraView.vue
експорт за замовчуванням {
  ...
  знищено () {
    const track = this.mediaStream.getTracks ()
    track.map (track => track.stop ())
  }
  ...
}

Завантажте картинку

Щоб додати зроблену картинку до чату, ми повинні зберегти її на сервері. У частині 2 ми використовуємо Firebase як базу даних, але Firebase також пропонує безкоштовну послугу зберігання! Щоб переглянути всю документацію на зберігання, перейдіть сюди.

Давайте налаштуємо наше сховище firebase в консолі firebase. Перейдіть на інтерфейс Firebase> вкладка зберігання> правила та оновіть правила, щоб зробити сховище загальнодоступним. Ця маніпуляція корисна лише для складання прототипів, для забезпечення зберігання даних, використання firebase auth.

Ви переосмислюєте службу пожежної бази? До цього сервісу ми додамо новий рядок для експорту служби зберігання з firebase

Тепер ми можемо імпортувати цю послугу в наших компонентах для доступу до нашого сховища firebase.

Гаразд, спробуйте завантажити фотографію, ви повинні побачити своє зображення на консолі firebase.

Додайте зображення до списку

Після завантаження не додайте зображення у вікно

Створіть нові файли mixin, щоб містити наш метод PostCat, написаний під час другої частини (mixins / postCat.js).

Ми можемо оновити postView за допомогою комбінацій

І використовуйте mixin у вигляді камери

Ось воно ! Вітаємо, що тепер ми можемо зробити та завантажити фотографію в наш список!

Висновки

Сподіваюся, ви краще зрозумієте, як реалізувати нативну функціональність за допомогою API HTML5. Ми вивчаємо:

  • як використовувати MediaStream для доступу до рідної камери;
  • як зберігати зображення у Firebase за допомогою VueFire;

Давайте подивимось наш контрольний список прогресивних веб-додатків:

Одне з наших останніх вимог ще не виконане. Ми будемо обробляти їх у наступних частинах. Частина 5 покаже вам, як "використовувати push-сповіщення для залучення вашого користувача".