Jak uzyskać dostęp do kamery telefonu komórkowego z aplikacji internetowej?

191

W mojej aplikacji internetowej (nie natywnej) na telefony komórkowe chcę zrobić zdjęcie i przesłać je, ale nie chcę używać Adobe Flash. Czy jest na to sposób?

html mobile camera 夏 期 劇場
źródło
2
„Strona internetowa” oznacza, że ​​powinna być łatwo dostępna z dowolnego rodzaju klientów / urządzeń. Czy powinienem więc ustawić ograniczenia?
夏 期 劇場
1
Zakładam, że chcesz uzyskać dostęp do kamery sprzętowej, prawda?
Dennis Traub,
Hmm .. „Kamera” smartfonów / etc .. ze strony internetowej.
夏 期 劇場
Cześć, to temat, który obecnie studiuję dla własnych projektów. PWA umożliwiają korzystanie z natywnych funkcji urządzeń we współczesnych przeglądarkach: developers.google.com/web/updates/2016/12/imagecapture
palmaone

Odpowiedzi:

260

W telefonie iPhone iOS6 i nowszym systemie Android ICS HTML5 ma następujący znacznik, który pozwala robić zdjęcia z urządzenia:

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

Capture może przyjmować wartości takie jak kamera, kamera wideo i dźwięk.

Myślę, że ten tag zdecydowanie nie będzie działał w iOS5, nie jestem tego pewien.

Ashish
źródło
32
Oto świetny samouczek: html5rocks.com/en/tutorials/getusermedia/intro
Micheasza
2
GetUserMedia nie jest tutaj wymagane.
Ray Nicholus
Otrzymuję komunikat „getUserMedia () nieobsługiwany przez to urządzenie” - ale jestem na safari i mam ios7 - dlaczego? - Dan właśnie edytuj
Dan
10
Myślę, że może <input type="file" accept="image/*;capture=camera">zamiast tego powinien być kod . Według MDN nie ma captureatrybutu dla inputelementu.
Kenny Evitt,
9
Zarówno capture="camera"(String), jak i starsze accept="image/*;capture=camera"zostały zastąpione w 2012 roku capture="capture"(Boolean). Ten atrybut służy do wymuszania przechwytywania zamiast wybierania z biblioteki. Zobacz specyfikację i poprawną składnię dla przechwytywania multimediów HTML
Octavian Naicu,
36

W dzisiejszych czasach przynajmniej z Androidem jest to stosunkowo łatwe. Wystarczy użyć zwykłego znacznika wejściowego pliku, a gdy użytkownik go kliknie, telefon zapyta, czy użytkownik chce użyć aparatu (lub menedżerów plików itp.) Do przesłania pliku. Wystarczy zrobić zdjęcie aparatem, a zostanie ono automatycznie dodane i przesłane.

Nie mam pojęcia o iPhonie. Może ktoś może to oświecić. EDYCJA: iPhone działa podobnie.

Próbka tagu wejściowego:

<input type="file" accept="image/*" capture="camera">
Tuxie
źródło
możesz to zrobić dla wielu plików, takich jak: multiple = "multiple"
przeanalizuj
przykład: <input type = "file" accept = "image / *" multiple = "multiple" capture = "camera">
przeanalizuj
multipledziała zarówno na Androidzie, jak i iOS, patrz Poprawna składnia dla przechwytywania multimediów HTML
Octavian Naicu
Nie jestem pewien w przypadku innych urządzeń Apple, przynajmniej to rozwiązanie działa teraz również na iPadzie.
cytsunny,
29

Aby to zaktualizować, standardem jest teraz:

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

aby uzyskać dostęp do kamery (tylnej) skierowanej do środowiska, oraz 

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

do kamery skierowanej do użytkownika (z przodu). Aby uzyskać dostęp do wideo, zamień „video” na „image” w nazwie.

Testowany na iPhonie 5c, z systemem iOS 10.3.3, firmware 760, działa dobrze.

https://www.w3.org/TR/html-media-capture/

użytkownik3204365
źródło
23

Safari i Chrome na iOS 6+ i Android 2.2+ obsługują HTML Media Capture, który pozwala robić zdjęcia aparatem urządzenia lub wybrać istniejący:

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

Oto jak to działa na iOS 10:

wprowadź opis zdjęcia tutaj

Android 3.0+ i Safari na iOS 10.3 + obsługują również captureatrybut, który służy do przeskakiwania prosto do aparatu.

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

capture="camera"(String) i accept="image/*;capture=camera"(Parameter) były częścią starych specyfikacji i zostały zastąpione capture(Boolean) Rekomendacją dla kandydatów W3C.

Dokumentacja pomocnicza: ta książka O'Reilly 2013 i moje testy

Oktawian Naicu
źródło
Mój na Androidzie przeskakuje prosto do wybierania zdjęć, ale nie daje mi opcji aparatu, nawet jeśli ustawiłem przechwytywanie = "aparat" .... całkowicie utknął
Benyaman
@Benyaman Spróbuj capturezamiast capture="camera". Ciekawe, jakie urządzenie i wersja Androida.
Octavian Naicu
Zrobiłem to, na Androidzie 5.0 najwyraźniej Phonegap nie ma wbudowanego przechwytywania HTML. Więc nie może przechwytywać rzeczy, bez kamery, bez dźwięku, bez kamery. Musiałem zbudować obejście.
Benyaman
5

no cóż, istnieją nowe funkcje HTML5 umożliwiające dostęp do natywnej kamery urządzenia - „getUserMedia API”

UWAGA: HTML5 może obsługiwać przechwytywanie zdjęć ze strony internetowej na urządzeniach z Androidem (przynajmniej w najnowszych wersjach obsługiwanych przez system operacyjny Honeycomb; ale nie obsługuje tego na iPhone'ach, ale na iOS 6).

Louis
źródło
oh przepraszam za wywołanie API setUserMedia
Louis
4

Możesz używać WEBRTC, ale niestety nie jest obsługiwane przez wszystkie przeglądarki internetowe. PONIŻSZY LINK POKAŻ, KTÓRE PRZEGLĄDARKI obsługują to http://caniuse.com/stream

Link ten daje wyobrażenie o tym, jak uzyskać do niego dostęp (przykładowy kod). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Michael Sultana
źródło
2
WebRTC i getUserMediajest przesada, załatwi sprawę <input type="file" accept="image/*">.
Octavian Naicu
4

AppMobi HTML5 SDK obiecał kiedyś dostęp do natywnych funkcji urządzenia - w tym aparatu - z aplikacji opartej na HTML5, ale nie jest już własnością Google. Zamiast tego wypróbuj odpowiedzi oparte na HTML5 w tym poście .

Dave Everitt
źródło
1
Nie wierzę, że Google ma jakąkolwiek własność nad AppMobi lub ich produktami.
fakeguybrushthreepwood
Ach - mój błąd, ponieważ znajduje się w sklepie internetowym Chrome - odwołanie do Google zostało usunięte. Oto prawdziwi partnerzy: appmobi.com/?page_id=468
Dave Everitt
1

Należy zauważyć, że zostały zaimplementowane funkcje bezpieczeństwa, które wymagają albo uruchomienia aplikacji lokalnie na localhost, albo poprzez SSL, aby GetUserMedia () działał.

Odkryłem to, wypróbowując kilka dostępnych wersji demonstracyjnych, i byłem zawiedziony, gdy nie działały! Zobacz: Nowe ograniczenia bezpieczeństwa

Anthony Griggs
źródło
0

Nie sądzę, abyś mógł - istnieje interfejs API W3C do pobierania audio lub wideo, ale nie ma jeszcze implementacji w żadnym z głównych mobilnych systemów operacyjnych.

Drugi najlepszy Jedyną opcją jest skorzystanie z sugestii Dennisa, aby użyć PhoneGap. Oznacza to, że musisz utworzyć natywną aplikację i dodać ją do sklepu z aplikacjami mobilnymi.

Kevin
źródło
przepraszam, opublikowałem ponownie - chciałem sprawdzić, czy udało ci się obejść wyjątek NPE z klientem Jersey na Androidzie. utknął :(
nekromanta
0

Nie znam żadnego sposobu uzyskania dostępu do kamery telefonu komórkowego z przeglądarki internetowej bez dodatkowego mechanizmu (tj. Flash lub jakiegoś rodzaju kontenera, który umożliwia dostęp do sprzętowego interfejsu API)

Dla tych ostatnich zajrzyj na PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

Dzięki temu powinieneś mieć dostęp do kamery przynajmniej na urządzeniach z systemem iOS i Android.

Dennis Traub
źródło
4
To wciąż wymaga zainstalowania aplikacji na urządzeniu mobilnym, co moim zdaniem OP chce uniknąć.
Michael Petrotta,
@MichaelPetrotta czy znasz lepszy sposób?
Dennis Traub,
2
Nie wierzę, że to, o co prosi OP, jest możliwe.
Michael Petrotta,
@MichaelPetrotta też tak myślę. A najlepszym sposobem, jaki mogę wymyślić, jest PhoneGap, ponieważ działa na iOS (co Flash nie działa). Nadal jest natywny, prawda, ale pozwala przynajmniej na dostęp do kamer między platformami ze strony internetowej.
Dennis Traub,