Доступ до камери через браузер

150

Ми створюємо веб-сайт HTML5 для мобільних пристроїв, і нам потрібно отримати доступ до камери через веб-браузер, не будучи рідним додатком. У нас виникають проблеми, щоб зробити цю роботу в iOS. Хтось знає про рішення для цього?

ios html camera

— Юлія
джерело

124

Ви можете спробувати це:

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

але він повинен працювати iOS 6+ . Це дасть вам хороший діалог для вас, щоб вибрати або сфотографувати, або завантажити один із свого альбому, тобто

Скріншот

Приклад можна знайти тут: Захоплення даних камери / зображення без PhoneGap

— Ксероксоїд
джерело

5

Це ДУЖЕ і на Android!

— Метт

1

Хороша демонстрація для завантаження на сервер. Хтось знає, як це змінити, щоб зберегти малюнок у локальному альбомі на пристрої?

— K.Niemczyk

2

Єдина проблема полягає в тому, що принаймні на iphone (ios 7.0.4) принаймні в даний момент він створює тимчасове зображення, яке завжди називається 'image.jpg'. Тож якщо ви завантажуєте кілька зображень в одній формі, вони перезаписують одне одного через те саме ім’я, якщо ви не зробите щось для їх перейменування, будьте уважні!

— алеяція

@ K.Niemczyk: ти коли-небудь це розумів? якщо так, я був би зацікавлений у вирішенні. Я знайшов це: dev.w3.org/2009/dap/camera (див. Приклади 6-7 для місцевого зберігання)

— ламаран

1

Блискуча. Ось загадка для тих, хто хоче тестувати цей код на своєму пристрої.

— Саймон Схід

33

Станом на 2015 рік, він зараз просто працює .

<input type="file">

Це попросить користувача завантажити будь-який файл. На iOS 8.x це може бути відео з камери, фото з камери або фото / відео з Photo Library.

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

Це як вище, але обмежує завантаження фотографій лише з камери чи бібліотеки, без відео.

— Саймон Іст
джерело

1

Чи є якийсь спосіб обмежити користувачів у виборі файлу з бібліотеки фотографій? Я хочу прийняти лише нещодавно зняте зображення.

— Дарил

@Daryl не на iOS. Android підтримує captureатрибут, який робить саме це. Дивіться правильний синтаксис для захоплення HTML-медіа

— Octavian Naicu

чи закрию це спливаюче вікно "Фотографування" чи "Відео та фотографії" через деякий час користувач не натискає на нього.

— Прітіш

схоже, відео функцій вже немає?

— Martian2049

25

В iOS6 Apple підтримує це через <input type="file">тег. Я не міг знайти корисну посилання в документації для розробників Apple, але є приклад тут .

Схоже, накладки та більш досконала функціональність ще не доступні, але це має працювати для багатьох випадків використання.

EDIT: У w3c є специфікація, на якій iOS6 Safari, здається, реалізує підмножину. captureАтрибут у Зокрема , відсутня.

— користувач295691
джерело

10

Я думаю, що цей працює. Запис відео чи аудіо;

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

або (новий метод)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

Якщо це не так, ймовірно, буде працювати на ios6, більш детальну інформацію можна дізнатися на сайті користувача

— синірадам
джерело

4

Додаток Picup - це спосіб робити фотографії зі сторінки HTML5 та завантажувати їх на свій сервер. Це вимагає додаткового програмування на сервері, але крім PhoneGap, я не знайшов іншого способу.

— rakensi
джерело

5

В iOS8 вам більше не потрібен Picup. HTML5 підтримує <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Підтверджено в Safari та Chrome.

— rakensi

1

Цьому питанню вже кілька років, але в цей час розвинулися деякі додаткові можливості, наприклад, безпосередньо звертатися до камери, показувати попередній перегляд і робити знімки (наприклад, для сканування QR-кодом).

Ця стаття розробників Google надає глибоке пояснення всіх (?) Способів отримання даних про зображення / камери у веб-додаток, від "роботи всюди" (навіть у веб-переглядачах) до "роботи лише на сучасних, сучасних -оновити мобільні пристрої з камерою ". Поряд з багатьма корисними порадами.

Пояснені методи:

Запитайте URL-адресу
Введення файлів (висвітлено більшість інших публікацій тут)
Перетягування (корисно для веб-переглядачів)
Вставити з буфера обміну
Доступ до камери в інтерактивному режимі (необхідний, якщо програмі потрібно миттєво надавати відгуки про те, що вона "бачить", наприклад QR-коди)

— Крістоф
джерело