2022년 9월 21일

FLO를 즐기는 또 하나의 방법, 크롬캐스트!

안녕하세요. AOS개발 Unit Jasper입니다 😄

FLO에서는 사용자 미디어 경험을 증진시키고자 많은 노력을 기울이고 있습니다. 그 일환 중 하나인 구글크롬캐스트 지원을 위해 개발하면서 얻은 지식과 경험을 공유합니다.

크롬캐스트

간략하게 크롬캐스트가 무엇인지 설명드리도록 하겠습니다.

크롬캐스트는 WiFi을 통해 PC나 스마트폰에 있는 비디오 및 오디오를 크롬캐스트에 연결된 출력장치로 재생해주는 일종의 멀티미디어 어댑터입니다. HDMI 포트만 있다면 구형 TV나 모니터에서도 미디어를 스트리밍할 수 있어 2013년 첫 출시된 이후부터 OTT 서비스가 대세가 된 지금까지도 많은 이들에게 큰 사랑을 받고 있습니다.

크롬캐스트는 새로운 모델이 출시될 때마다 성능과 해상도를 꾸준히 향상시키고 있는데, 3세대는 FHD를 4세대는 4K를 지원하며 고객의 편의성을 위해 4세대부터는 CEC가 적용된 리모콘을 제공합니다. (4세대 국내 출시일은 2023년 상반기 내로 예정되어있음)

이미지 출처 : https://www.gottabemobile.com/how-to-change-google-chromecast-backdrop-images/

크롬캐스트 관련 용어

개발하며 알게된 용어들을 정리해보았습니다.

Mirroring
- 스마트폰의 화면을 거울처럼 그대로 다른 장치에 보여주는 기술

Casting
- 스마트폰에 표시할 콘텐츠를 다른 장치에 전송하는 기술
- Mirroring과 달리 다른 장치에 전송만 하므로 스마트폰에서 다른 콘텐츠를 소비할 수 있다는 장점이 있음

DLNA (Digital Living Network Alliance)
- 전 세계 홈 네트워크 사용화를 선도하기 위해 설립된 단체
- 크롬캐스트를 포함해 DLNA 가이드라인에 따라 설계된 제품들은 멀티미디어 콘텐츠를 네트워크를 통해 공유하고 재생할 수 있음

CEC (Consumer Electronics Control)
- 여러 HDMI 기기를 하나의 리모콘으로 동시에 제어할 수 있는 기술

개발 환경 구축

개발 환경을 구축하려면 Google Cast SDK Developer Console에 개발자 계정을 등록하고 Web Receiver Application과 Sender Application을 등록해야 합니다. 또한, 테스트를 위해 가지고 있는 구글 캐스트 장치도 등록하는게 좋습니다 (publish 이후부터는 모든 구글 캐스트 장치에서 접근 가능). 이 과정들을 차례대로 살펴보도록 하겠습니다.

1. 개발자 계정 등록

개발자 계정은 구글 계정으로 가입하고 5$를 지불하면 등록할 수 있습니다. 한번 등록하면 평생동안 사용할 수 있으며 크롬캐스트 개발에 필수적이므로 반드시 거쳐야하는 절차입니다. 그리고 등록된 계정은 변경할 수 없으므로 전용 계정을 만들어 관리하시는게 좋습니다.

계정이 등록되었다면 이제 Web Recevier Application을 등록할 차례입니다. Receiver를 등록하면 App ID가 발급되며 그 ID를 통해 Sender Application이 Receiver에 접근할 수 있게 됩니다.

2. Web Receiver Application

Web Receiver Application(이하 Receiver)는 크롬캐스트로 전송되는 콘텐츠를 표시하기 위해 사용되며 [HTML/Javascript/CSS]로 구성된 웹 앱을 말합니다. 종류는 3가지가 있습니다.

1) Custom Receiver

모든 부분을 커스텀할 수 있는 Receiver 타입으로 본인의 웹 서버로 호스팅해야 함

2) Styled Media Receiver

Pre-built된 Receiver 타입으로 구글이 호스팅하고 있으며 CSS가 위치한 URL을 업로드하면 logo, background, splash 등의 일부 UI 스타일을 변경할 수 있음

3) Default Media Receiver

기본 Receiver 타입으로 어떠한 커스텀도 허용하지 않으므로 사실상 사용 안함

FLO에서는 앞으로 지원할 가사 기능과 FLO만의 색을 입히기 위해서 Custom Receiver로 웹 앱을 구성했습니다. 그에 대한 예제를 보여드리겠습니다. 먼저 콘솔에서 “ADD NEW APPLICATION”을 눌러 Receiver를 추가합니다.

Receiver의 이름과 URL을 기입합니다. Guest Mode와 Google Cast For Audio는 Cast 프레임워크에서 지원하므로 체크하셔도 무방합니다. Guest Mode는 Receiver와 Sender Application이 동일한 WiFi 환경이 아니어도 주변에 Cast 기기가 있다면 캐스팅을 활성화 해주는 기능이며, Google Cast For Audio는 크롬캐스트 오디오 제품의 경우 렌더링할 디스플레이가 없기 때문에 오디오만 재생할 수 있는지를 확인하는 항목입니다. 그리고 Android TV Application은 지원하고 있다면 앱 패키지명을 넣어주시면 됩니다.

위 과정을 마쳤다면 콘솔에 등록된 것을 확인할 수 있습니다. Sender Application에 관한 정보(패키지명, 앱 이름, 설명 등)은 App ID를 눌러 입력해주시고 모두 작성하셨다면 Publish를 눌러 배포합니다.

이로써 Receiver 등록은 완료 되었습니다. Receiver 등록 과정은 Codelabs에서도 제공하고 있으니 한번은 꼭 해보시길 권해드립니다. 그리고 개발 팁을 드리자면 Sender Application 없이도 구글에서 만든 테스트 툴을 사용하면 테스트가 가능합니다. 사용 방법은 구글 문서에도 자세히 나와 있으니 참고하시면 좋을 것 같습니다. 그리고 또 하나, FLO에서는 DEV, STG, PROD 서버를 운용하고 있으며 각각의 Receiver를 구성해 관리하고 있습니다. 각 서버에 맞춰 Receiver를 관리하는게 유지보수에 용이하므로 여러분도 고려해보시길 바랍니다.

3. Sender Application

Sender Application(이하 Sender)는 크롬캐스트로의 콘텐츠 전송과 리모콘 역할을 담당합니다. 3가지 플랫폼(Android, IOS, Chrome) 중 하나를 선택해서 만들 수 있으며 Cast 프레임워크를 통해 Recevier와 상호작용 하도록 설계되어 있습니다. 그럼 Android에서 Sender를 만드는 방법을 살펴보도록 하겠습니다.

Gradle 설정

Sender에서 필요한 라이브러리를 추가합니다.

CastContext 초기화

CastContext는 Cast 프레임워크에서 제공하는 싱글턴 객체로 Cast 버튼과 세션 상태 등을 관장합니다.

CastContext 초기화는 OptionProvider를 매니페스트에 등록하고 액티비티가 시작될 때 싱글턴 객체를 호출하면 되므로 매우 간단합니다만, 두 가지를 꼭 주의하셔야 합니다 (저 처럼 늦게 알아채서 고객분들에게 큰 불편을 드리는 일이 없기를 바라고 또 바랍니다 😭. ). 첫 번째는 구글 플레이 서비스가 사용 가능한지를 확인해야 한다는 점입니다. 만약 아마존의 FireOS와 같이 구글 플레이 서비스를 사용할 수 없는 단말이라면 CastContext를 초기화하는 즉시 ANR이 발생해 앱이 중단됩니다.

그래서 반드시 isSupportChromecast()와 같은 방식으로 구글 플레이 서비스 사용 여부를 확인한 다음 초기화를 진행해주셔야 합니다. 그리고 두 번째로는 Cast API도 CastContext 초기화가 된 이후부터 호출해야 한다는 점입니다. 그렇지 않으면 ANR의 매운맛을 보게 될 수 있으니 꼭 확인하세요.

Cast 버튼 (MediaRouteButton)

Cast 프레임워크는 액티비티 라이프사이클 기반으로 Cast 기기를 검색합니다. 그리고 주변에 1대 이상의 기기가 검색되면 Cast 버튼은 활성화되고 클릭하면 기기를 선택할 수 있는 다이얼로그가 전면에 표시됩니다.

(검색으로 인한 배터리 사용은 적게 소모되므로 걱정하지 않으셔도 됩니다.)

Cast 세션 / Player 전환

Cast 기기를 선택해 세션이 시작되면 그에 대한 state가 SessionManagerListener를 통해 전달됩니다. state에 따라 Player를 자연스럽게 전환해 사용자 경험을 향상시킬 수 있습니다.

미디어 메타데이터 전송

Sender가 Receiver에 연결되면 RemoteMediaClient 인스턴스가 Cast 프레임워크에 의해 자동 생성됩니다. 이 객체는 Receiver에서 실행되는 미디어 플레이어를 제어하기 위한 클래스로 미디어 로드 및 컨트롤 / 볼륨 조정 등에 관여합니다.

메타데이터는 CastPlayer와 RemoteMediaClient에서 각각 전송해야 하며 CastPlayer는 모바일을, RemoteMediaClient는 Receiver를 대상으로 합니다.

Sender에서 필요한 작업은 모두 끝났습니다. Sender도 Receiver처럼 Codelabs에서 제공하고 있으니 꼭 한번 진행해보시길 바랍니다. 아참! “크롬캐스트 배송이 늦게 오는데 그럼 테스트는 어쩌지..?” 란 생각을 하실 수도 있습니다. 이 땐, 태블릿 등에 AirReceiver 앱을 설치하면 캐스팅 할 수 있으니 걱정하지 마세요. 다만 HLS 재생은 지원하지 않으니 이 점 참고하시면 좋을 것 같습니다.