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

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;

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.

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.

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.

Aparentemente, é resolvido no "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Atualização 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

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

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!