Chromecast対応のAndroid開発

1. Chromecastとは何ですか、またどのように機能しますか？

Chromecastは、ユーザーがモバイルデバイスからテレビにメディアコンテンツを転送できるようにするガジェットです。



Time's 2013によれば、35ドル相当のデバイスが2013年7月24日に発表され、今年のガジェットに選ばれました。まず、メディアコンテンツを電話、タブレット、ラップトップからテレビなどの大画面デバイスに転送する技術です。





発表の直後、Chromacast SDKはベータテスト中であり、その実用性は制限されていました。 しかし、2014年2月3日に、GoogleはSDKの最終バージョンをリリースしました。



現在、Chromecastをサポートするアプリケーションの数は急速に増加しているため、Android用のChromecast対応アプリケーションの開発経験を説明することにしました。 この記事では、Chromecast対応アプリケーションの開発のトピックについて説明します。以下に、開発者向けのメモ、コメント、推奨事項、およびアプリケーションの例とソースコードを示します。

どのように機能しますか？

Chromecastデバイスは、特別なWebアプリケーション（「レシーバー」アプリケーションと呼ばれる）を表示できるChromeブラウザーの特別なバージョンを実行します。 これらのアプリケーションの当面の目標は、メディアコンテンツをエンドユーザーに表示することです。 ただし、Chromecastデバイスには直接制御レバーがないため、明らかに外部コントロールが必要です。前述のように、モバイルアプリケーションまたはWebアプリケーション（「送信者」アプリケーションと呼ばれる）のいずれかです。



したがって、Senderアプリケーションを使用して、Chromecastデバイスを制御できます。 しかし、これはどのように発生しますか？



これは、共有WiFiネットワークを介して行うことができます-つまり 送信側アプリケーションと受信側アプリケーションの両方を単一のWiFiネットワークに接続する必要があります。 このチャネルは双方向であるため、たとえば「送信​​者」アプリケーションはメディアコンテンツを再生するためのコマンドを発行できますが、「受信者」アプリケーションは再生状態と位置を「送信者」アプリケーションに通知します。

2.アプリケーション開発

一般に、Chromecastのアプリケーション開発には、SenderおよびReceiverアプリケーションの開発が含まれます。 前述したように、SenderアプリケーションはモバイルアプリケーションでもWebアプリケーションでもかまいませんが、これは制限ではありません。 Receiverアプリケーションは、Chromecastデバイスで実行できる特別なWebアプリケーションです。



この記事では、送信側と受信側の間のメッセージングを可能にする簡単なChromecastアプリケーションの開発について説明します。 開発したアプリケーションは、さらに開発するためのテンプレートとして使用できます。



しかし、始める前に、Chromecastデバイスをセットアップしてアプリケーションを登録する必要があります。

2.1。 Chromecastデバイスのセットアップ

手順はここで説明されます 。

2.2。 アプリケーション登録

アプリケーションID（「送信者」アプリケーションと「受信者」アプリケーションの両方で使用されます）を取得するには、アプリケーションを登録する必要があります。



登録手順はここで説明されます 。

2.3。 「送信者」アプリケーションの開発

次に、「送信者」アプリケーションの開発プロセスについて説明します。 機能するためには、「送信者」アプリケーションが機能する「受信者」アプリケーションを必要とします。 そのため、「Receiver」アプリケーションの開発後にのみ結果を確認できます。



また、Android向けの「送信者」アプリケーションの開発についても説明します 。



この場合、「送信者」アプリケーションは、一連のテクノロジーとライブラリを使用して「受信者」アプリケーションと通信するAndroidアプリケーションです。

2.3.1。 前提条件：

• Androidアプリケーション開発用IDE（Eclipseなど）
• Android SDK
• Google Play Services SDKバージョン15以降
• Androidサポートライブラリのappcompatおよびメディアルーターライブラリ

2.3.2。 スケルトン作成

空のAndroidアプリケーションを作成し、次のライブラリと依存関係を追加します。

• android-sdk \ extras \ android \ support \ v7 \ appcompat
• android-sdk \ extras \ android \ support \ v7 \ mediarouter
• android-sdk \ extras \ google \ google_play_services \ libproject \ google-play-services_lib

Androidの最小バージョン、権限、およびその他の必要なデータを指定します。

<uses-sdk android:minSdkVersion="9" android:targetSdkVersion="19" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <application android:label="@string/app_name" android:icon="@drawable/ic_launcher" android:theme="@style/Theme.AppCompat.Light.DarkActionBar"> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> </application>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ActionBarActivityを拡張するアクティビティを作成します。

2.3.3。 実装

アプリケーションにはいくつかの重要な条件があります。

• デバイス発見
• セッションで作業する
• 送信者アプリケーションと受信者アプリケーション間のメッセージング

各状態をさらに詳しく説明しましょう。

1）デバイスの発見：

「キャスト」ボタンを押すと、検出をトリガーできます。 このボタンを表示する方法はいくつかありますが、MediaRouter ActionBarプロバイダーを使用します。



以下をメニューに追加します。

 <item android:id="@+id/media_route_menu_item" android:title="Route" app:actionProviderClass="android.support.v7.app.MediaRouteActionProvider" app:showAsAction="always"/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このプロセスには次のフィールドが含まれます。

 private final MediaRouter.Callback mediaRouterCallback = new MediaRouter.Callback() { @Override public void onRouteSelected(MediaRouter router, MediaRouter.RouteInfo route) { CastDevice device = CastDevice.getFromBundle(route.getExtras()); //setSelectedDevice(device); } @Override public void onRouteUnselected(MediaRouter router, MediaRouter.RouteInfo route) { //setSelectedDevice(null); } }; private MediaRouter mediaRouter; private MediaRouteSelector mediaRouteSelector;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onCreateメソッドでmediaRouterおよびmediaRouteSelectorを初期化します。

 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mediaRouter = MediaRouter.getInstance(getApplicationContext()); mediaRouteSelector = new MediaRouteSelector.Builder().addControlCategory(CastMediaControlIntent.categoryForCast(APP_ID)).build(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

アクションプロバイダーを構成します。

 @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); getMenuInflater().inflate(R.menu.main, menu); MenuItem mediaRouteMenuItem = menu.findItem(R.id.media_route_menu_item); MediaRouteActionProvider mediaRouteActionProvider = (MediaRouteActionProvider) MenuItemCompat.getActionProvider(mediaRouteMenuItem); mediaRouteActionProvider.setRouteSelector(mediaRouteSelector); return true; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

onStartおよびonStopメソッドでコールバックを登録します。

 @Override protected void onStart() { super.onStart(); mediaRouter.addCallback(mediaRouteSelector, mediaRouterCallback, MediaRouter.CALLBACK_FLAG_PERFORM_ACTIVE_SCAN); } @Override protected void onStop() { //setSelectedDevice(null); mediaRouter.removeCallback(mediaRouterCallback); super.onStop(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

APP_IDは、パート2.2でアプリケーションを登録するときに受信したアプリケーション識別子を含む文字列です



次に、Chromecastデバイスと共有されているWiFiネットワークにAndroidデバイスを接続し、アプリケーションを起動します（レシーバーアプリケーションは既に使用可能である必要があります。ソースコードから取得できるように、このケースでは非常に簡単です。後でこれに戻ります）。



すべての条件が満たされると、右上隅にブロードキャストアイコンが表示されます。 クリックすると利用可能なデバイスのリストが表示され、デバイスの1つに接続できます。 接続後、アイコンが青色に変わり、接続が確立されたことを示します。 もう一度クリックすると、Chromecastデバイスの音量を変更したり、Chromecastデバイスから切断したりできる別のダイアログが開きます。

2）セッション管理：

セッションを管理するために、いくつかのフィールドとメソッドを追加します。

 @Override protected void onStart() { super.onStart(); mediaRouter.addCallback(mediaRouteSelector, mediaRouterCallback, MediaRouter.CALLBACK_FLAG_PERFORM_ACTIVE_SCAN); } @Override protected void onStop() { //setSelectedDevice(null); mediaRouter.removeCallback(mediaRouterCallback); super.onStop(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

およびいくつかのリスナー：

 private CastDevice selectedDevice; private GoogleApiClient apiClient; private boolean applicationStarted; private void setSelectedDevice(CastDevice device) { Log.d(TAG, "setSelectedDevice: " + device); selectedDevice = device; if (selectedDevice != null) { try { stopApplication(); disconnectApiClient(); connectApiClient(); } catch (IllegalStateException e) { Log.w(TAG, "Exception while connecting API client", e); disconnectApiClient(); } } else { if (apiClient != null) { disconnectApiClient(); } mediaRouter.selectRoute(mediaRouter.getDefaultRoute()); } } private void connectApiClient() { Cast.CastOptions apiOptions = Cast.CastOptions.builder(selectedDevice, castClientListener).build(); apiClient = new GoogleApiClient.Builder(this) .addApi(Cast.API, apiOptions) .addConnectionCallbacks(connectionCallback) .addOnConnectionFailedListener(connectionFailedListener) .build(); apiClient.connect(); } private void disconnectApiClient() { if (apiClient != null) { apiClient.disconnect(); apiClient = null; } } private void stopApplication() { if (apiClient == null) return; if (applicationStarted) { Cast.CastApi.stopApplication(apiClient); applicationStarted = false; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、Chromecastに接続すると、「Receiver」アプリケーションがアクティブになり、デバッグ情報が表示されます。 メッセージングのトピックを展開しましょう。

3）送信側アプリケーションと受信側アプリケーション間のメッセージング。

発信メッセージは、次の方法を使用して送信されます。

 private void sendMessage(String message) { if (apiClient != null) { try { Cast.CastApi.sendMessage(apiClient, NAMESPACE, message) .setResultCallback(new ResultCallback<Status>() { @Override public void onResult(Status result) { if (!result.isSuccess()) { Log.e(TAG, "Sending message failed"); } } }); } catch (Exception e) { Log.e(TAG, "Exception while sending message", e); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、NAMESPACEは文字列「urn：x-cast：com.ls.cast.sample」です。 チャンネルを他のチャンネルから分離するために使用されます。 Receiverアプリケーションでも同じ接続を使用する必要があります。



着信メッセージを処理するには、メッセージの受信者としてCast.MessageReceivedCallbackを登録する必要があります。 connectionResultCallbackでこれを行います。

 @Override public void onResult(Cast.ApplicationConnectionResult result) { Status status = result.getStatus(); if (status.isSuccess()) { applicationStarted = true; try { Cast.CastApi.setMessageReceivedCallbacks(apiClient, NAMESPACE, incomingMsgHandler); } catch (IOException e) { Log.e(TAG, "Exception while creating channel", e); } } } public final Cast.MessageReceivedCallback incomingMsgHandler = new Cast.MessageReceivedCallback() { @Override public void onMessageReceived(CastDevice castDevice, String namespace, String message) { } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして最後にできることは、メッセージの交換です。 デモアプリケーションでは、着信メッセージを表示できるシンプルなレイアウトを作成しました。 添付ファイルの完全なソースコードを読むことができます 。

2.4。 受信アプリケーションの開発

「Receiver」アプリケーションは、Chromecastデバイスで実行できる特別なWebアプリケーションです。



このアプリケーションの最終目標は、ユーザーに役立つ情報を表示し、「送信者」アプリケーションを介してユーザーがこの情報とやり取りできるようにすることです。



情報を表示する最初のタスクはWebアプリケーションでは一般的であり、まったく異なる場合があります。YouTubeなどのメディアアプリケーションやメディアプレーヤーなど、または追加のレイヤーを備えたGoogleマップなどのヘビーウェイトUIアプリケーションなどです。いくつかの統計を表示する単純なHTMLページである。



ReceiverとSenderアプリケーション間の対話の2番目のタスクについては、Chromecast SDKがこのためのJavaScriptライブラリを提供します。 これにより、双方向の文字列メッセージの交換が可能になります。 このトピックを開きましょう。



まず、2.2項で説明されているようにアプリケーションを登録する必要があることに注意してください。 登録時に、URLを提供する必要があります。 このURLは、Receiverアプリケーションをホストするために使用されます。 Receiverアプリケーションの開発は、次の手順で構成されます。

1）ローカルでのアプリケーション開発。



2）指定されたURLに配置します。



3）特別なURLを介したアプリケーションのアクティブ化とデバッグ。 アプリケーションをアクティブにするには、Senderアプリケーションを起動してデバイスに接続するだけです。 「Receiver」アプリケーションをデバッグするには、PCで次のリンクを開きます。http：// CHROMECAST_IP：9222 （CHROMECAST_IPはChromecastデバイスのIPアドレスです）。 デバイスのIPアドレスを取得するには、PCまたはモバイルデバイス用のChromecast設定ユーティリティを実行します。 設定に使用するデバイスは、Chromecastデバイスと直接WiFi接続する必要があることに注意してください（したがって、設定用に選択する場合は、PCにWiFiアダプターが必要です）









また、デバッグを有効にするには、「更新の確認時にこのChromecastのシリアル番号を送信する」オプションを有効にする必要があります。 ブラウザが見つかったアドレスを開くと、次が表示されます。









強調表示されているリンクは、実行中のアプリケーションを指します。クリックすると、Chrome Developerツールの新しいページが開きます。 ローカルの開発者ツールを台無しにしないでください-実際、それらはリモートであり、Chromecastデバイスに関連しています：









これで、アプリケーションを開発する準備が整いました。



まず、Chromecastサポートスクリプトを有効にします。

 <script src="https://www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、cast.receiver.CastReceiverManagerインスタンスが必要になり、onSenderConnected、onSenderDisconnected、onMessageリスナーを接続して、メッセージングを開始します。 onLoadリスナーでこれを行うことができます。

 window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance(); window.castReceiverManager.onSenderConnected = onChannelOpened; window.castReceiverManager.onSenderDisconnected = onChannelClosed; window.customMessageBus = window.castReceiverManager.getCastMessageBus(namespace); window.customMessageBus.onMessage = onMessage; window.castReceiverManager.start();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の方法を使用して、着信メッセージを処理できます。

 function onMessage(event) { var message = event.data; var senderId = event.senderId; log("message from: " + senderId + " message: " + message); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の方法を使用して、発信メッセージを送信します。

 function broadcast(message) { window.customMessageBus.broadcast(message); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

複数のSenderアプリケーションが1つのReceiverアプリケーションに同時に接続できることに注意してください。 したがって、ブロードキャストメソッドを使用して、接続されているすべての送信者アプリケーションにメッセージを送信します。



デモアプリケーションでは、デモのためにタイマーメッセージを送信します。



そして、さらにいくつかのコメント。 テキストの色はデフォルトでは黒です。そのため、何かを見るためにはCSSで再定義する必要があります。 また、Chromecastデバイスの画面解像度は1280x720ピクセルであることに注意してください。



ふう。 双方向でメッセージを交換できるカスタムのSenderおよびReceiverアプリケーションを作成しました。 これは、Chromecastデバイスの全機能を理解して使用するのに十分なはずです。



完全なソースコードはこちらからダウンロードできます 。



PS実際、私は記事の著者でもあるため、技術的な質問に答えることができます。