Iframe 에서 getUserMedia 가져오기

Janus 미디어 서버를 활용하여 화상 솔루션을 만드는 중에 난관에 부딪혔다.

 

 

진행중인 페이지를 레이어팝업 형태로 하여, 보다 유저 친화적(?)인 UI 로 하려다보니

Cross Origin 정책으로 인하여 getUserMedia 를 불러올 수 없었다.

 

오랜 검색, 또 검색을 통해 삽질을 몇 번 하다가..

아래와 같은 해결책을 찾게 되어 기록으로 남기고자 한다.

 

* 해결법

<iframe src='http://localhost' allow='camera *;microphone *'></iframe>

위와 같이 iframe 에 allow 옵션을 주어 카메라와 오디오에 접근을 허용하면 언제 그랬냐는 듯 getUserMedia 를 사용할 수 있게 된다.

보안적인 측면에서 과연 이렇게 제공이 되는게 맞을까 싶지만서도...

서비스 제공할 때는 사전에 해당 내용을 잘 명시해야 될 듯 하다.

 

* 관련 설명

<iframe src="" allow="feature_name allow_list"></iframe>

 

allow_list 는 아래 중 하나의 값을 가질 수 있다고 한다.

• *: 위에서 사용 된 기능은 최상위 브라우징 컨텍스트 및 중첩 컨텍스트 (iframe)에서 허용됩니다.
• 'self':이 기능은 최상위 브라우징 컨텍스트 및 동일 출처 중첩 컨텍스트 에서 허용 됩니다 . 이 기능은 중첩 된 브라우징 컨텍스트에 대한 출처 간 문서에서 허용되지 않습니다.
• 'none':이 기능은 최상위 및 중첩 된 브라우징 컨텍스트에서 전혀 허용되지 않습니다.
• <origin(s)>:이 기능은 특정 출처에서 허용됩니다. 예 : https://mywebsite.com