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?

Odpowiedzi:


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


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ęć.

Przesyłanie zdjęć / wideo / plików na iOS / iPhone'a

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

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


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,


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


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.


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)
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.