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


131

요약

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;

5
나는 그들이 그것을 고치기를 바라고 있지만, 이것은 Safari의 UX를 저하시켜 개발자를 앱 스토어로 밀어 넣는 Apple의 또 다른 사례 일 수 있습니다.
perfect_element

3
점진적인 웹 응용 프로그램 개발을 배우려고하는데 Android 및 iOS에서 앱을 테스트하는 동안이 문제가 발생했습니다. 브라우저에서 응용 프로그램을 탐색해도 문제는 없지만 사파리에서 "홈 화면에 저장"하고 앱처럼 사용하려고하면 카메라에 액세스하려고 할 때 검은 화면이 나타납니다.
tutley

2
iOS :
11.2.1-

2
iOS :
11.2.2-

3
iOS 11.4.1은 누구에게도 행운을 빕니다.
Amah

답변:


25

비슷한 문제가 있습니다. 지금까지 우리가 할 수있는 유일한 해결 방법은 메타 태그를 "apple-mobile-web-app-appable"이되도록 메타 태그를 제거하고 사용자가 Safari에서 모든 태그가 정상적으로 작동하는 것처럼 열 수있게하는 것입니다.


24

업데이트 : 이전에 게시 된 일부 변경 로그 및 게시로 인해 manifest.json대신 대신 사용하는 Web Apps apple-mobile-web-app-capable가 적절한 WebRTC 구현에 액세스 할 수 있다고 믿었지만 불행히도 다른 사람들이 지적하고 테스트 한 것처럼 사실이 아닙니다. 슬픈 얼굴. 이로 인해 불편을 끼쳐 드려 죄송합니다. 멀리 떨어진 은하계에서 운이 좋은 하루는 Apple이 (사파리가 아닌) WebKit이 제공하는 뷰에서 마침내 카메라에 액세스 할 수 있기를 바랍니다.

예, 다른 사람들이 언급했듯이 getUserMedia는 Safari에서만 직접 사용할 수 있지만 UIWebView 또는 WKWebView에서는 사용할 수 없으므로 불행히도 유일한 선택은

  • <meta name="apple-mobile-web-app-capable" content="yes">getuserMedia에 액세스 할 수있는 일반 Safari 탭에서 '앱'이 실행되도록 제거
  • Apache Cordova와 같은 프레임 워크를 사용하여 다른 방법으로 장치의 카메라에 액세스 할 수 있습니다.

Apple이 WebRTC 제한을 나중에보다 빨리 제거하기를 희망합니다.

출처 :
앱에서 WebKit을 사용하는 개발자의 경우 RTCPeerConnection 및 RTCDataChannel을 모든 웹보기에서 사용할 수 있지만 카메라 및 마이크에 대한 액세스는 현재 Safari로 제한됩니다.


업데이트가 올바르지 않은 것 같습니다. 아이폰 OS 11.3 베타에서 getUserMediawebkitGetUserMedia모두 사용하는 경우 정의되지 않은 있습니다<meta name="apple-mobile-web-app-capable" content="yes">
RO-야만적

@ ro-savage 최종 릴리스가 나왔지만 여전히 작동하지 않습니다
Owen

4
safari는 새로운 것입니다. 사과하십시오. 사용자 미디어 데이터에 액세스 할 수있는 권한을 부여하십시오
Pablo Cegarra

15

좋은 소식! 카메라는 마침내 첫 iOS 11.3 베타의 홈 화면 웹 앱에서 액세스 할 수있는 것으로 보입니다.

몇 가지 파일로 리포지토리를 만들었습니다.

https://github.com/joachimboggild/uploadtest

테스트 단계 :

  1. 휴대 전화에서 액세스 할 수있는 웹 사이트에서 이러한 파일을 제공하십시오.
  2. iOS Safari에서 index.html을여십시오
  3. 홈 화면에 추가
  4. 홈 화면에서 앱을 엽니 다. 이제 탐색 UI없이 웹 페이지가 전체 화면으로 열립니다.
  5. 파일 버튼을 눌러 카메라에서 이미지를 선택합니다.

이제 카메라가 정상적으로 작동하고 검은 색 화면이 아니어야합니다. 기능이 다시 작동 함을 보여줍니다.

getUserMedia 등이 아닌 일반 필드를 사용하도록 추가해야합니다. 그게 효과가 있는지 모르겠습니다.


<meta name = "apple-mobile-web-app-capable"content = "yes">로 실행되도록 어떻게 관리 했습니까?
Alexander

1
입력 태그와 함께 일반 양식을 사용하여 작동했습니다.
Joachim Bøggild

@ JoachimBøggild iOS 11.3+ 기기가 PWA에서 카메라를 열 수 있습니까? 좋은 소식을 주셔서 감사합니다.
jegadeesh

그렇습니다. posmo.com에서 실행 중입니다. 설정을 기억할 수 없습니다. 그래도 매니페스트 파일이 포함됩니다.
Joachim Bøggild

1
@ JoachimBøggild이 매니페스트 / 비디오 태그를 공유 할 수 있습니다. 내 코드를 테스트했으며 사파리에서만 작동합니다. 홈 화면 앱에는 없습니다.
5 월


1

파일 입력 필드를 사용하는 경우 iOS 11.4에서 다시 작동하는 것 같습니다.


1
iOS 11.4가 있으며 홈 화면 앱에서 작동하지 않습니다. 작동시키기 위해 무엇을하고 있습니까?
Aron

변경하지 않았습니다. 최신 버전으로 업데이트하고 다시 작동하기 시작했습니다.
aalcutt

1
확인 11.4. 사파리에서 작동-홈 화면 앱으로 작동하지 않음
May

iPad에서 iOS 11.4.1을 사용하고 있으며 작동합니다. 어떤 장치를 사용하고 있습니까?
aalcutt

1
파일 입력을 사용할 수없는 이유는 무엇입니까? 다시 작동합니다.
aalcutt

0

최근에 나는 같은 문제에 직면했다. 내가 찾은 유일한 해결책은 일반 모드 대신 브라우저에서 앱을 여는 것이었다. 그러나 iOS에서만!

비결은 구성이 다른 2 개의 manifest.json 파일을 만드는 것입니다.

안드로이드와 모든 것에 대한 일반적인 것은 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 단계 : 에서 매니페스트-ios.json는 브라우저에 표시를 설정

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

때때로 여러 탭에서 앱을 여러 번 여는 것과 같은 다른 문제가 나타납니다.

그러나 그것이 당신을 도울 수 있기를 바랍니다!

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.