Question

摘要

我们无法使用WebRTC或文件输入从iOS11（公开发布）主屏幕Web应用程序访问相机，详情如下。我们的用户如何继续访问相机？

我们通过https服务网页应用页面。

更新，4月

iOS 11.3的公开发布似乎解决了问题，文件输入摄像头访问再次正常工作！

更新，3月

正如这里的人们所说，Apple docs建议网络应用程序摄像头功能与服务工作者一起返回11.3。这很好，但我们还不确定是否我们希望每个人都重新安装，直到我们可以对11.3GM进行彻底测试。

解决方案，11月

我们失去了希望苹果希望解决这个问题并向前迈进。修改了我们的网络应用程序以删除iOS“添加到主屏幕”功能，并要求受影响的用户删除任何以前的主屏幕图标。

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 media capture，这很棒。

我们可以使用navigator.mediaDevices.getUserMedia per the sample code linked here在桌面和移动设备上的普通网页上捕捉相机图像到画布。

当我们将页面添加到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;

Answer 1

更新：虽然一些早期发布的更改日志和帖子让我相信使用manifest.json代替apple-mobile-web-app-capable的网络应用最终可以访问正确的WebRTC实施，不幸的是，这不是真的，正如其他人已经指出并且测试已经证实的那样。悲伤的脸。很抱歉由于此造成的不便，让我们希望在远在遥远的银河系中幸运的一天Apple最终会在（非Safari）WebKit驱动的视图中为我们提供相机访问...

是的，正如其他人所提到的，getUserMedia只能直接在Safari中使用，但在UIWebView和WKWebView中都不可用，所以不幸的是你唯一的选择是

删除<meta name="apple-mobile-web-app-capable" content="yes">以便您的应用程序＆＃39;在普通的Safari选项卡中运行，可以访问getuserMedia
使用像Apache Cordova这样的框架，允许您以其他方式访问设备的摄像头。

希望Apple能够提前取消此WebRTC限制......

来源：
For developers that use WebKit in their apps, RTCPeerConnection and RTCDataChannel are available in any web view, but access to the camera and microphone is currently limited to Safari.

Answer 2

我们有类似的问题。到目前为止，我们能够做的唯一解决方法是删除它的元标记为“apple-mobile-web-app-capable”，并允许用户在Safari中打开它，一切似乎都能正常工作。

Answer 3

好消息！最初似乎可以从第一个iOS 11.3测试版中的主屏幕Web应用程序访问该摄像头。

我用几个文件制作了一个回购文件，证明它有效：

https://github.com/joachimboggild/uploadtest

测试步骤：

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

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

我必须补充一点，我使用的是普通字段，而不是getUserMedia或其他。我不知道这是否有效。

Answer 4

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

Answer 5

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

Answer 6

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

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

对于Android而言，正常的一切对于苹果而言都是一切，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
    ...
}

出现另一个问题，例如有时在多个标签中多次打开应用程序。

但希望对您有帮助！

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

摘要