如何访问 iOS11主屏网页应用上的摄像头？

摘要

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

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

更新，艾普丽尔

IOS11.3的公开发布似乎已经解决了这个问题，文件输入摄像头的访问又可以工作了！

更新，三月

正如这里的人们所说，苹果文档建议网络应用程序摄像功能将在11.3版本中与服务工作者一起回归。这是好的，但我们还不确定，如果我们希望每个人都重新安装，直到我们可以在11.3通用汽车彻底测试。

解决方案，十一月

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

更新，12月6日

IOS11.2和 iOS11.1.2不能修复。

工作区，9月21日

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

  • 没有升级到 iOS11——祝你好运:)
  • 在 iOS 相机中拍照，然后在网络应用程序中选择它们
  • 等待下一个 ios 测试版
  • 重新安装为浏览器中的 Safari 页面(删除 ATHS 逻辑之后)
  • 切换到安卓系统

文件输入

我们当前的生产代码使用的文件输入在 iOS10及以上版本中已经工作了很多年。在 iOS11上，它可以作为 Safari 标签页使用，但不能从主屏幕应用程序中使用。在后一种情况下，相机是打开的，只有一个黑色的屏幕显示，因此它是不可用的。

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

WebRTC

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

我们可以使用 Navator.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;
50667 次浏览
小开
最佳答案

我们有相似的问题。到目前为止，我们能够做的唯一解决办法是移除“ Apple-mobile-web-app-able”的元标签，让用户在 Safari 中打开它，在 Safari 中一切似乎都正常运行。

小开

更新 : 虽然一些早期发布的更新日志和帖子让我相信使用 manifest.json而不是 apple-mobile-web-app-capable的 Web 应用程序最终能够访问正确的 WebRTC 实现，但不幸的是，这不是真的，正如这里的其他人指出和测试已经证实的那样。悲伤的表情。 很抱歉由此造成的不便，让我们希望在一个遥远的星系幸运的一天，苹果将最终给我们相机访问(非 Safari) WebKit 的视图..。

是的，正如其他人提到的，getUserMedia 只能在 Safari 中直接使用，但是既不能在 UIWebView 中使用，也不能在 WKWebView 中使用，所以很不幸，您只能选择在 Safari 中使用

  • 删除 <meta name="apple-mobile-web-app-capable" content="yes">，使您的“应用程序”在一个普通的 Safari 标签页中运行，其中 getuserMedia 是可访问的
  • 使用 ApacheCordova 这样的框架，可以通过其他方式访问设备的摄像头。

希望苹果能尽快取消 WebRTC 限制。

来源:
对于在应用程序中使用 WebKit 的开发人员来说，RTCPeerConnection 和 RTCDataChannel 可以在任何 web 视图中使用，但是对摄像头和麦克风的访问目前仅限于 Safari。

小开

好消息！摄像头终于可以在 iOS11.3测试版的主屏网页应用程序上使用了。

我用一些文件做了一个回购，证明它是有效的:

Https://github.com/joachimboggild/uploadtest

测试步骤:

  1. 从您的手机访问网站提供这些文件
  2. 在 iOS Safari 中打开 index.html
  3. 添加到主屏幕
  4. 从主屏幕打开应用程序。现在网页是全屏打开，没有导航界面。
  5. 按下文件按钮从照相机中选择一个图像。

现在摄像机应该正常工作，而不是黑屏。这表明功能再次工作。

我必须补充的是，我使用的是一个普通字段，而不是 getUserMedia 之类的。我不知道这样行不行。

小开

如果您使用的是文件输入字段，那么在 iOS 11.4中这似乎又可以工作了。

小开

很显然，这个问题在 ios 13 beta 1中得到了解决: Https://twitter.com/chromiumdev/status/1136541745158791168?s=09

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

小开

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

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

普通的机器人系统和普通的机器人系统都是苹果的，清单 ios。Json，唯一的区别在于 display 属性。

步骤1: 向清单链接标记添加 id:

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

第二步: 在主体的底部添加了这个脚本:

<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: 在 名单，杰森中将显示设置为浏览器

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

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

但愿能帮到你们！


提交答案