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

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:

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

3

Você deseja usar o getUserMedia para acessar a câmera.

Este tutorial descreve os conceitos básicos de acesso a uma câmera de dispositivo a partir do navegador: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Nota: Isso funciona na maioria dos dispositivos Android e apenas no iOS no Safari.

— Aaron Benjamin
fonte

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