Acesso à câmera pelo navegador


150

Estamos criando um site HTML5 para dispositivos móveis e precisamos obter acesso à câmera por meio do navegador da Web sem ser um aplicativo nativo. Estamos com problemas para fazer esse trabalho no iOS. Alguém está ciente de uma solução para isso?

Respostas:


124

Você pode tentar o seguinte:

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

mas deve ser o iOS 6 ou superior para funcionar. Isso lhe dará um bom diálogo para você escolher tirar uma foto ou fazer upload de uma do seu álbum, ou seja,

Screenhot

Um exemplo pode ser encontrado aqui: Capturando dados da câmera / imagem sem o PhoneGap


5
Isso também é IMPRESSIONANTE no Android!
Matt

1
Boa demonstração para fazer o upload para um servidor. Alguém sabe como modificar isso para salvar a imagem em um álbum local no dispositivo?
KNiemczyk #

2
O único problema é que, pelo menos no iphone (ios 7.0.4), pelo menos no momento em que cria uma imagem temporária chamada sempre 'image.jpg'. Portanto, se você enviar algumas imagens da mesma forma, elas se substituirão devido ao mesmo nome, a menos que você faça algo para renomeá-las, tenha cuidado!
aleation 30/01

@ K.Niemczyk: você já descobriu isso? Nesse caso, eu estaria interessado na solução. Encontrei o seguinte: dev.w3.org/2009/dap/camera (veja os exemplos 6-7 para armazenamento local) #
lamarant

1
Brilhante. Aqui está um violino para quem quiser testar esse código em seu dispositivo.
Simon East

33

A partir de 2015, agora apenas funciona .

<input type="file">

Isso solicitará ao usuário o upload de qualquer arquivo. No iOS 8.x, pode ser um vídeo da câmera, uma foto da câmera ou uma foto / vídeo da Biblioteca de Fotos.

Upload de foto / vídeo / arquivo no iOS / iPhone

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

Isso é o descrito acima, mas limita os envios a fotos apenas da câmera ou da biblioteca, sem vídeos.


1
Existe alguma maneira de impedir que os usuários escolham um arquivo da biblioteca de fotos? Quero aceitar apenas uma imagem recém-tirada.
Daryl

@Daryl não no iOS. O Android suporta o captureatributo que faz exatamente isso. Veja Sintaxe correta para captura de mídia HTML
Octavian Naicu

devo fechar este pop-up Tirar foto ou Biblioteca de vídeos e fotos depois de algum tempo no usuário e não clicar nele.
Pritish

parece que as funções de vídeo não estão mais lá?
Martian2049


10

Eu acho que este está funcionando. Gravando um vídeo ou áudio;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

ou (novo método)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

Caso contrário, provavelmente funcionará no ios6, mais detalhes podem ser encontrados em obter mídia do usuário


4

O aplicativo Picup é uma maneira de tirar fotos de uma página HTML5 e enviá-las ao seu servidor. Requer alguma programação extra no servidor, mas, além do PhoneGap, não encontrei outra maneira.


5
No iOS8, você não precisa mais do Picup. O HTML5 suporta <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Verificado no Safari e Chrome.
Rakensi

1

Essa pergunta já tem alguns anos, mas nesse período algumas possibilidades adicionais evoluíram, como acessar a câmera diretamente, exibir uma pré-visualização e capturar instantâneos (por exemplo, para leitura de código QR).

Este artigo do Google Developers fornece uma explicação detalhada de todas (?) Maneiras de obter dados de imagem / câmera em um aplicativo Web, de "trabalhar em qualquer lugar" (mesmo em navegadores de desktop) a "trabalhar apenas em sistemas modernos e atualizados" dispositivos móveis com data ". Juntamente com muitas dicas úteis.

Métodos explicados:

  • Peça um URL
  • Entrada de arquivo (abordada pela maioria das outras postagens aqui)
  • Arrastar e soltar (útil para navegadores de desktop)
  • Colar da área de transferência
  • Acesse a câmera interativamente (necessário se o aplicativo precisar fornecer feedback instantâneo sobre o que "vê", como códigos QR)
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.