如何在 iOS11 主屏幕 Web 應用程序上訪問相機？

Question

概括

我們無法使用 WebRTC 或文件輸入從 iOS11（公開發布）主屏幕 Web 應用程序訪問相機，詳情如下。 請問我們的用戶如何繼續訪問相機？

我們通過 https 為 Web 應用程序頁面提供服務。

更新，四月

iOS 11.3 的公開版本似乎已經解決了這個問題，並且文件輸入相機訪問再次工作！

更新，三月

正如這里的人們所說，Apple 文檔建議網絡應用程序的攝像頭功能與服務人員一起在 11.3 中返回。 這很好，但我們還不確定是否要讓所有人重新安裝，直到我們可以在 11.3GM 上進行徹底測試。

解決方案，11 月

我們對蘋果想要解決這個問題失去了希望並繼續前進。 修改了我們的網絡應用程序以刪除 iOS 的“添加到主屏幕”功能，並要求受影響的用戶刪除任何以前的主屏幕圖標。

12 月 6 日更新

iOS 11.2 和 iOS 11.1.2 無法修復。

解決方法，9 月 21 日

似乎我們可以詢問網絡應用程序的現有客戶

• 不升級到 iOS11 - 祝你好運:)
• 在 iOS 相機中拍照，然后在 Web 應用程序中重新選擇它們
• 等待下一個 ios 測試版
• 重新安裝為 Safari 瀏覽器頁面（在我們刪除 ATHS 邏輯之后）
• 切換到安卓

文件輸入

我們當前的生產代碼使用的文件輸入在 iOS 10 及更早版本上運行良好多年。 在 iOS11 上，它可用作 Safari 選項卡，但不能從主屏幕應用程序運行。 在后一種情況下，相機被打開並且只顯示黑屏，因此無法使用。

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

實時時鍾

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;

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">以便您的“應用程序”在普通的 Safari 選項卡中運行，在那里可以訪問 getuserMedia
• 使用像 Apache Cordova 這樣的框架允許您以其他方式訪問設備的相機。

這是希望 Apple 盡早取消此 WebRTC 限制...

來源：
對於在其應用程序中使用 WebKit 的開發人員，RTCPeerConnection 和 RTCDataChannel 可在任何 Web 視圖中使用，但對攝像頭和麥克風的訪問目前僅限於 Safari。

Answer 2

我們有非常相似的問題。 到目前為止，我們能夠做的唯一解決方法是刪除元標記，使其成為“apple-mobile-web-app-capable”，並讓用戶在 Safari 中打開它，在那里一切似乎都正常工作。

Answer 3

好消息！ 在第一個 iOS 11.3 測試版中，相機似乎終於可以從主屏幕網絡應用程序訪問了。

我用幾個文件制作了一個 repo，這證明它有效：

https://github.com/joachimboggild/uploadtest

測試步驟：

1. 從可通過手機訪問的網站提供這些文件
2. 在 iOS Safari 中打開 index.html
3. 添加到主屏幕
4. 從主屏幕打開應用程序。 現在網頁全屏打開，沒有導航ui。
5. 按文件按鈕從相機中選擇圖像。

現在相機應該可以正常工作，而不是黑屏。 這表明該功能再次起作用。

我必須補充一點，我使用的是普通字段，而不是 getUserMedia 或類似的字段。 我不知道這是否有效。

Answer 4

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

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

Answer 5

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

Answer 6

最近我遇到了同樣的問題，我想出的唯一解決方案是在瀏覽器中的應用程序中打開而不是正常模式。 但僅限於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
    ...
}

出現另一個問題，例如有時在多個選項卡中多次打開應用程序。

不過希望對大家有幫助！