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

131

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;
ajayel
fuente
55
Espero que lo arreglen, pero esta puede ser otra instancia de Apple que empuja a los desarrolladores a su tienda de aplicaciones al degradar la experiencia de usuario de Safari.
perfect_element
3
Estoy tratando de aprender el desarrollo progresivo de aplicaciones web y al probar una aplicación en Android e iOS también me encontré con este problema. La navegación a la aplicación en un navegador funciona bien, pero una vez que "guardo en la pantalla de inicio" desde el safari e intento usarla como una aplicación, aparece una pantalla en negro cuando intento acceder a la cámara.
tutley
2
iOS: 11.2.1 - El problema persiste ...
aLiEnHeAd
2
iOS: 11.2.2 - El problema persiste ...
MrRobot
3
¿iOS 11.4.1 no parece estar funcionando para mí, suerte?
Amah

Respuestas:

25

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.

Tomás Vitasek
fuente
24

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.

StateOfTheArtJonas
fuente
Su actualización no parece ser correcta. En iOS 11.3 Beta getUserMediay webkitGetUserMediaambos están indefinidos cuando se usa<meta name="apple-mobile-web-app-capable" content="yes">
ro-savage
@ ro-savage el lanzamiento final ya está disponible, y todavía no podemos hacer que esto funcione
Owen
44
safari es el nuevo es decir, por favor apple, danos permiso para acceder a los datos multimedia de los usuarios
Pablo Cegarra
15

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

Joachim Bøggild
fuente
¿Cómo se las arregló para ejecutarlo con <meta name = "apple-mobile-web-app-able" content = "yes">?
Alexander
1
Usé una forma normal con una etiqueta de entrada, y funcionó.
Joachim Bøggild
@ JoachimBøggild ¿Estás seguro de que los dispositivos iOS 11.3+ pueden abrir la cámara desde un PWA? Gracias por dar una buena noticia.
jegadeesh
Si muy seguro. Lo tengo corriendo en posmo.com. No puedo recordar la configuración. Sin embargo, incluyen un archivo de manifiesto.
Joachim Bøggild
1
@ JoachimBøggild, ¿puede compartir la etiqueta de manifiesto / VIDEO para esto? He probado mi código y solo funciona en safari. no en la aplicación de pantalla de inicio.
mayo
1

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

aalcutt
fuente
1
Tengo iOS 11.4 y no funcionará en una aplicación de pantalla de inicio. ¿Qué haces para que funcione?
Aron
No hice ningún cambio. Simplemente actualicé a la última versión y comenzó a funcionar nuevamente.
aalcutt
1
verificado en 11.4. trabajos en Safari - no funciona como una aplicación de pantalla de inicio
mayo
Estoy en iOS 11.4.1 en iPad y está funcionando. ¿Qué dispositivo estás usando?
aalcutt
1
¿Alguna razón por la que no puede usar la entrada del archivo? Eso está funcionando de nuevo.
aalcutt
0

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!

Domotor Zsolt
fuente