Como acessar a câmera no aplicativo da web da tela inicial do iOS11?

131

Resumo

Não podemos acessar a câmera a partir de um aplicativo da web de tela inicial iOS11 (versão pública) usando o WebRTC ou a entrada do arquivo, detalhes abaixo. Como nossos usuários podem continuar acessando a câmera, por favor?

Estamos veiculando a página de aplicativos da web por https.

Atualização, abril

A versão pública do iOS 11.3 parece ter corrigido o problema e o acesso à câmera de entrada de arquivo está funcionando novamente!

Atualização, março

Como as pessoas aqui disseram, os documentos da Apple aconselham que a função de câmera de aplicativo da web retorne na versão 11.3, junto com os funcionários de serviço. Isso é bom, mas ainda não temos certeza se queremos que todos reinstale novamente até que possamos testar completamente o 11.3GM.

Solução, novembro

Perdemos a esperança de que a Apple queira consertar isso e seguimos em frente. Modificamos nosso aplicativo da web para remover a função "Adicionar à tela inicial" do iOS e pedimos aos usuários afetados para remover qualquer ícone anterior da tela inicial.

Atualização, 6 de dezembro

O iOS 11.2 e o iOS 11.1.2 não são corrigidos.

Soluções alternativas, 21 de setembro

Parece que poderíamos pedir aos clientes existentes do aplicativo Web

  • não atualize para iOS11 - boa sorte com isso :)
  • tire fotos na câmera do iOS e selecione-as novamente no aplicativo Web
  • aguarde o próximo beta do ios
  • reinstalar como uma página do navegador Safari (depois de removermos a lógica ATHS)
  • mudar para Android

Entrada de arquivo

Nosso código de produção atual usa uma entrada de arquivo que funcionou bem por anos com o iOS 10 e versões anteriores. No iOS11, ele funciona como uma guia Safari, mas não no aplicativo da tela inicial. Neste último caso, a câmera é aberta e apenas uma tela preta é exibida; portanto, é inutilizável.

   <meta name="apple-mobile-web-app-capable" content="yes">
   ...
   <input type="file" accept="image/*">

WebRTC

O Safari 11 no iOS11 oferece captura de mídia WebRTC, o que é ótimo.

Podemos capturar uma imagem de câmera para tela em uma página da Web normal em computadores e dispositivos móveis usando navigator.mediaDevices.getUserMedia de acordo com o código de exemplo vinculado aqui .

Quando adicionamos a página à tela inicial do iPad ou iPhone, ela navigator.mediaDevicesse torna undefinedinutilizável.

    <meta name="apple-mobile-web-app-capable" content="yes">
    ...
    // for some reason safari on mac can debug ios safari page but not ios home screen web apps 
    var d = 'typeof navigator : ' + typeof navigator; //object
    d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
    // try alternates
    d += 'typeof navigator.getUserMedia  : ' + typeof navigator.getUserMedia; // undefined
    d += 'typeof navigator.webkitGetUserMedia  : ' + typeof navigator.webkitGetUserMedia; // undefined
    status1.innerHTML = d;
ajayel
fonte
5
Espero que eles o consertem, mas isso pode ser outra instância da Apple empurrando os desenvolvedores para sua loja de aplicativos, degradando o UX do Safari.
Perfect_element
3
Estou tentando aprender o desenvolvimento progressivo de aplicativos da web e enquanto testava um aplicativo no Android e iOS, também encontrei esse problema. A navegação no aplicativo em um navegador funciona bem, mas depois que eu salvo na tela inicial do safari e tento usá-lo como um aplicativo, recebo uma tela preta ao tentar acessar a câmera.
tutley
2
iOS: 11.2.1 - O problema persiste ...
aLiEnHeAd
2
iOS: 11.2.2 - O problema persiste ...
MrRobot 13/01
3
O iOS 11.4.1 parece não estar funcionando para mim, alguém tem sorte?
Amah 23/07/19

Respostas:

25

Temos um problema bem parecido. Até o momento, a única solução alternativa que conseguimos fazer foi remover a metatag para que ela fosse "compatível com aplicativos da web para dispositivos móveis da apple" e permitir que os usuários a abrissem no Safari, onde tudo parece funcionar normalmente.

Tomas Vitasek
fonte
24

Atualização : enquanto alguns changelogs e postagens publicados anteriormente me levaram a acreditar que os aplicativos da Web que usavam um em manifest.jsonvez de apple-mobile-web-app-capablefinalmente teriam acesso a uma implementação adequada do WebRTC, infelizmente isso não é verdade, como outros já apontaram e os testes confirmaram. Rosto triste. Pedimos desculpas pelos inconvenientes causados ​​por isso e esperamos que, em um dia de sorte em uma galáxia distante, a Apple finalmente nos dê acesso à câmera em visualizações fornecidas pelo WebKit (que não é do Safari) ...

Sim, como já mencionado, o getUserMedia está disponível apenas diretamente no Safari, mas nem no UIWebView nem no WKWebView, portanto, infelizmente, suas únicas opções são

  • removendo <meta name="apple-mobile-web-app-capable" content="yes">para que seu 'aplicativo' seja executado em uma guia normal do Safari, onde o getuserMedia está acessível
  • usando uma estrutura como o Apache Cordova que concede acesso à câmera de um dispositivo de outras maneiras.

Esperamos que a Apple remova essa restrição do WebRTC mais cedo ou mais tarde ...

Fonte:
para desenvolvedores que usam o WebKit em seus aplicativos, o RTCPeerConnection e o RTCDataChannel estão disponíveis em qualquer visualização da Web, mas o acesso à câmera e ao microfone está atualmente limitado ao Safari.

StateOfTheArtJonas
fonte
A atualização não parece estar correta. Em iOS 11.3 Beta getUserMediae webkitGetUserMediasão ambos indefinido ao usar<meta name="apple-mobile-web-app-capable" content="yes">
savage-ro
@ ro-selvagem a versão final agora está fora, e nós ainda não posso chegar a este trabalho
Owen
4
safari é o novo ou seja, por favor, maçã, dá-nos permissão para dados de mídia de usuários acesso
Pablo Cegarra
15

Boas notícias! Finalmente, a câmera parece estar acessível a partir de um aplicativo da web na tela inicial no primeiro iOS 11.3 beta.

Fiz um repo com alguns arquivos, que demonstram que funciona:

https://github.com/joachimboggild/uploadtest

Passos para testar:

  1. Servir esses arquivos em um site acessível a partir do seu telefone
  2. Abra o index.html no iOS Safari
  3. Adicionar à tela inicial
  4. Abra o aplicativo na tela inicial. Agora a página da web é aberta em tela cheia, sem a interface do usuário de navegação.
  5. Pressione o botão arquivo para selecionar uma imagem da câmera.

Agora a câmera deve funcionar normalmente e não ser uma tela preta. Isso demonstra que a funcionalidade funciona novamente.

Devo acrescentar que uso um campo simples, não getUserMedia ou algo assim. Eu não sei se isso funciona.

Joachim Bøggild
fonte
Como você conseguiu executá-lo com <meta name = "apple-mobile-web-app-enabled" content = "yes">?
Alexander
1
Usei um formulário normal com uma tag de entrada e funcionou.
Joachim Bøggild
@ JoachimBøggild Você tem certeza de que os dispositivos iOS 11.3+ podem abrir a câmera a partir de um PWA ?? Obrigado por dar uma boa notícia.
Jegadeesh
Sim, com certeza. Eu tenho isso em execução no posmo.com. Não me lembro das configurações. Eles incluem um arquivo de manifesto.
Joachim Bøggild
1
@ JoachimBøggild você pode compartilhar a tag manifest / VIDEO para isso. Eu testei meu código, e ele só funciona no safari. não no aplicativo da tela inicial.
maio
1

Isso parece estar funcionando novamente no iOS 11.4 se você estiver usando um campo de entrada de arquivo.

aalcutt
fonte
1
Eu tenho o iOS 11.4 e ele não funciona em um aplicativo de tela inicial. O que você está fazendo para fazer funcionar?
Aron19
Não fiz alterações. Apenas atualizei para a versão mais recente e ela começou a funcionar novamente.
aalcutt
1
verificado em 11.4. obras em safari - não funciona como um aplicativo de tela inicial
Maio
Estou no iOS 11.4.1 no iPad e está funcionando. Que dispositivo você está utilizando?
aalcutt
1
Algum motivo para você não poder usar a entrada do arquivo? Isso está funcionando novamente.
Aalcutt
0

Recentemente, enfrentei o mesmo problema, a única solução que encontrei foi abrir o aplicativo no navegador, em vez do modo normal. Mas apenas no iOS!

O truque era criar 2 arquivos manifest.json com configurações diferentes.

O normal para android e outro para tudo é Apple, manifest-ios.json, a única diferença estará na propriedade de exibição.

Etapa 1: adicione o ID à tag do link do manifesto:

<link id="manifest" rel="manifest" href="manifest.json">

Passo 2: este script foi adicionado à parte inferior do corpo:

<script>
    let isIOS = /(ipad|iphone|ipod|mac)/g.test(navigator.userAgent.toLowerCase());
    let manifest = document.getElementById("manifest");
    if (isIOS)
      manifest.href = 'manifest-ios.json'
</script>

Etapa 3: no manifest-ios.json, defina a exibição como navegador

{
    "name": "APP",
    "short_name": "app",
    "theme_color": "#0F0",
    "display": "browser", // <---- use this instead of standard
    ...
}

Outro problema aparece, como abrir o aplicativo várias vezes em várias guias, às vezes.

Mas espero que ajude vocês!

Domotor Zsolt
fonte