크롬캐스트 앱을 개발하자! 네번째 시간

안녕하세요.

네번째 시간입니다.

이번 시간부터 본격적인 크롬캐스트(ChromeCast) 개발을 진행하겠습니다.

CastCompanionLibrary(CCL)

1. Initializing VideoCastManager

가장 먼저 해야 할 일은 VideoCastManager의 인스턴스를 초기화 하는 것입니다.

 CCL의 여러 기능을 클라이언트의 필요에 맞게 사용 가능하게 하거나 구성 할 수 있습니다.

이러한 구성 매개 변수는 CastConfiguration 클래스로 설정할 수 있습니다.

이 클래스를 빌드하려면 Builder 패턴을 사용하고 필요한 모든 구성 매개 변수를 설정하면 됩니다.

다음은 샘플코드입니다.

/**
 * CCL의 여러기능을 클라이언트의 필요에 맞게 사용 가능하게 하거나 구성 할 수 있으며
 * 이러한 구성매개변수는 CastConfiguration 클래스에 캡쳐됩니다. 클라이언트 라이브러리를 초기화하기 전에 이 클래스의 인스턴스를
 * 빌드하고 구성해야합니다.
 */
private CastConfiguration initCastConfigurationoptions(){
    CastConfiguration castConfiguration = new CastConfiguration.Builder(CommonApp.APPLICATION_ID)
            .enableAutoReconnect()
            .enableCaptionManagement()
            .enableDebug()
            .enableLockScreen()
            .enableWifiReconnection()
            .enableNotification()
            .addNotificationAction(CastConfiguration.NOTIFICATION_ACTION_PLAY_PAUSE, true)
            .addNotificationAction(CastConfiguration.NOTIFICATION_ACTION_DISCONNECT, true)
            .build();

    return castConfiguration;
}

위의 Configuration 객체는 CCL에게 여러가지 기능 (자동 재 연결, 캡션 관리, 디버깅, 잠금 화면, 컨트롤러, 사용자 정의, MediaRouteDialogFactory, WiFi 재 연결 및 알림서비스)

를 사용하도록 지시하며 CCL에게 알림에서 사용할 수 있는 작업을 알려줍니다.

더 많은 기능과 매개 변수를 이곳에서 구성하실 수 있으며, CastConfiguration 클래스의 JavaDoc을 참조하시면 전체 목록을 확인할 수 있습니다.

/**
 * VideoCastManager 설정을 진행합니다.
 */
private void initVideoCastManager(){
    VideoCastManager.initialize(this, initCastConfigurationoptions());
    mVideoCastManager = VideoCastManager.getInstance();
}

구성이 끝나고 나면 VideoCastManager를 Initialize 해주고 인스턴스를 얻을 수 있습니다.

 

2. Adding Cast Button to Action Bar/Toolbar

VideoCastManager를 설정 한 후 다음 단계에서는 Action Bar 또는 Toolbar에 Cast 버튼을 넣는 것입니다.

저는 여기서 Action Bar나 Toolbar에 Cast 버튼을 넣지 않고 레이아웃에 버튼으로 별도로 분리시키고 진행을 하였습니다.

<android.support.v7.app.MediaRouteButton
    android:id="@+id/media_route_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:mediaRouteTypes="user"
    android:visibility="gone" />

자신의 레이아웃에 위의 XML 코드를 추가하세요.

이것은 앞으로 Cast를 연결할때 사용할 MediaRouteButton 입니다.

mVideoCastManager.addMediaRouterButton(mMediaRouteButton);

XML을 추가하셨다면 위와 같이 VideoCastManager를 통해서 MediaRouteButton을 추가해주세요.

그리고 아래의 코드들을 추가합니다.

@Override
protected void onResume() {
    super.onResume();
    mVideoCastManager.incrementUiCounter();
}

@Override
protected void onPause() {
    super.onPause();
    mVideoCastManager.decrementUiCounter();
}

onResume, onPause에 위의 코드를 추가해주십시오.

현재 연결된 Cast가 있는지 여부에 따라 Cast 버튼을 Visible 해주어야 합니다.

연결된 Cast가 존재하는지에 대한 Callback을 받기 위해 VideoCastManager에 Callback을 Hook 해야합니다.

/**
 * 네트워크에 연결된 캐스트 장치의 수가 추가 되거나 사라졌을때 콜백됩니다.
 */
VideoCastConsumerImpl videoCastConsumer = new VideoCastConsumerImpl(){
    @Override
    public void onCastAvailabilityChanged(boolean castPresent) {
        Log.d(TAG, "onCastAvailabilltyChanged : " + castPresent);

        mMediaRouteButton.setVisibility(castPresent? View.VISIBLE:View.INVISIBLE); //연결된 캐스트 장치가 있을 경우 MediaRouteButton을 Visible 합니다.
        showOverlay();
    }

위와 같은 ConsumerImpl을 구현하여 Callback을 만들어줍니다.

해당 콜백을 등록 해줍니다.

mVideoCastManager.addVideoCastConsumer(videoCastConsumer);

3. 새 사용자에게 Cast를 소개합시다.

앱이 Cast를 지원하는 것을 사용자에게 알리려면 사용자가 앱을 처음 열 때 Cast 버튼을 강조해 주는 것이 좋습니다.

이를 위해서 CCL은 최초 앱에 Cast 버튼이 나타날 때 쉽게 소개 레이어를 표시 할 수 있는 오버레이보기를 제공합니다.

이를 처리 하려면 Callback onCastAvailabilityChanged()가 캐스트 아이콘이 표시 될 때 Callback을 받을 수 있게 구성을 하고,

그런 다음 IntroductoryOverlay의 인스턴스를 설정하여 Cast 버튼을 강조하여 표시하도록 오버레이를 표시합니다.

/**
 * 크롬캐스트를 처음 들어왔을 경우 IntroductoryOverlay 객체를 생성하여 설명을 표시합니다.
 * 크롬캐스트 MediaRouteButton의 정확한 위치에 Overlay를 생성하려면 아래와 같이 Handler를 사용하여 MediaRouteButton이 화면에 그려지기 위한
 * 시간의 딜레이를 주어야 합니다.
 * 그렇지 않으면 정확한 MediaRouteButton의 위치를 찾을 수 없습니다.
 * 그리고 MediaRouteButton의 Visible 상태를 체크하여 MediaRouteButton이 Visible 상태일 경우에만 Overlay를 올립니다.
 */
private void showOverlay(){
    if(mOverlay != null){
        mOverlay.remove();
    }

    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            if(mMediaRouteButton.getVisibility() == View.VISIBLE){
                mOverlay = new IntroductoryOverlay.Builder(MainActivity.this)
                        .setMediaRouteButton(mMediaRouteButton)
                        .setTitleText("크롬캐스트로 영화를 전송할 수 있습니다.")
                        .setSingleTime()
                        .setOnDismissed(new IntroductoryOverlay.OnOverlayDismissedListener() {
                            @Override
                            public void onOverlayDismissed() {
                                mOverlay = null;
                            }
                        })
                        .build();
                mOverlay.show();
            }
        }
    }, 2000);
}

위의 코드로 Cast 버튼이 활성화가 되었을때 Cast 버튼을 강조해 줄 수 있는 오버레이를 표시할 수 있습니다.

이상으로 네번째 시간을 마치겠습니다.

다음시간에는 이어서 MiniController를 추가하고 잠금 화면 및 컨트롤러 볼륨을 추가해보도록 하겠습니다.

다섯번째 시간에 뵐께요!