如何在iOS11主屏幕Web应用程序上访问相机？

摘要

我们无法使用WebRTC或文件输入从iOS11（公开发行）主屏幕网络应用访问摄像机，详细信息如下。我们的用户如何继续使用相机？

我们通过https提供网络应用页面。

4月更新

3月更新

正如这里的人所说的，苹果文档建议Web应用程序摄像头功能与服务人员一起在11.3中返回。这很好，但是我们不确定是否要大家重新安装，直到我们可以在11.3GM上进行全面测试。

解决方案，十一月

12月6日更新

iOS 11.2和iOS 11.1.2无法修复。

解决方法，9月21日

似乎我们可以向网络应用的现有客户咨询

• 不能升级到iOS11-祝你好运:)
• 在iOS相机中拍照，然后在网络应用中重新选择它们
• 等待下一个iOS Beta
• 重新安装为Safari浏览器内页面（在删除ATHS逻辑之后）
• 切换到Android

文件输入

我们当前的生产代码使用文件输入，该文件输入在iOS 10及更高版本上运行良好。在iOS11上，它可以作为Safari标签使用，但不能在主屏幕应用中使用。在后一种情况下，相机是打开的，并且仅显示黑屏，因此无法使用。

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

WebRTC

iOS11上的Safari 11提供了很棒的WebRTC媒体捕获。

根据此处链接的示例代码，我们可以使用navigator.mediaDevices.getUserMedia在台式机和移动设备上的普通网页上捕获相机图像，并将其捕获到画布上。

当我们将页面添加到iPad或iPhone主屏幕时，navigator.mediaDevices变得undefined无法使用。

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

我们有类似的问题。到目前为止，我们唯一能够解决的方法是删除meta标签，使其具有“ apple-mobile-web-app-capable”的功能，并允许用户在Safari中打开它，在Safari中一切正常。

更新：尽管一些较早发布的变更日志和发布使我相信使用a manifest.json代替的Web Apps apple-mobile-web-app-capable最终将可以访问适当的WebRTC实施，但是不幸的是，事实并非如此，正如此处其他人指出的那样，并且测试已得到确认。悲伤的脸。很抱歉由此给您带来的不便，我们希望在遥远的星系中有一个幸运的日子，Apple最终将为我们提供基于（非Safari）WebKit的视图中的摄像头访问权限...

是的，正如其他人提到的那样，getUserMedia仅在Safari中直接可用，而在UIWebView和WKWebView中均不可用，因此不幸的是，您唯一的选择是

• 删除，<meta name="apple-mobile-web-app-capable" content="yes">这样您的“应用”就可以在正常的Safari标签中运行，在该标签中可以访问getuserMedia
• 使用类似Apache Cordova的框架，该框架可以通过其他方式授予您访问设备的相机的权限。

希望苹果尽快删除此WebRTC限制...

来源：
对于在其应用程序中使用WebKit的开发人员，RTCPeerConnection和RTCDataChannel可在任何Web视图中使用，但当前只能使用Safari访问摄像机和麦克风。

好消息！终于可以从第一个iOS 11.3 beta的主屏幕Web应用程序访问该相机了。

我用几个文件制作了一个仓库，证明了它的工作原理：

https://github.com/joachimboggild/uploadtest

测试步骤：

1. 通过手机访问的网站提供这些文件
2. 在iOS Safari中打开index.html
3. 添加到主屏幕
4. 从主屏幕打开应用。现在，该网页已全屏打开，没有导航ui。
5. 按文件按钮从相机中选择图像。

现在，相机应该可以正常工作了，而不是黑屏。这表明该功能可以再次使用。

我必须补充一点，我使用的是纯字段，而不是getUserMedia或类似的字段。我不知道那行得通。

显然是在“ ios 13 beta 1”中解决的：https： //twitter.com/ChromiumDev/status/1136541745158791168？s = 09

更新20/03/2020：https ://twitter.com/firt/status/1241163092207243273 ? s =19

如果您使用文件输入字段，这似乎在iOS 11.4中再次正常工作。

最近，我遇到了同样的问题，我想到的唯一解决方案是在浏览器中的应用程序中打开，而不是在正常模式下打开。但仅在iOS上！

诀窍是创建2个具有不同配置的manifest.json文件。

正常情况下，适用于android的所有设备均适用于Apple，即manifest-ios.json，唯一的区别在于display属性。

步骤1：将ID添加到清单链接标记：

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

步骤2：将此脚本添加到正文的底部：

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

步骤3：在manifest-ios.json中将显示设置为浏览器

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

出现另一个问题，例如有时会在多个选项卡中多次打开该应用程序。

但是希望它对你们有帮助！