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

Question

总结

我们无法使用 WebRTC 或文件输入从 iOS11（public 版本）主屏幕网络应用访问相机，详情如下。请问我们的用户如何才能继续使用相机？

我们正在通过 https 提供网络应用程序页面。

更新，四月

iOS 11.3 的 public 版本似乎已经解决了这个问题，文件输入摄像头访问又可以工作了！

更新，三月

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

解决方案，11 月

我们失去了希望 Apple 想要解决这个问题并继续前进。修改了我们的网络应用程序以删除 iOS "Add to home screen" 功能，并要求受影响的用户删除任何以前的主屏幕图标。

更新，12 月 6 日

iOS 11.2 和 iOS 11.1.2 未修复。

解决方法，9 月 21 日

看来我们可以询问网络应用程序的现有客户

不升级到 iOS11 - 祝你好运:)
在 iOS 相机中拍照，然后 select 将它们返回到网络应用程序中
等待下一个ios测试版
重新安装为浏览器内的 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 每 the sample code linked here 在桌面和移动设备上的普通网页上将相机图像捕获到 canvas。

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

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

Answer 2

更新：虽然一些早期发布的变更日志和帖子让我相信使用 manifest.json 而不是 apple-mobile-web-app-capable 的 Web 应用程序最终可以访问一个正确的 WebRTC 实现，不幸的是，这不是真的，正如这里的其他人所指出的，并且测试已经证实。悲伤的脸。对于由此造成的不便，我们深表歉意，希望在遥远的银河系中有一个幸运的日子，Apple 终于可以让我们在由（非 Safari）WebKit 提供支持的视图中访问相机...

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

删除 <meta name="apple-mobile-web-app-capable" content="yes"> 以便您的 'app' 在正常的 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 3

好消息！在第一个 iOS 11.3 beta 中，似乎终于可以从主屏幕网络应用程序访问相机了。

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

https://github.com/joachimboggild/uploadtest

测试步骤：

从您的 phone
在 iOS Safari
添加到主屏幕
从主屏幕打开应用程序。现在网页全屏打开，没有导航ui.
按文件按钮 select 来自相机的图像。

现在摄像头应该可以正常工作，不会黑屏了。这表明该功能再次起作用。

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

Answer 4

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

Answer 5

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

2020 年 3 月更新：https://twitter.com/firt/status/1241163092207243273?s=19

Answer 6

最近我遇到了同样的问题，我想出的唯一解决办法是在浏览器中打开应用程序而不是正常模式。但仅限于 iOS!

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

正常的 android 和所有的东西都是 Apple，manifest-ios.json，唯一的区别将在显示上属性。

第 1 步： 将 id 添加到清单 link 标签：

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

第三步：在manifest-ios.json中设置浏览器显示

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

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

不过希望对大家有所帮助！

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

How to access camera on iOS11 home screen web app?

html

javascript

camera

webrtc

ios11

总结