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

Question

提问by ajayel

Summary

概括

We cannot access camera from an iOS11 (public release) home screen web app using either WebRTC or the file input, details below. How can our users continue to access the camera please?

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

We are serving the web app page over https.

我们通过 https 为 Web 应用程序页面提供服务。

Update, April

更新，四月

iOS 11.3 的公开发布似乎已经解决了这个问题，并且文件输入相机访问又开始工作了！

Update, March

更新，三月

As people here have said the Apple docs advise web app camera function is returning in 11.3 along with service workers. This is good but we are not sure yet if we want to everyone to to reinstall again until we can thoroughly test on 11.3GM.

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

Solution, November

解决方案，11 月

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

Update, 6 December

12 月 6 日更新

iOS 11.2 and iOS 11.1.2 don't fix.

iOS 11.2 和 iOS 11.1.2 无法修复。

Workarounds, 21 September

解决方法，9 月 21 日

Seems we could ask existing customers of the web app

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

not upgrade to iOS11 - good luck with that :)
take photos in iOS camera and then select them back in the web app
wait for next ios beta
reinstall as a Safari in-browser page (after we remove ATHS logic)
switch to Android

不升级到 iOS11 - 祝你好运:)
在 iOS 相机中拍照，然后在 Web 应用程序中重新选择它们
等待下一个 ios 测试版
重新安装为 Safari 浏览器页面（在我们删除 ATHS 逻辑之后）
切换到安卓

File Input

文件输入

Our current production code uses a file input which has worked fine for years with iOS 10 and older. On iOS11 it works as a Safari tab but not from the home screen app. In the latter case the camera is opened and only a black screen is shown, hence it is unusable.

我们当前的生产代码使用的文件输入在 iOS 10 及更早版本上运行良好多年。在 iOS11 上，它可用作 Safari 选项卡，但不能从主屏幕应用程序运行。在后一种情况下，相机被打开并且只显示黑屏，因此无法使用。

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

WebRTC

实时时钟

Safari 11 on iOS11 offers WebRTC media capturewhich is great.

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

We can capture a camera image to canvas on a normal web page on desktop and mobile using navigator.mediaDevices.getUserMedia per the sample code linked here.

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

When we add the page to iPad or iPhone home screen, navigator.mediaDevicesbecomes undefinedand unusable.

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

采纳答案by Tomas Vitasek

We have quite similar problem. So far the only workaround we were able to do is to remove the meta tag for it to be "apple-mobile-web-app-capable" and let users to open it in Safari, where everything seems to work normally.

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

Answer 2

回答by StateOfTheArtJonas

Update: While some earlier published changelogs and postings led me to believe that Web Apps using a manifest.jsoninstead of apple-mobile-web-app-capablewould finally have access to a proper WebRTC implementation, unfortunately this is not true, as others here have pointed out and testing has confirmed. Sad face. Sorry for the inconveniences caused by this and let's hope that one lucky day in a galaxy far, far away Apple will finally give us camera access in views powered by (non-Safari) WebKit...

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

Yes, as others have mentioned, getUserMedia is only available directly in Safari but neither in a UIWebView nor WKWebView, so unfortunately your only choices are

是的，正如其他人所提到的，getUserMedia 仅可直接在 Safari 中使用，但在 UIWebView 或 WKWebView 中均不可用，因此不幸的是，您唯一的选择是

removing <meta name="apple-mobile-web-app-capable" content="yes">so your 'app' runs in a normal Safari tab, where getuserMedia is accessible
using a framework like Apache Cordova that grants you access to a device's camera in other ways.

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

Here's to hoping Apple removes this WebRTC restriction rather sooner than later...

这是希望 Apple 尽早取消此 WebRTC 限制...

Source:
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.

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

Answer 3

回答by Joachim B?ggild

Good news! The camera finally seems to be accessible from a home screen web app in the first iOS 11.3 beta.

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

I have made a repo with a few files, which demonstrate that it works:

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

https://github.com/joachimboggild/uploadtest

Steps to test:

测试步骤：

Serve these files from a website accessible from your phone
Open the index.html in iOS Safari
Add to home screen
Open app from home screen. Now the web page is open in full screen, without navigation ui.
Press the file button to select an image from camera.

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

Now the camera should work normally and not be a black screen. This demonstrates that the functionality works again.

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

I must add that I use a plain field, not getUserMedia or somesuch. I do not know if that works.

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

Answer 4

回答by jvitor83

Apparently is solved in "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

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

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

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

Answer 5

回答by aalcutt

This seems to be working again in iOS 11.4 if you are using a file input field.

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

Answer 6

回答by Domotor Zsolt

Recently I faced the same problem, the only solution I came up with was to open in the app in browser instead of the normal mode. But only on iOS!

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

The trick was to create 2 manifest.json files with different configurations.

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

The normal one for android and one for everything is Apple, manifest-ios.json, the only difference will be on the display property.

android 的正常版本和所有内容的一个是 Apple，manifest-ios.json，唯一的区别在于 display 属性。

Step 1:Add id to the manifest link tag:

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

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

Step 2:Added this script to the bottom of the body:

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

Step 3:in the manifest-ios.jsonset the display to browser

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

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

Another problem appears such as opening the app multiple times in multple tabs, sometimes.

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

But hope it helps you guys!

不过希望对大家有帮助！

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

提问by ajayel

Summary

概括

Update, April

更新，四月

Update, March

更新，三月

Solution, November

解决方案，11 月

Update, 6 December

12 月 6 日更新

Workarounds, 21 September

解决方法，9 月 21 日

File Input

文件输入

WebRTC

实时时钟

采纳答案by Tomas Vitasek

回答by StateOfTheArtJonas

回答by Joachim B?ggild

回答by jvitor83

回答by aalcutt

回答by Domotor Zsolt

相关推荐

最近更新

标签

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

提问by ajayel

Summary

概括

Update, April

更新，四月

Update, March

更新，三月

Solution, November

解决方案，11 月

Update, 6 December

12 月 6 日更新

Workarounds, 21 September

解决方法，9 月 21 日

File Input

文件输入

WebRTC

实时时钟

采纳答案by Tomas Vitasek

回答by StateOfTheArtJonas

回答by Joachim B?ggild

回答by jvitor83

回答by aalcutt

回答by Domotor Zsolt

相关推荐

Javascript 从循环遍历数组创建 li 并作为列表显示到 HTML

Javascript 如何在 Google Maps API V3 中限制平移？

Javascript 将ajax结果附加到div

Javascript 你如何在 React 中设置文档标题？

相关推荐

最近更新

标签