Làm cách nào để truy cập camera trên ứng dụng web màn hình chính iOS11?

Tóm lược

Chúng tôi không thể truy cập máy ảnh từ ứng dụng web màn hình chính iOS11 (phát hành công khai) bằng cách sử dụng WebRTC hoặc nhập tệp, chi tiết bên dưới. Làm thế nào người dùng của chúng tôi có thể tiếp tục truy cập vào máy ảnh?

Chúng tôi đang phục vụ trang ứng dụng web qua https.

Cập nhật, tháng tư

Bản phát hành công khai của iOS 11.3 dường như đã khắc phục sự cố và truy cập máy ảnh đầu vào tệp đang hoạt động trở lại!

Cập nhật tháng 3

Như mọi người ở đây đã nói rằng các tài liệu của Apple khuyên rằng chức năng camera của ứng dụng web sẽ quay trở lại vào ngày 11.3 cùng với các nhân viên dịch vụ. Điều này là tốt nhưng chúng tôi chưa chắc chắn nếu chúng tôi muốn mọi người cài đặt lại cho đến khi chúng tôi có thể kiểm tra kỹ lưỡng trên 11.3GM.

Giải pháp, tháng 11

Chúng tôi đã mất hy vọng Apple muốn khắc phục điều này và tiến về phía trước. Đã sửa đổi ứng dụng web của chúng tôi để xóa chức năng "Thêm vào màn hình chính" của iOS và yêu cầu người dùng bị ảnh hưởng xóa bất kỳ biểu tượng màn hình chính nào trước đó.

Cập nhật, ngày 6 tháng 12

iOS 11.2 và iOS 11.1.2 không sửa.

Cách giải quyết, ngày 21 tháng 9

Có vẻ như chúng tôi có thể hỏi khách hàng hiện tại của ứng dụng web

• không nâng cấp lên iOS11 - chúc may mắn với điều đó :)
• chụp ảnh bằng máy ảnh iOS và sau đó chọn lại chúng trong ứng dụng web
• chờ bản beta tiếp theo
• cài đặt lại dưới dạng trang Safari trong trình duyệt (sau khi chúng tôi xóa logic ATHS)
• chuyển sang Android

Nhập tệp

Mã sản xuất hiện tại của chúng tôi sử dụng đầu vào tệp đã hoạt động tốt trong nhiều năm với iOS 10 trở lên. Trên iOS11, nó hoạt động như một tab Safari nhưng không phải từ ứng dụng màn hình chính. Trong trường hợp sau, máy ảnh được mở và chỉ hiển thị màn hình đen, do đó không thể sử dụng được.

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

WebRTC

Safari 11 trên iOS11 cung cấp khả năng chụp phương tiện WebRTC rất tuyệt vời.

Chúng tôi có thể chụp ảnh máy ảnh thành khung vẽ trên một trang web bình thường trên máy tính để bàn và thiết bị di động bằng cách sử dụng navigator.mediaDevices.getUserMedia theo mã mẫu được liên kết tại đây .

Khi chúng ta thêm trang vào màn hình chính của iPad hoặc iPhone, navigator.mediaDevicessẽ trở nên undefinedkhông sử dụng được.

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

Chúng tôi có vấn đề khá giống nhau. Cho đến nay, cách giải quyết duy nhất chúng tôi có thể làm là xóa thẻ meta để nó có khả năng "apple-mobile-web-app-app" và cho phép người dùng mở nó trong Safari, nơi mọi thứ dường như hoạt động bình thường.

Cập nhật : Mặc dù một số thay đổi và bài đăng được xuất bản trước đó khiến tôi tin rằng Ứng dụng web sử dụngmanifest.json thay vì apple-mobile-web-app-capablecuối cùng sẽ có quyền truy cập vào triển khai WebRTC thích hợp, nhưng thật không may, điều này không đúng, vì những người khác ở đây đã chỉ ra và thử nghiệm đã xác nhận. Gương mặt buồn. Xin lỗi vì sự bất tiện do điều này gây ra và hãy hy vọng rằng một ngày may mắn ở một thiên hà xa xôi, cuối cùng Apple sẽ cấp cho chúng tôi quyền truy cập máy ảnh trong các chế độ xem được cung cấp bởi (không phải Safari) WebKit ...

Có, như những người khác đã đề cập, getUserMedia chỉ có sẵn trực tiếp trong Safari nhưng không có trong UIWebView cũng như WKWebView, vì vậy thật không may, lựa chọn duy nhất của bạn là

• loại bỏ <meta name="apple-mobile-web-app-capable" content="yes"> để 'ứng dụng' của bạn chạy trong tab Safari bình thường, nơi có thể truy cập getuserMedia
• sử dụng một khung như Apache Cordova cho phép bạn truy cập vào máy ảnh của thiết bị theo những cách khác.

Đây là hy vọng Apple loại bỏ hạn chế WebRTC này sớm hơn ...

Nguồn:
Đối với các nhà phát triển sử dụng WebKit trong ứng dụng của họ, RTCPeerConnection và RTCDataChannel có sẵn trong mọi chế độ xem web, nhưng quyền truy cập vào máy ảnh và micrô hiện bị giới hạn ở Safari.

Tin tốt! Máy ảnh cuối cùng dường như có thể truy cập được từ một ứng dụng web màn hình chính trong phiên bản iOS 11.3 beta đầu tiên.

Tôi đã thực hiện một repo với một vài tệp, điều đó chứng tỏ rằng nó hoạt động:

https://github.com/joachimboggild/uploadtest

Các bước để kiểm tra:

1. Phục vụ các tệp này từ một trang web có thể truy cập từ điện thoại của bạn
2. Mở index.html trong iOS Safari
3. Thêm vào màn hình chính
4. Mở ứng dụng từ màn hình chính. Bây giờ trang web đang mở ở chế độ toàn màn hình, không có điều hướng ui.
5. Nhấn nút tập tin để chọn một hình ảnh từ máy ảnh.

Bây giờ máy ảnh nên hoạt động bình thường và không phải là màn hình đen. Điều này chứng tỏ rằng các chức năng hoạt động trở lại.

Tôi phải thêm rằng tôi sử dụng một trường đơn giản, không phải getUserMedia hoặc somesuch. Tôi không biết nếu nó hoạt động.

Rõ ràng đã được giải quyết trong "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Cập nhật 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

Điều này dường như hoạt động trở lại trong iOS 11.4 nếu bạn đang sử dụng trường nhập tệp.

Gần đây tôi gặp phải vấn đề tương tự, giải pháp duy nhất tôi nghĩ ra là mở ứng dụng trong trình duyệt thay vì chế độ thông thường. Nhưng chỉ có trên iOS!

Thủ thuật là tạo 2 tệp manifest.json với các cấu hình khác nhau.

Một cái bình thường cho android và một cái cho mọi thứ là Apple, manifest-ios.json, sự khác biệt duy nhất sẽ là trên thuộc tính hiển thị.

Bước 1: Thêm id vào thẻ liên kết tệp kê khai:

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

Bước 2: Đã thêm tập lệnh này vào dưới cùng của cơ thể:

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

Bước 3: trong tệp kê khai-ios.json đặt màn hình thành trình duyệt

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

Đôi khi, một vấn đề khác xuất hiện như mở ứng dụng nhiều lần trong nhiều tab.

Nhưng hy vọng nó sẽ giúp các bạn!