Bir mobil uygulamanın kamerasına bir web uygulamasından nasıl erişilir?

191

Cep telefonlarına yönelik web uygulamamda (yerel uygulama değil), fotoğraf çekmek ve yüklemek istiyorum, ancak Adobe Flash kullanmak istemiyorum. Bunu yapmanın bir yolu var mı?

html mobile camera

— 夏期劇場
kaynak

2

"Web sayfası", her tür istemciden / cihazdan kolayca erişilebilmesi gerektiği anlamına gelir. Yani, kısıtlamalar koymalı mıyım?

— 劇場期劇場

1

Sanırım donanım kameraya erişmek istiyorsun, değil mi?

— Dennis Traub

Hmm .. Mobil Akıllı Telefonların "Kamera" / web sayfasından ..

— 劇場期劇場

Merhaba, bu şu anda kendi projelerim için çalıştığım bir konu. PWA'lar, modern tarayıcılarda yerel cihaz özelliklerini kullanmanızı sağlar: developers.google.com/web/updates/2016/12/imagecapture

— palmaone

260

İPhone iOS6 ve Android ICS'den itibaren HTML5, cihazınızdan fotoğraf çekmenizi sağlayan aşağıdaki etikete sahiptir:

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

Capture kamera, video kamera ve ses gibi değerleri alabilir.

Bu etiketin kesinlikle iOS5'te çalışmayacağını düşünüyorum, bundan emin değilim.

— Ashish
kaynak

32

İşte harika öğretici: html5rocks.com/en/tutorials/getusermedia/intro

— Micah

2

GetUserMedia burada gerekli değildir.

— Ray Nicholus

"Bu cihaz tarafından desteklenmeyen bir getUserMedia () alıyorum" - ama safari kullanıyorum ve ios7 var - neden? - Dan şimdi düzenle

— Dan

10

Bence kod <input type="file" accept="image/*;capture=camera">yerine olmalı . MDN'ye göre, capturebir inputöğe için özellik yoktur .

— Kenny Evitt

9

Hem capture="camera"(String) hem de eskisi accept="image/*;capture=camera"2012 yılında capture="capture"(Boolean) ile değiştirildi . Öznitelik, kitaplıktan seçmek yerine yakalamayı zorlamak için kullanılır. Bkz spec ve HTML Medya Capture için Doğru Dizimi

— Octavian Naicu

36

Günümüzde en azından android ile nispeten kolaydır. Sadece normal dosya giriş etiketini kullanın ve kullanıcı tıkladığında telefon kullanıcının dosya yüklemek için kamera (veya dosya yöneticileri vb.) Kullanmak isteyip istemediğini soracaktır. Sadece kamera ile bir fotoğraf çekin, otomatik olarak eklenecek ve yüklenecektir.

İphone hakkında hiçbir fikrim yok. Belki birisi bunu aydınlatabilir. EDIT: Iphone benzer şekilde çalışır.

Giriş etiketi örneği:

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

— Tuxie
kaynak

Bunu birden fazla dosya için yapabilir misiniz: multiple = "multiple"

— parseguy

örnek: <input type = "file" accept = "image / *" çoklu = "çoklu" yakalama = "kamera">

— parseguy

multiplehem Android hem de iOS üzerinde çalışır, bkz . HTML Media Capture için Doğru Sözdizimi

— Octavian Naicu

Diğer elma cihazlarından emin değilim, en azından bu çözüm şimdi iPad'de de çalışıyor.

— cytsunny

29

Sadece bunu güncellemek için standart şimdi:

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

çevreye duyarlı (arka) kameraya erişmek ve

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

yüze bakan (ön) kamera için. Videoya erişmek için adında "görüntü" yerine "video" yazın.

İPhone 5c'de test edilmiştir, iOS 10.3.3 çalışmaktadır, yazılım 760 iyi çalışır.

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

— user3204365
kaynak

23

İOS 6+ ve Android 2.2 ve üstü sürümlerde Safari ve Chrome, cihazınızın kamerasıyla fotoğraf çekmenizi veya mevcut bir kamerayı seçmenizi sağlayan HTML Media Capture'ı destekler:

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

İOS 10'da şu şekilde çalışır:

İOS10.3 + 'da Android 3.0+ ve Safari, capturedoğrudan kameraya atlamak için kullanılan özelliği de destekler .

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

capture="camera"(String) ve accept="image/*;capture=camera"(Parameter) eski teknik özelliklerin bir parçasıydı ve bunların yerine capture(Boolean) W3C Aday Önerisi getirildi .

Destek belgeleri: bu 2013 O'Reilly kitabı ve testlerim

— Octavian Naicu
kaynak

Android benimki sadece fotoğraf seçme doğrudan atlar, ama ben yakalama = "kamera"

— ayarlamış olsam

@Benyaman captureyerine deneyin capture="camera". Meraklı olan cihaz ve Android sürümü.

— Octavian Naicu

Görünüşe göre Android 5.0'da Phonegap'ın dahili HTML yakalaması yok. Yani bir şey yakalayamıyor, kamera, ses yok, kamera yok. Etrafımda bir çalışma yapmak zorunda kaldım.

— Benyaman

5

yerel cihaz kamerasına erişmek için yeni bir HTML5 özelliği var - "getUserMedia API"

NOT: HTML5, Android cihazlardaki bir web sayfasından fotoğraf yakalayabilir (en azından Honeycomb OS tarafından çalıştırılan en son sürümlerde; ancak iPhone'larda değil iOS 6'da işleyemez).

— Louis
kaynak

üzgünüm setUserMedia API

— Louis

4

WEBRTC kullanabilirsiniz ancak maalesef tüm web tarayıcıları tarafından desteklenmemektedir. AŞAĞIDAKİ TARAYICILARIN KİMLERİN DESTEKLEDİĞİNİ GÖSTERME BAĞLANTISI http://caniuse.com/stream

Ve bu bağlantı size nasıl erişebileceğiniz hakkında bir fikir verir (örnek kod). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

— Michael Sultana
kaynak

2

WebRTC ve getUserMediaaşırı dolu, <input type="file" accept="image/*">hile yapacak.

— Octavian Naicu

4

AppMobi HTML5 SDK, bir zamanlar HTML5 tabanlı bir uygulamadan kamera dahil olmak üzere yerel cihaz işlevlerine erişim sözü verdi, ancak artık Google'a ait değil. Bunun yerine, bu gönderideki HTML5 tabanlı yanıtları deneyin .

— Dave Everitt
kaynak

1

Google'ın AppMobi veya ürünleri üzerinde herhangi bir sahipliği olduğuna inanmıyorum.

— fakeguybrushthreepwood

Ah - benim hatam, çünkü Chrome web mağazasında - Google referansı kaldırıldı. İşte gerçek ortaklar: appmobi.com/?page_id=468

— Dave Everitt

3

Kameraya erişmek için getUserMedia'yı kullanmak isteyeceksiniz .

Bu eğiticide tarayıcıdan bir cihaz kameraya erişmenin temelleri açıklanmaktadır: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Not: Bu, çoğu Android cihazda ve yalnızca Safari'deki iOS'ta çalışır.

— Aaron Benjamin
kaynak

1

Uygulamanın yerel olarak yerel ana bilgisayar altında çalıştırılmasını veya GetUserMedia () için SSL üzerinden çalışmasını gerektiren güvenlik özelliklerinin uygulandığına dikkat edilmelidir.

Bu mevcut demolar birkaç çalışırken keşfetti ve işe yaramadı zaman dissapointed oldu! Bakınız: Yeni Güvenlik Kısıtlamaları

— Anthony Griggs
kaynak

0

Yapabileceğinizi sanmıyorum - ses veya video almak için bir W3C taslak API var, ancak herhangi bir büyük mobil işletim sisteminde henüz bir uygulama yok.

~~İkinci en iyi~~ seçenek Dennis'in PhoneGap kullanma önerisiyle devam etmektir. Bu, yerel bir uygulama oluşturmanız ve mobil uygulama mağazasına / pazar yerine eklemeniz gerektiği anlamına gelir.

— Kevin
kaynak

repost için üzgünüm - android jersey istemcisi ile NPE istisna etrafında var olup olmadığını görmek için bakıyordu. sıkışmış :(

— büyücü

0

Bazı ek mekanizmalar (yani Flash veya donanım API'sına erişime izin veren bir tür kapsayıcı) olmadan bir cep telefonunun kamerasına web tarayıcısından erişmenin herhangi bir yolunu bilmiyorum

İkincisi için PhoneGap'e bir göz atın: http://docs.phonegap.com/phonegap_camera_camera.md.html

Bununla kameraya en azından iOS ve Android tabanlı cihazlardan erişebilmelisiniz.

— Dennis Traub
kaynak

4

Bu hala bir uygulamanın mobil cihaza yüklenmesini gerektirir, bu da OP'nin kaçınmak istediğini düşünüyorum.

— Michael Petrotta

@MichaelPetrotta daha iyi bir yol biliyor musunuz?

— Dennis Traub

2

OP'nin ne istediğine inanmıyorum.

— Michael Petrotta

@MichaelPetrotta ben de öyle düşünüyorum. Ve iOS'ta çalıştığı için (Flash'ın çalışmadığı) düşünebileceğim en iyi yol PhoneGap olacaktır. Yine de yerel, doğru, ancak bir web sayfasından kameralara en azından biraz platformlar arası erişime izin veriyor.

— Dennis Traub