検索
連載

スマホとWebSocketで連携するテレビ用SPA（Single-Page Application）の作り方：Chromecastアプリ開発入門（2）（5/5 ページ）

メディアストリーミングデバイス「Chromecast」用アプリの開発方法を一から解説する連載。今回は、Senderのコマンドを受信してHTML5のvideo要素を使ってメディアを再生したり画面を写したりするReceiverアプリの概要と作り方などを解説します。

[大西克己，オープンストリーム] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

Receiverアプリを配置するサーバーの環境設定

　ここまではReceiverアプリの実装方法について解説してきました。Receiverの基本的な実装方法については理解できたかと思います。最後に、Receiverアプリが配置されるサーバー環境の設定で重要となるCross-Origin Resource Sharing（CORS）についても解説します。

　Chromecast上で実行されるReceiverアプリは、コンテンツデータなどにアクセスするため、自身が送信されたドメインとは異なるドメインのリソースに対してクロスサイトHTTPリクエストを行う必要があります。

　通常、スクリプトによって実行されるクロスサイトHTTPリクエストは、セキュリティ上の理由から制限が掛けられています。これを「同一生成元ポリシー（same-origin policy）」といいます。Ajax／XMLHttpRequestより発行されたHTTPリクエストはこの同一生成元ポリシーの制約を受け、Webアプリは自身が送信されたドメインにのみHTTPリクエストを発行でき、他のドメインには発行できません。

　CORSは、Webサーバーが異なるドメインからのアクセスを制御することで、異なるドメイン間での通信を安全にするための仕様です。CORSで制御できるルールには以下のようなものがあります。

  • クロスドメインアクセスを許可するサーバーのドメイン
  • 使用を許可するHTTPメソッド
  • 使用を許可するHTTPヘッダー

　典型的なReceiverアプリからは、以下の図5のようなHTTPリクエストが発行されると予想されます。


図5　Chromecast アプリのHTTPリクエスト

　図5で発生するHTTPリクエストを列挙すると、以下のようになります。

  • WebServerへ、Receiverアプリ取得リクエスト
  • Media Serverへ、メディアの取得リクエスト
  • DRM License Serverへ、メディア再生時のライセンス認証のキー取得リクエスト
  • Web App Serverへ、何らかのロジックのためにREST APIのリクエスト

　CORSの設定するための例を以下の表にまとめました。図5の各サーバーを設定する際に参考にしてください。

表5　Media Server
Access-Control-Allow-Origin com.example.web
Access-Control-Allow-Methods GET
Access-Control-Allow-Headers Content-Type

　メディアへのアクセスはGETで、ヘッダーにContent-Typeが設定されるHTTPリクエストを許可します。プリフライトリクエストが発生するので、OPTIONSを許可しています。

表6　DRM License Server
Access-Control-Allow-Origin com.example.web
Access-Control-Allow-Methods GET、POST、OPTIONS

　ライセンスサーバーへのアクセスには、プリフライトリクエストが発生するので、OPTIONSを許可しています。

表7　Web App Server
Access-Control-Allow-Origin com.example.web
Access-Control-Allow-Methods GET、POST、PUT、DELETE

　Webアプリサーバーでは、RESTで使用されるメソッドを許可しています。

※プリフライトリクエストが発生する場合は、DRM License Serverと同じ設定が必要となります。

　各サーバーで、カスタムヘッダーを含む場合は、以下のような設定を追加します。

表8
Access-Control-Allow-Headers X-Custom-Header

　リクエストにCookieを含める場合、クレデンシャルを含むリクエストへ応答できるようにします。

表9
Access-Control-Allow-Credentials true

　プリフライトリクエストが発生する場合は、DRM License Serverと同じ設定が必要となります。

表10　Web App Server
Access-Control-Allow-Origin com.example.web
Access-Control-Allow-Methods GET、POST

　CORSについては、「Using CORS - HTML5 Rocks」の詳細な解説が参考になると思います。

次回はAndroid／iOS版のSenderアプリの実装

　以上が、メディア操作や状態管理、Adaptive Bitrate StreamingやDRMを使用したより高度なReceiverアプリの開発についての解説となります。

　次回はAndroid／iOS版のSenderアプリの実装方法について解説します。

「Chromecastアプリ開発入門」バックナンバー

著者プロフィール

大西克己

株式会社オープンストリームにおいて、アーキテクトとしてAndroidの技術調査・支援、開発案件に従事。社外ではいくつかのAndroid系コミュニティに所属し、勉強会やハッカソンへ積極的に参加、アプリケーションコンテストで入賞したことがある。

最近は、Androidを中心としたウェアラブルデバイスなどのエコシステムに興味がある。


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る