[html] iOS11 홈 화면 웹 앱에서 카메라에 액세스하는 방법은 무엇입니까?

요약

WebRTC 또는 파일 입력을 사용하여 iOS11 (공개 릴리스) 홈 화면 웹 앱에서 카메라에 액세스 할 수 없습니다 (아래 세부 정보 참조). 사용자가 어떻게 카메라에 계속 액세스 할 수 있습니까?

우리는 https를 통해 웹 앱 페이지를 제공하고 있습니다.

4 월 업데이트

iOS 11.3의 공개 릴리스에서 문제가 해결 된 것으로 보이며 파일 입력 카메라 액세스가 다시 작동합니다!

3 월 업데이트

여기 사람들이 말한 것처럼 Apple 문서는 11.3에서 서비스 작업자와 함께 웹 앱 카메라 기능이 다시 작동한다고 조언합니다. 이것은 좋지만 11.3GM을 철저히 테스트 할 때까지 모든 사람이 다시 설치하기를 원하는지 아직 확실하지 않습니다.

솔루션, 11 월

우리는 애플이이 문제를 해결하고 싶다는 희망을 잃어 버렸다. iOS “홈 화면에 추가”기능을 제거하도록 웹 앱을 수정하고 영향을받는 사용자에게 이전 홈 화면 아이콘을 제거하도록 요청했습니다.

12 월 6 일 업데이트

iOS 11.2 및 iOS 11.1.2는 수정되지 않습니다.

해결 방법, 9 월 21 일

웹앱의 기존 고객에게 요청할 수있는 것 같습니다

• iOS11로 업그레이드하지 마십시오-행운을 빕니다 🙂
• iOS 카메라에서 사진을 찍은 다음 웹 앱에서 다시 선택하십시오.
• 다음 iOS 베타를 기다립니다
• ATHS 로직을 제거한 후 Safari 브라우저 내 페이지로 다시 설치
• 안드로이드로 전환

파일 입력

현재 프로덕션 코드는 파일 입력을 사용하여 iOS 10 이상에서 수년간 잘 작동했습니다. iOS11에서는 Safari 탭으로 작동하지만 홈 화면 앱에서는 작동하지 않습니다. 후자의 경우 카메라가 열리고 검은 색 화면 만 표시되므로 사용할 수 없습니다.

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

WebRTC

iOS11의 Safari 11 은 훌륭한 WebRTC 미디어 캡처 를 제공합니다 .

여기에 링크 된 샘플 코드 마다 navigator.mediaDevices.getUserMedia를 사용하여 데스크탑 및 모바일의 일반 웹 페이지에서 카메라 이미지를 캔버스로 캡처 할 수 있습니다 .

우리가 아이 패드 또는 아이폰 홈 화면에 페이지를 추가하면 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;

답변

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

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