환경
-
Next.js 웹앱(App Router), 톡디지털카드의 “QR 스캔” 버튼을 통해 카카오톡 인앱 브라우저로 진입하는 페이지입니다.
-
페이지 안에서
navigator.mediaDevices.getUserMedia()로 카메라를 켜고,jsQR로 QR을 디코딩하는 순수 웹 구현입니다 (별도 SDK/네이티브 브릿지 없이 표준 웹 API만 사용). -
테스트: iOS는 정상적으로 카메라가 켜지고 스캔까지 완료됩니다. 안드로이드에서만 문제가 재현됩니다.
증상
카메라 권한을 명확히 "허용"으로 선택해도, getUserMedia() 호출이 매번 NotAllowedError를 던집니다. 브라우저 자체의 권한 프롬프트가 아예 안 뜨는 게 아니라, 프롬프트에서 허용을 선택한 이후에도 동일하게 실패합니다.
이미 확인/시도해본 것들
-
Permissions-Policy헤더 확인 — 저희 쪽에서camera=()로 카메라를 전역 차단하고 있던 걸 발견해서 해당 경로에만camera=(self)로 예외 처리했습니다. curl로 응답 헤더가 정상 적용된 것까지 확인했습니다. (이게 원인이 아님을 확인) -
재시도 로직 —
getUserMedia()실패 시 0.5초 간격으로 최대 3회 재시도하도록 구현했으나 효과 없음. -
페이지 새로고침 — devtalk의 유사 사례(카카오톡 인앱 브라우저 — 앱 카메라 권한 최초 허용 직후에도 웹 카메라 미동작 및 deviceId·label 비어 있음)에서 카카오 측이 "새로고침하면 해결된다"고 안내한 걸 보고 자동 새로고침(세션당 1회)도 추가했으나 효과 없음. (다만 이 사례는 "에러 없이 계속 대기"하는 증상이라 저희가 겪는 "명시적 NotAllowedError"와는 증상이 다를 수 있습니다.)
-
브라우저 자체 차단 여부 확인 — 사용자가 이전에 이 사이트의 카메라를 수동으로 "차단"한 적 없음을 확인.
-
카카오톡 밖에서도 재현 여부 확인 — 같은 기기의 안드로이드 Chrome에서 동일 URL을 직접 열어도 동일하게 재현됨. (카카오톡 인앱 브라우저만의 문제가 아닐 가능성이 있어, 인앱 환경에서의 권한 처리 방식에 특이사항이 있는지 확인이 필요한 상황입니다.)