Dostęp do kamery przez przeglądarkę

150

Tworzymy witrynę internetową HTML5 na urządzenia mobilne i musimy uzyskać dostęp do aparatu przez przeglądarkę internetową bez natywnej aplikacji. Mamy problem z wykonaniem tego działania w systemie iOS. Czy ktoś zna rozwiązanie tego problemu?

ios html camera

— Julia
źródło

124

Możesz spróbować tego:

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

ale musi działać iOS 6+ . To da ci fajny dialog, w którym możesz wybrać, czy chcesz zrobić zdjęcie, czy przesłać je ze swojego albumu, tj

Zrzut ekranu

Przykład można znaleźć tutaj: Przechwytywanie danych z aparatu / zdjęcia bez PhoneGap

— Xeroxoid
źródło

5

To jest NIESAMOWITE również na Androida!

— Matt

1

Ładne demo do wgrania na serwer. Czy ktoś wie, jak to zmodyfikować, aby zapisać zdjęcie w lokalnym albumie na urządzeniu?

— K.Niemczyk

2

Jedynym problemem jest to, że przynajmniej na iPhonie (ios 7.0.4) przynajmniej w tej chwili tworzy tymczasowy obraz o nazwie always 'image.jpg'. Więc jeśli prześlesz kilka obrazów w tej samej formie, nadpiszą się nawzajem z powodu tej samej nazwy, chyba że zrobisz coś, aby zmienić ich nazwę, bądź ostrożny!

— aleation

@ K.Niemczyk: czy kiedykolwiek to rozgryzłeś? jeśli tak, byłbym zainteresowany rozwiązaniem. Znalazłem to: dev.w3.org/2009/dap/camera (patrz przykłady 6-7 dla lokalnego przechowywania)

— lamarant

1

Znakomity. Oto skrzypce dla każdego, kto chce przetestować ten kod na swoim urządzeniu.

— Simon East,

33

Od 2015 roku po prostu działa .

<input type="file">

To poprosi użytkownika o przesłanie dowolnego pliku. W systemie iOS 8.x może to być nagranie wideo z aparatu, zdjęcie z aparatu lub zdjęcie / wideo z biblioteki zdjęć.

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

To jest jak powyżej, ale ogranicza przesyłanie do zdjęć tylko z aparatu lub biblioteki, bez filmów.

— Simon East
źródło

1

Czy istnieje sposób, aby ograniczyć użytkownikom możliwość wyboru pliku z biblioteki zdjęć? Chcę zaakceptować tylko nowo zrobione zdjęcie.

— Daryl

@Daryl nie na iOS. Android obsługuje captureatrybut, który właśnie to robi. Zobacz: Prawidłowa składnia dla HTML Media Capture

— Octavian Naicu

powinienem zamknąć to wyskakujące okienko zrób zdjęcie lub wideo i bibliotekę zdjęć po pewnym czasie, gdy użytkownik go nie kliknie.

— Pritish

wygląda na to, że nie ma już funkcji wideo?

— Martian2049,

25

W iOS6 Apple obsługuje to za pośrednictwem <input type="file">tagu. Nie mogłem znaleźć przydatnego linku w dokumentacji programisty Apple, ale jest tutaj przykład .

Wygląda na to, że nakładki i bardziej zaawansowane funkcje nie są jeszcze dostępne, ale powinno to działać w wielu przypadkach użycia.

EDYCJA: w3c ma specyfikację, którą iOS6 Safari wydaje się implementować podzbiór plików. W captureszczególności brakuje atrybutu.

— user295691
źródło

10

Myślę, że ten działa. Nagrywanie wideo lub audio;

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

lub (nowa metoda)

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

Jeśli tak nie jest, prawdopodobnie będzie działać na ios6, więcej szczegółów można znaleźć w get user media

— siniradam
źródło

4

Aplikacja Picup to sposób na robienie zdjęć ze strony HTML5 i przesyłanie ich na serwer. Wymaga to dodatkowego programowania na serwerze, ale poza PhoneGap nie znalazłem innego sposobu.

— rakensi
źródło

5

W iOS8 nie potrzebujesz już Picup. HTML5 obsługuje <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Zweryfikowano w Safari i Chrome.

— rakensi

1

Pytanie to ma już kilka lat, ale w tym czasie ewoluowały pewne dodatkowe możliwości, takie jak bezpośredni dostęp do kamery, wyświetlanie podglądu i robienie zdjęć (np. Do skanowania kodu QR).

Ten artykuł Google Developers zawiera szczegółowe wyjaśnienie wszystkich (?) Sposobów pobierania danych obrazu / kamery do aplikacji internetowej, od „pracy w każdym miejscu” (nawet w przeglądarkach komputerowych) do „pracy tylko na nowoczesnych, maksymalnie -date urządzenia mobilne z aparatem ”. Wraz z wieloma przydatnymi wskazówkami.

Wyjaśnione metody:

Zapytaj o adres URL
Wprowadzanie plików (omówione w większości innych postów tutaj)
Przeciągnij i upuść (przydatne w przeglądarkach komputerowych)
Wklej ze schowka
Uzyskaj interaktywny dostęp do kamery (konieczne, jeśli aplikacja musi natychmiast informować o tym, co „widzi”, np. Za pomocą kodów QR)

— Christoph
źródło