Zrób zdjęcie z html5

Question

Czytam wiele sposobów na uzyskanie obrazu ze strony html5. jestem jeszcze pewien, co jest najlepsze dla moich potrzeb:

• szerokie wsparcie dla przeglądarek i OS: co najmniej: Chrome, Firefox, Safari domyślnie android
• nie muszę akwizycji w czasie rzeczywistym. Użytkownik musi nacisnąć przycisk, aby zrobić zdjęcie, prosząc aplikacji aparatu systemu

Istnieją co najmniej trzy rozwiązania:

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia() (wydaje się przestarzałe)
• MediaDevices.getUserMedia() (wydaje się być eksperymentalna)

W każdym razie widzę wiele przykładów Aby osadzić kamerę na stronie (w/ getUserMedia), nie wiem, czy mogę polegać tylko na pierwszej metodzie.

Answer 1

Korzystanie z interfejsu API WebRTC getUserMedia będzie obejmować wszystkie nowoczesne przeglądarki oprócz Safari: http://caniuse.com/#feat=stream

Here jest przykładowa strona, która wykorzystuje getUserMedia aby wykonać zdjęcie (z linkiem do page opisujący kod). Większość pokazów getUserMedia pokazuje strumień wideo w widocznym obszarze roboczym, ale nie jest to wymagane. Możesz przechwycić obraz za pomocą getUserMedia bez wyświetlania strumienia wideo w widocznym obszarze roboczym.

Niestety, Apple powoli adaptuje interfejsy API WebRTC, więc myślę, że tag wejściowy do pliku jest najlepszy, na jaki można mieć nadzieję, chyba że zechcesz użyć czegoś podobnego do Cordova. Here to opis użycia znacznika wejściowego pliku.

Jest to zalecenie kandydujące, które oznacza, że ​​jest na dobrej drodze, aby stać się standardem, jednak nie znam żadnej przeglądarki, która implementuje bieżące zalecenie W3C (używając go w atrybutach wejściowych). Styl <input type="file" accept="image/*"> wydaje się obecnie obsługiwany tylko przez przeglądarki mobilne.

Podsumowując, jeśli chcesz mieć szeroką obsługę przeglądarek w najbliższej przyszłości, będziesz musiał obsługiwać obie metody, dopóki Apple nie zacznie obsługiwać interfejsów API WebRTC lub dopóki inne przeglądarki komputerów stacjonarnych nie zaczną obsługiwać interfejsu Media Capture API (lub wariantu z atrybutem przechwytywania obsługiwanym obecnie przez przeglądarki mobilne).