Como acessar a câmera de um celular a partir de um aplicativo da web?

190

No meu aplicativo da Web (não aplicativo nativo) para celulares, quero tirar uma foto e enviá-la, mas não quero usar o Adobe Flash. Há alguma maneira de fazer isso?

html mobile camera 夏 期 劇場
fonte
2
"Página da Web" significa que ele deve ser facilmente acessado a partir de qualquer tipo de clientes / dispositivos. Então, devo definir restrições?
夏期劇場
1
Eu suponho que você deseja acessar a câmera de hardware, certo?
precisa
Hmm .. "Câmera" dos telefones inteligentes móveis / etc .. da página da web.
夏期劇場
Olá, este é um assunto que estou estudando atualmente para meus próprios projetos. PWAs permitem que você use os recursos do dispositivo nativas em navegadores modernos: developers.google.com/web/updates/2016/12/imagecapture
palmaone

Respostas:

260

No iPhone iOS6 e no Android ICS em diante, o HTML5 possui a seguinte tag, que permite tirar fotos do seu dispositivo:

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

Capture pode levar valores como câmera, filmadora e áudio.

Acho que essa tag definitivamente não funcionará no iOS5, não tenho certeza.

Ashish
fonte
32
Aqui é ótimo tutorial: html5rocks.com/en/tutorials/getusermedia/intro
Micah
2
GetUserMedia não é necessário aqui.
precisa saber é o seguinte
Recebo um "getUserMedia () não suportado por este dispositivo" - mas estou no safari e tenho o ios7 - por quê? - Dan agora edit #
Dan
10
Eu acho que talvez o código devesse ser <input type="file" accept="image/*;capture=camera">. De acordo com o MDN, não há captureatributo para um inputelemento.
Kenny Evitt
9
Ambos capture="camera"(String) e os mais velhos accept="image/*;capture=camera"foram substituídos em 2012 com capture="capture"(Boolean). O atributo é usado para forçar a captura em vez de selecionar na biblioteca. Veja as especificações e a sintaxe correta para captura de mídia HTML
Octavian Naicu
36

Hoje em dia, pelo menos com o Android, é relativamente fácil. Basta usar a etiqueta de entrada de arquivo normal e, quando o usuário clicar, o telefone perguntará se o usuário deseja usar a câmera (ou gerenciadores de arquivos etc.) para enviar um arquivo. Basta tirar uma foto com a câmera e ela será automaticamente adicionada e carregada.

Nenhuma idéia sobre o iphone. Talvez alguém possa esclarecer sobre isso. EDIT: Iphone funciona da mesma forma.

Amostra da tag de entrada:

<input type="file" accept="image/*" capture="camera">
Tuxie
fonte
você pode fazer isso por vários arquivos como: múltiplas = "múltiplos"
parseguy
exemplo: <input type = "file" accept = "image / *" multiple = "multiple" capture = "camera">
parseguy
multiplefunciona tanto no Android quanto no iOS, consulte Sintaxe correta para captura de mídia HTML
Octavian Naicu
Não tenho certeza para outro dispositivo da Apple, pelo menos esta solução também funciona no iPad agora.
cytsunny
29

Apenas para atualizar isso, o padrão agora é:

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

para acessar a câmera (traseira) voltada para o ambiente e 

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

para câmera voltada para o usuário (frontal). Para acessar o vídeo, substitua "video" por "image" no nome.

Testado no iPhone 5c, executando o iOS 10.3.3, firmware 760, funciona bem.

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

user3204365
fonte
23

O Safari & Chrome no iOS 6+ e Android 2.2+ suportam o HTML Media Capture, que permite tirar fotos com a câmera do dispositivo ou selecionar uma existente:

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

Veja como funciona no iOS 10:

insira a descrição da imagem aqui

O Android 3.0+ e o Safari no iOS10.3 + também suportam o captureatributo usado para pular diretamente para a câmera.

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

capture="camera"(String) e accept="image/*;capture=camera"(Parameter) faziam parte de especificações antigas e foram substituídos por capture(Boolean) a Recomendação do candidato do W3C.

Documentação de suporte: este livro O'Reilly de 2013 e meus testes

Otaviano Naicu
fonte
Mina no Android apenas salta direto para selecionar fotos, mas não me dar a opção para a câmera, mesmo quando eu puser capture = "câmera" .... totalmente preso
Benyaman
@ Benyaman Tente com em capturevez de capture="camera". Curioso que dispositivo e versão do Android.
Otaviano Naicu
Aparentemente, no Android 5.0, aparentemente, o Phonegap não possui captura de HTML incorporada. Portanto, ele não pode capturar coisas, nem gravação de vídeo, áudio ou câmera. Eu tive que construir uma solução alternativa.
precisa saber é o seguinte
5

bem, há novos recursos HTML5 para acessar a câmera do dispositivo nativo - "getUserMedia API"

NOTA: O HTML5 pode lidar com a captura de fotos de uma página da Web em dispositivos Android (pelo menos nas versões mais recentes, executadas pelo Honeycomb OS; mas não nos iPhones, mas no iOS 6).

Louis
fonte
oh desculpe é chamada setUserMedia API
Louis
4

Você pode usar o WEBRTC, mas infelizmente não é suportado por todos os navegadores da web. ABAIXO É O LINK PARA MOSTRAR QUE NAVEGADORES O APOIA http://caniuse.com/stream

E esse link fornece uma idéia de como você pode acessá-lo (código de exemplo). http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Michael Sultana
fonte
2
WebRTC e getUserMediaé um exagero, <input type="file" accept="image/*">fará o truque.
Octavian Naicu
4

O SDK do AppMobi HTML5 prometeu o acesso à funcionalidade nativa do dispositivo - incluindo a câmera - a partir de um aplicativo baseado em HTML5, mas não é mais propriedade do Google. Em vez disso, tente as respostas baseadas em HTML5 nesta postagem .

Dave Everitt
fonte
1
Não acredito que o Google possua propriedade sobre o AppMobi ou seus produtos.
Fakeguybrushthreepwood 30/11/12
Ah - meu erro, porque está na loja virtual do Chrome - a referência do Google foi removida. Aqui estão os verdadeiros parceiros: appmobi.com/?page_id=468
Dave Everitt
1

Observe que foram implementados recursos de segurança que exigem que o aplicativo seja executado localmente no host local ou por meio do SSL para que GetUserMedia () funcione.

Descobri isso ao tentar várias das demos disponíveis e fiquei desapontado quando não funcionaram! Consulte: Novas restrições de segurança

Anthony Griggs
fonte
0

Acho que você não pode - existe uma API de rascunho do W3C para obter áudio ou vídeo, mas ainda não há implementação em nenhum dos principais sistemas operacionais móveis.

Segundo melhor A única opção é seguir a sugestão de Dennis de usar o PhoneGap. Isso significa que você precisa criar um aplicativo nativo e adicioná-lo à loja / mercado de aplicativos para dispositivos móveis.

Kevin
fonte
desculpe repost - eu estava olhando para ver se você contornou a exceção NPE com o cliente jersey no android. preso :(
necromante
0

Não conheço nenhuma maneira de acessar a câmera de um telefone celular a partir do navegador da Web sem algum mecanismo adicional (por exemplo, Flash ou algum tipo de contêiner que permita o acesso à API do hardware)

Para este último, consulte PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html

Com isso, você poderá acessar a câmera pelo menos em dispositivos baseados em iOS e Android.

Dennis Traub
fonte
4
Isso ainda exige que um aplicativo seja instalado no dispositivo móvel, o que eu acho que o OP quer evitar.
precisa
@MichaelPetrotta você conhece uma maneira melhor?
precisa
2
Não acredito que seja possível o que o OP está pedindo.
Michael Petrotta
@MichaelPetrotta é o que eu acho também. E a melhor maneira de pensar seria no PhoneGap, pois funciona no iOS (o que o Flash não). Ainda assim, é nativo, é verdade, mas permite pelo menos um pouco de acesso entre plataformas às câmeras a partir de uma página da web.
precisa