最終更新日：190227原本2014-11-14　

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

前のページへ 1|2|3|4|5 次のページへ

Custom Receiver型のメディアストリーミングアプリの開発

　それでは、具体的にメディアストリーミングアプリ（Custom Receiver）の開発について解説したいと思います。

メディアストリーミングアプリの基本

　メディアの操作などは、video要素として定義されたMediaElement、MediaManagerとCastReceiverManagerのイベントをオーバーライドして処理を追加していきます。まずはMediaElement、MediaManager、CastReceiverManagerを初期化します（コード1）。

  1. <html>
  2. <head>
  3.   <!-- （1）Google Cast Receiver SDKの設定 -->
  4.   <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
  5. </head>
  6. <body>
  7.   <video id='vid' />
  8.   <script type="text/javascript">
  9.     window.onload = function() {
  10.       //（2）デバッグレベルの設定
  11.       cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);
  12.       //（3）VideoタグのElementオブジェクトを取得
  13.       window.mediaElement = document.getElementById('vid');
  14.       //（4）Videoタグを指定してメディアマネージャを作成
  15.       window.mediaManager = new cast.receiver.MediaManager(window.mediaElement);
  16.       //（5）レシーバーマネージャのスタート
  17.       window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
  18.       castReceiverManager.start();
  19.     };
  20.   </script>
  21. </body>
  22. </html>
コード1　Custom Receiverの基本コード

　以下、コード1について詳細に説明します。

（1）Google Cast Receiver SDKの参照を設定

　必ずこのURLを指定する必要があります。バグフィックスや新機能のアップデートが行われた場合、セルフホストしていると内容が反映されません。

（2）デバッグレベルの設定

　Cast receiver libraryのデフォルトではデバッグが無効となっています。リモートデバッグを可能にするには、ログレベルをデバッグに設定する必要があります。開発時にはリモートデバッグを有効に設定し、アプリケーションリリース時に無効に設定するとよいでしょう。

（4）MediaManagerの作成

　メディアストリームを流したいvideo要素を引数にMediaManagerの作成を行います。

（5）ReceiverManagerの開始

　メディアストリームを流したいvideo要素を引数にMediaManagerを作成し、レシーバーマネージャを開始します。

HTML5のVideo APIを使ってメディアを操作する

　HTML5のvideo要素には、メディアを操作するAPI、イベントとプロパティが用意されています。これらを使用して、JavaScriptからメディアの操作・状態の取得を行います。

コラム「HTML5のvideo要素について詳細に知りたい方は」

　W3Cにデモページ「HTML5 Video」がありますので、そこでどのような操作時にどのようなイベントが発生し、プロパティがどのように変化するか確認できます。

　また、video要素のイベントについての解説は「Media events - Web developer guide | MDN」に記述されているので参考にしてください。

　一般的なメディアプレーヤーでは、メディア再生時にメタ情報と再生状態を表示するかと思います。ここでは例として、図3のようなメディアプレーヤーに対して代表的なイベントに応じてプレーヤーの表示を変更する処理を実装してみます。

図3　プレーヤー画面
  • プレーヤー領域：video要素を画面全体に表示
  • ステータスパネル
    1. タイトルを表示
    2. 再生／一時停止状態を表示
    3. 再生時間を表示
    4. プログレスバー：メディア再生の進捗率を表示
    5. コンテンツ時間を表示

■イベント処理の仕様

　図3のサンプルアプリケーションに対する、イベント処理の仕様は以下の通りです。

  1. 再生の開始前（メディアの読み込み開始時）に【1】タイトルを更新
  2. 再生が開始したら【2】再生/一時停止状態を再生状態に、【3】再生時間／【4】プログレスバー／【5】コンテンツ時間を更新
  3. 再生の開始後一定時間後にステータスパネルを隠す
  4. 再生中は、【3】再生時間と【4】プログレスバーを更新し続ける
  5. 再生が一時停止したらステータスパネルを表示し、【2】再生／一時停止状態を一時停止状態に変更
  6. 再生が再開したら1．へ戻る

■イベント処理の設定

　前述のイベント処理仕様の通りに設定していきましょう。イベント処理は、MediaElementに対してaddEventListenerを使ってイベントハンドラーを登録することで設定できます（コード2）。ここではイベント処理の設定についてのみ解説し、再生時間や進捗率などの取得方法については後述します。

  1. <body>
  2.   <!-- プレーヤー-->
  3.   <video id='vid' />
  4.   <!-- ステータスパネル -->
  5.   <div id="mediaStatus">
  6.     <div id="mediaTitle"></div>
  7.     <div id="mediaControl">
  8.       <div id="play"></div>
  9.       <div id="pause"></div>
  10.       <div id="current">00:00:00</div>
  11.       <div id="duration">00:00:00</div>
  12.       <div id="progress"></div>
  13.     </div>
  14.   </div>
  15.  
  16.   <script type="text/javascript">
  17.     window.onload = function() {
  18.  
  19.         //（3）VideoタグのElementを取得
  20.         window.mediaElement = document.getElementById('vid');
  21.       
  22.         // イベントリスナーを登録
  23.         // メディアの読み込み開始した
  24.         window.mediaElement.addEventListener('loadstart', function(e) {
  25.             console.debug('######### MEDIA ELEMENT LOAD START' + e);
  26.             //（3.1）ステータスパネルを表示しタイトルを更新する。……1．
  27.             window.mediaStatus.style.display = "block";
  28.             window.play.style.display = "block";
  29.             window.pause.style.display = "none";
  30.             window.mediaTitle.innerHTML = “タイトル....;
  31.         });
  32.  
  33.         // メディアの再生が開始した
  34.         window.mediaElement.addEventListener('playing', function(e) {
  35.             console.debug('######### MEDIA ELEMENT PLAYING' + e);
  36.             //（3.2）ステータスパネルを一定時間後に隠す。……2．
  37.             window.setTimeout(function() {
  38.                 window.mediaStatus.style.display = "none";
  39.             }, 5000);
  40.         });
  41.      
  42.         // メディアの再生が一時停止した
  43.         window.mediaElement.addEventListener('pause', function(e) {
  44.             console.debug('######### MEDIA ELEMENT PAUSE' + e);
  45.             //（3.3）ステータスパネルを表示する。……5．
  46.             window.mediaStatus.style.display = "block";
  47.         });
  48.  
  49.         // 一時停止した後、メディアの再生を再開した
  50.         window.mediaElement.addEventListener('play', function(e) {
  51.             console.debug('######### MEDIA ELEMENT PLAY' + e);
  52.             //（3.2）ステータスパネルを一定時間後に隠す。……2．
  53.             window.setTimeout(function() {
  54.                 window.mediaStatus.style.display = "none";
  55.             }, 5000);
  56.         });
  57.  
  58.         // メディアを読み込もうとしているが、予期しない理由で読み込めない
  59.         window.mediaElement.addEventListener('stalled', function(e) {
  60.             console.debug('######### MEDIA ELEMENT STALLED' + e);
  61.             // エラー処理
  62.         });
  63.  
  64.         // メディアの読み込み中にエラーが発生した
  65.         window.mediaElement.addEventListener('error', function(e) {
  66.             console.debug('######### MEDIA ELEMENT ERROR ' + e);
  67.             // エラー処理
  68.         });
  69.  
  70.         // メディアの再生位置が変更された
  71.         window.mediaElement.addEventListener('timeupdate', function() {
  72.             //console.debug('######### MEDIA ELEMENT TIMEUPDATE ' + e);
  73.             //（3.4）ステータスパネルの更新 ……4．
  74.             window.current.innerHTML = “[現在の再生時間]”;
  75.             window.progress.style.width = [進捗率]
  76.         });
  77.  
  78.         // メディアの再生が完了した
  79.         window.mediaElement.addEventListener('ended', function(e) {
  80.             console.debug('######### MEDIA ELEMENT ENDED' + e);
  81.             // プレーヤー停止処理など
  82.         });
  83.  
  84.         // メディアの再生が中断した
  85.         window.mediaElement.addEventListener('abort', function(e) {
  86.             console.debug('######### MEDIA ELEMENT ABORT ' + e);
  87.             // プレーヤー停止処理など
  88.         });
  89.     };
コード2　イベントハンドラーの登録
前のページへ 1|2|3|4|5 次のページへ