Доступ к камере через браузер на iOS: HTML5 решение

Быстрый ответ

Для обращения к камере через браузер применяется WebRTC API и его метод navigator.mediaDevices.getUserMedia. Предлагаю вашему вниманию JavaScript код, который исполняет данную задачу:

async function openCamera() {
  const video = document.createElement('video');
  document.body.appendChild(video);
  try {
    video.srcObject = await navigator.mediaDevices.getUserMedia({ video: true });
    video.play();
  } catch (e) {
    console.error('Не удалось получить доступ к веб-камере:', e);
  }
}
openCamera();

Данный скрипт динамически внедряет элемент video в HTML-код, активизирует видеопоток и запускает его воспроизведение. Обращаю ваше внимание: пользователь должен предоставить соответствующее разрешение, а сайт должен быть загружен по протоколу HTTPS.

Использование HTML элемента input для доступа к камере в iOS 6+

На устройствах iOS 6 и свыше можно воспользоваться элементом input для доступа к камере — это просто и элегантно:

<input type="file" capture="camera" accept="image/*">

При активации этого поля пользователь может либо сделать новое изображение, либо выбрать уже сохранённое. Атрибут capture предложит использовать камеру напрямую, исключая выбор из галереи.

Визуализация

Взаимодействие браузера и камеры можно представить следующим образом (🚪 и 📷):

🚪 Браузер запрашивает доступ: "Можно воспользоваться камерой (📷)?"

Когда вы даете согласие:

🔓 [Пользователь даёт разрешение]

Веб-приложение подключается к камере (🪟):

Браузер 🚪 -> Доступ предоставлен 🔓 -> Камера активна 📷 -> Отображение через окно 🪟

В результате веб-страница получает видеопоток в режиме реального времени.

Прямая трансляция 🌐🔴: [Веб-страница "смотрит" через камеру]

Поскольку доступ к личной информации пользователей — это ответственность, всегда уважайте их приватность.

🔒 [Пользователь не дал разрешение]
🚫 Доступ без разрешения невозможен. Приватность на первом месте.

Работа с разнообразными типами медиа

В зависимости от типа медиаданных, которые вы хотите получить, предусмотрите изменение атрибута accept в теге input:

• Фотографии:

  HTML

  Скопировать код

  <input type="file" accept="image/*">

  Запустить код

• Видеозаписи:

  HTML

  Скопировать код

  <input type="file" accept="video/*;capture=camcorder">

  Запустить код

• Аудиозаписи:

  HTML

  Скопировать код

  <input type="file" accept="audio/*;capture=microphone">

  Запустить код

  Таким образом, пользователи смогут воспользоваться различными медиа-возможностями прямо через Safari на iOS.

Обеспечение совместимости

Особое внимание следует уделить совместимости с браузером. Начиная с версии iOS 8.x, элементы ввода типа file поддерживают доступ к камере и медиабиблиотеке. Примеры их использования можно увидеть на странице демонстрации Addpipe.

Подробнее об этом расскажет наш спикер на видео

Обработка изменений состояния

Для обработки выбора файла пользователем воспользуйтесь событием onchange:

<input type="file" accept="image/*" onchange="handleFiles(this.files)">

Выбранный файл может быть обработан или загружен с помощью указанной функции.

Расширенный захват и трансляция

Для создания высокопроизводительного приложения getUserMedia предлагает расширенные возможности настройки. Подробнее о реализации работы в реальном времени, создании снимков в canvas и других особенностях можно узнать по ссылке HTML5 Rocks.

Управление ресурсами

Своевременное освобождение ресурсов камеры — обязательное условие, поэтому используйте метод MediaStreamTrack.stop(), чтобы остановить видеопоток. Предпочтительно отключать камеру, если она вам больше не требуется.

Исследование возможностей HTML5

Для углублённого изучения работы с камерой в браузерах iOS рекомендую ознакомиться с спецификацией W3C по HTML5 Media Capture. Возможности элемента <input> типа file довольно обширны и позволяют быстро реализовать основной функционал, однако для решения более сложных задач понадобится более детальное изучение.

Автовоспроизведение для пользователя

Для незамедлительного воспроизведения медиафайлов после их захвата используйте атрибут autoplay у тега video:

<video autoplay></video>

Такой подход позволяет вашему приложению получать видеопоток в реальном времени!

Полезные материалы

1. Захват аудио и видео в HTML5 — подробное руководство от web.dev по использованию getUserMedia().
2. Can I use... Таблицы поддержки для HTML5, CSS3 и прочего — веб-сайт для проверки совместимости различных браузеров с MediaStream API.
3. Захват изображения с помощью устройства пользователя — пошаговое руководство web.dev по использованию камер устройств.
4. Захват медиа и потоки данных — официальная спецификация W3C по захвату медиа и потокам данных.
5. Реальное время коммуникаций с WebRTC — обучающие материалы Google Codelab о WebRTC.
6. Управление камерой и видео с помощью HTML5 — блог Дэвида Уолша, демонстрирующий управление настройками камеры и видео в браузере.