¿Cómo acceder a la cámara en la aplicación web de pantalla de inicio iOS11?

Resumen

No podemos acceder a la cámara desde una aplicación web de pantalla de inicio iOS11 (lanzamiento público) utilizando WebRTC o la entrada del archivo, detalles a continuación. ¿Cómo pueden nuestros usuarios continuar accediendo a la cámara, por favor?

Servimos la página de la aplicación web a través de https.

Actualización, abril

¡El lanzamiento público de iOS 11.3 parece haber solucionado el problema y el acceso a la cámara de entrada de archivos está funcionando nuevamente!

Actualización, marzo

Como la gente aquí ha dicho, los documentos de Apple aconsejan que la función de cámara de la aplicación web regrese en 11.3 junto con los trabajadores del servicio. Esto es bueno, pero aún no estamos seguros si queremos que todos vuelvan a instalar hasta que podamos probar a fondo en 11.3GM.

Solución, noviembre

Perdimos la esperanza de que Apple quiera arreglar esto y seguimos adelante. Modificó nuestra aplicación web para eliminar la función "Agregar a la pantalla de inicio" de iOS y solicitó a los usuarios afectados que eliminaran cualquier icono de la pantalla de inicio anterior.

Actualización, 6 de diciembre

iOS 11.2 y iOS 11.1.2 no se arreglan.

Soluciones provisionales, 21 de septiembre

Parece que podríamos preguntar a los clientes existentes de la aplicación web

• no actualice a iOS11 - buena suerte con eso :)
• tomar fotos en la cámara iOS y luego seleccionarlas nuevamente en la aplicación web
• espera la próxima beta de ios
• reinstalar como una página Safari en el navegador (después de eliminar la lógica ATHS)
• cambiar a Android

Entrada de archivo

Nuestro código de producción actual utiliza una entrada de archivo que ha funcionado bien durante años con iOS 10 y versiones anteriores. En iOS11 funciona como una pestaña Safari pero no desde la aplicación de pantalla de inicio. En el último caso, la cámara se abre y solo se muestra una pantalla negra, por lo tanto, no se puede usar.

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

WebRTC

Safari 11 en iOS11 ofrece captura de medios WebRTC que es genial.

Podemos capturar una imagen de la cámara en un lienzo en una página web normal en el escritorio y en el móvil usando navigator.mediaDevices.getUserMedia según el código de muestra vinculado aquí .

Cuando agregamos la página a la pantalla de inicio del iPad o iPhone, se navigator.mediaDevicesvuelve undefinedinutilizable.

    <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;

Tenemos un problema bastante similar. Hasta ahora, la única solución que hemos podido hacer es eliminar la metaetiqueta para que sea "compatible con Apple-mobile-web-app" y permitir que los usuarios la abran en Safari, donde todo parece funcionar normalmente.

Actualización : Si bien algunos registros de cambios y publicaciones publicados anteriormente me llevaron a creer que las aplicaciones web que usan un en manifest.jsonlugar de apple-mobile-web-app-capablefinalmente tendrían acceso a una implementación adecuada de WebRTC, desafortunadamente esto no es cierto, como otros aquí han señalado y las pruebas han confirmado. Cara triste. Disculpe las molestias causadas por esto y esperemos que un día de suerte en una galaxia muy, muy lejana, Apple finalmente nos dé acceso a la cámara en vistas con WebKit (no Safari) ...

Sí, como otros han mencionado, getUserMedia solo está disponible directamente en Safari, pero no en UIWebView ni WKWebView, por lo que desafortunadamente sus únicas opciones son

• eliminar <meta name="apple-mobile-web-app-capable" content="yes">para que su 'aplicación' se ejecute en una pestaña Safari normal, donde getuserMedia es accesible
• usando un marco como Apache Cordova que le otorga acceso a la cámara de un dispositivo de otras maneras.

Esperemos que Apple elimine esta restricción de WebRTC más temprano que tarde ...

Fuente:
Para los desarrolladores que usan WebKit en sus aplicaciones, RTCPeerConnection y RTCDataChannel están disponibles en cualquier vista web, pero el acceso a la cámara y al micrófono está actualmente limitado a Safari.

¡Buenas noticias! La cámara finalmente parece ser accesible desde una aplicación web de pantalla de inicio en la primera versión beta de iOS 11.3.

He hecho un repositorio con algunos archivos, que demuestran que funciona:

https://github.com/joachimboggild/uploadtest

Pasos para probar:

1. Servir estos archivos desde un sitio web accesible desde su teléfono
2. Abra el index.html en iOS Safari
3. Añadir a la pantalla principal
4. Abra la aplicación desde la pantalla de inicio. Ahora la página web está abierta en pantalla completa, sin interfaz de usuario de navegación.
5. Presione el botón de archivo para seleccionar una imagen de la cámara.

Ahora la cámara debería funcionar normalmente y no ser una pantalla negra. Esto demuestra que la funcionalidad funciona de nuevo.

Debo agregar que uso un campo simple, no getUserMedia o somesuch. No sé si eso funciona.

Aparentemente se resuelve en "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Actualización 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

Esto parece estar funcionando nuevamente en iOS 11.4 si está utilizando un campo de entrada de archivo.

Recientemente me enfrenté al mismo problema, la única solución que se me ocurrió fue abrir en la aplicación en el navegador en lugar del modo normal. ¡Pero solo en iOS!

El truco fue crear 2 archivos manifest.json con diferentes configuraciones.

El normal para Android y uno para todo es Apple, manifest-ios.json, la única diferencia estará en la propiedad de visualización.

Paso 1: agregue la identificación a la etiqueta de enlace de manifiesto:

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

Paso 2: agregó este script a la parte inferior del cuerpo:

<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>

Paso 3: en el manifiesto-ios.json configure la pantalla en el navegador

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

Aparece otro problema, como abrir la aplicación varias veces en pestañas múltiples, a veces.

Pero espero que les ayude chicos!