WATCHA의 웹 프론트엔드 개발자 Angie입니다.
지난 포스트에서 왓챠의 같이 보기 서비스, 왓챠파티 전반적인 개발기를 다루어보았는데요.
오늘은 왓챠파티에서 새롭게 선보일 음성 코멘터리(Commentary: 파티 호스트가 작품에 대해 이야기하고 참여자들은 호스트의 음성을 들을 수 있는 기능, 이하 코멘터리)를 개발하며 마주쳤던 브라우저 내 미디어 권한과 관련된 팁을 정리해보려고 합니다.
한 번쯤은 마주쳤을 웹 브라우저의 질문
웹사이트 서핑을 하다 보면 브라우저가 어떤 권한을 요청할 때가 있습니다. 비대면 회의 방식으로 인해 예전보다 더 많은 사람들이 사용하고 있는 Google Meet과 같은 서비스에 처음 접근하게 되면 브라우저는 해당 서비스에서 사용하게 될 미디어와 관련된 권한을 묻습니다. 때에 따라 그 권한은 마이크, 비디오 혹은 둘 다로 달라집니다. 사용자는 이 질문에 권한 허용, 차단 혹은 결정을 미루는 행동을 취할 수 있습니다.
또, 웹 브라우저의 질문에 응한 후에도 언제든지 브라우저 설정에 접근하여 기존 권한 설정을 변경할 수도 있습니다.
브라우저별 권한 설정 변경 경로는 아래와 같습니다.
- 크롬: chrome://settings/content permission 영역에서 변경
- 파이어폭스: about:preferences#privacy permissions 영역에서 변경
- 사파리: mac safari의 preferences 카메라, 마이크 권한에 대해서 사이트별로 변경
이렇듯 사용자는 서비스에서 특정 미디어를 활용하고자 권한을 상시로 설정할 수 있습니다.
이제 남은 문제는 특정 미디어 권한에 대해 사용자가 어떤 결정을 내릴지에 따라 서비스에서 적절한 대응을 해주는 것입니다.
권한에 대한 결정이 변경되어도 서비스 차원의 적절한 대응도 필요합니다.
이번에 새롭게 소개된 왓챠파티 코멘터리 기능도 브라우저에서 왓챠 유저에게 마이크 사용 권한을 허용할 것인지 묻고 있습니다.
이때 왓챠 웹 애플리케이션에서 유저의 결정(권한 허용, 차단 혹은 미결정)에 따라 코멘터리 참여에 대한 안내를 달리할 수 있도록 대응해야 했습니다.
Web API로 미디어 권한 컨트롤하기
그렇다면 애플리케이션 단에서 미디어 권한이 설정되거나 변경되는 것을 어떻게 파악하고 대응할 수 있을까요?
다양한 방법이 있겠지만 오늘은 Web API를 통해 위에서 언급한 미디어 권한에 대한 2가지 처리 방법을 간단히 다루어 보겠습니다.
Permission API
현재 컨텍스트 기준으로 브라우저 내 권한과 관련된 쿼리를 보낼 수 있는 API로, 사용자가 특정 권한을 허용했는지 혹 거절했는지 확인할 수 있습니다.
이를 위해서 Permission.query 라는 메소드를 사용하면 됩니다.Permission.query의 전달인자로 조회하고자 하는 permission 종류를 지정하여 호출하면 PermissionStatus인터페이스를 담아 promise를 반환합니다.
이 인터페이스의 속성 값인state가 가리키는 granted, denided, prompt 상태를 통해 해당 권한을 받은 상태인지 파악할 수 있습니다.
또 이렇게 호출한 PermissionStatus 에 onchange 이벤트 핸들러를 추가하여 특정 권한의 상태 변화를 추적하고 대응할 수 있습니다.
매우 직관적이고 간편한 방법이지만 Permission API는 IE나 safari 브라우저에서 사용할 수 없습니다. 따라서 서비스에서 지원하는 브라우저 종류를 감안하여 사용 여부를 결정해야 합니다.
MediaDevices API
Web API에서 제공하는 이 인터페이스를 통해 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치에 대해 접근할 수 있습니다.
MediaDevices.getUserMedia 메소드를 사용해 미디어 권한에 대한 조작을 할 수 있습니다. 해당 메소드의 파라미터로 audio와 video에 대한 설정을 객체로 넘기면 권한 유무에 따라 해당 미디어에 대한 MediaStream이나 NotFoundError를 promise에 담아 반환합니다. 이렇게 반환 결과를 보고 즉시 해당 미디어에 대한 권한이 존재하는지 존재하지 않는지 알 수 있습니다.
위에서 다룬 Permission.query 메소드와 달리 조회하고자 하는 미디어에 대한 자세한 설정을 파라미터에 넣을 수 있는 것도 특징입니다.
참고로 이렇게 조회한 Mediastream은 getAudioTrack(), getVideoTrack() 등 메소드 활용해 개별적으로 오디오나 비디오 트랙을 관리할 수 있습니다.
Permission API에서 PermissionStatus 인터페이스에 onChange 이벤트를 주목했던 것처럼 MediaStream 인터페이스의 active , inactive 이벤트에 핸들러를 추가해 해당 미디어에 대한 상태 변화를 추적하고 대응할 수도 있습니다.
이 방법 또한 안타깝게도 IE에서는 지원하지 않고 있으므로 이를 숙지하고 사용할 필요가 있습니다.
사용 권한을 얻은 미디어 기기가 변경될 때
앞서 다룬 두 가지 Web API 인터페이스로 미디어 사용 권한을 관찰하여 대응할 수 있었습니다.
그렇다면 사용자가 어떤 기기를 사용해 MediaStream을 만들고(혹은 받고) 있는지 알 수 있을까요? 또 기기를 변경할 때 어떻게 이를 감지하고 대응할 수 있을까요?
이 또한 MediaDevices의 enumerateDevices 라는 메소드와 device change event 를 활용해 대응할 수 있습니다.
enumerateDevices
이 메소드를 사용하여 접근 가능한 미디어 입출력 기기 리스트를 확인할 수 있습니다. 기기 정보를 담은 MediaDeviceInfo를 promise로 반환받아 사용자의 기기 사용 현황을 파악하거나 기억해 둘 수 있습니다.
사용자의 기기는 Audio input, Video input, Audio output, Video output 형태로 구분하여 확인할 수 있습니다.
device change event
사용자 단에서 기기 변경이 발생했을 때 MediaDevices의 deviceChange 이벤트가 발생합니다. 해당 이벤트에 대응하는 이벤트 핸들러를 작성하여 사용자의 기기 변경 시 적절한 대응을 할 수 있습니다.
마치며
웹 브라우저에서 미디어 사용 권한을 파악하고 대응하는 몇 가지 방법과 기기 변경과 관련된 간단한 팁을 정리해 보았습니다.
같이 보는 서비스 왓챠파티가 같이 듣고 보는 서비스로 발전하는 과정에서 미디어를 다루는 크고 작은 방법들을 습득하고 정리해 간 것들이라 개인적으로는 더 기억에 남을 것 같습니다.
그럼 왓챠 프로덕트를 통해 더 많은 배움을 얻은 후 다시 한번 글쓴이로 찾아오겠습니다.
읽어볼 거리
