[React.js] 웹 카메라 제어 : http에서 카메라 접근 안돼 ㅠ_ㅠ

1. "No camera device accessible..."

react-camera-pro 라이브러리의 디폴트 에러 메시지에 객체는 아래와 같다.

 {
    noCameraAccessible: 'No camera device accessible. Please connect your camera or try a different browser.',
    permissionDenied: 'Permission denied. Please refresh and give camera permission.',
    switchCamera:
    'It is not possible to switch camera to different one because there is only one video device accessible.',
    canvas: 'Canvas is not supported.'
  }

노트북에서 로컬로 프로젝트를 구동하여 스마트폰에서 동일 네트워크의 IP주소와 포트로 접근하였다(노트북과 스마트폰이 동일 와이파이를 사용하고 있으면 스마트폰의 브라우저에서 IP주소로 노트북에서 구동 중인 프로젝트에 접근 가능하다). 구동한 웹 프로젝트에는 잘 접근되었는데 카메라가 작동하는 대신 위 객체의 "noCameraAccessible"의 값만 렌더링 되어 있었다!

 

2. HTTP에서는 카메라 제어 불가!

구글링해 본 결과 HTTP에서는 카메라 제어나 휴대폰의 VR기울기 센서를 제어할 수 없도록 변경되었다고 한다. 따라서 HTTPS에서만 카메라나 VR기울기센서를 사용할 수 있다. react-camera-pro의 데모 URL도 HTTPS임을 확인할 수 있다.