castアプリの種類

Castアプリでは、Sender AppsとReceiver Appsの２種類ある。Sender Appsはリモコン的操作（chrome、Android、iOS）のアプリで、Receiver Appsはテレビの役割。

普通のテレビだとデバッグすることができないので、receiver apiがあまり使えないのたが、Android TVなどカスタマイズが可能なデバイスもあるので、もしreceiver apiを試したい方にはぜひ Android TVの購入を検討しても良いでしょう。

ざっくりSender Appsの仕組み

キャストタグを配置。
Receiver　Application ID を定義する。一般家庭のテレビの場合は、 chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID を使えばおっけー。
cast.framework.RemotePlayer でchromeとテレビを接続する。
接続ができたら、 cast.framework.CastContext.getInstance().getCurrentSession() で接続済みのセッションを使って、動画を再生する。また、動画の早送り、巻戻し、停止などもセッションを使って制御ができます。

動画再生のサンプルコード

サンプルコードのデバッグ環境

ウェブサーバー - fileプロトコールで開くと反応しないので、必ず httpプロトコールになるようにウェブサーバーを使ってください。
Chrome (パソコン、iOS、Android)

Safari、IE、edge、firefoxなど、chrome以外のブラウザではpolymerに対応していないので、google-cast-launcherはキャストボタンに変換されません。

ソースコード

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <style type="text/css">
    .block {
      display: block;
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
    <h1>Google Cast Test</h1>
    <google-cast-launcher class="block"></google-cast-launcher>
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};

// 1. 初期化
var remotePlayer;
var remotePlayerController;
function initializeCastApi() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
  });

  launchApp();
}

// 2. パソコンとクロームキャストが接続されたらのリスナー
function launchApp() {
  remotePlayer = new cast.framework.RemotePlayer();
  remotePlayerController = new cast.framework.RemotePlayerController(remotePlayer);
  remotePlayerController.addEventListener(
      cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,
      function() {
        if(remotePlayer.isConnected) {
          loadMedia();
        }
      }
  );
}

// 3. メディアをロードする
function loadMedia() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  var mediaInfo = new chrome.cast.media.MediaInfo(
            'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4', 'video/mp4');

  mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
  mediaInfo.metadata.metadataType = chrome.cast.media.MetadataType.GENERIC;

  var request = new chrome.cast.media.LoadRequest(mediaInfo);

  castSession.loadMedia(request).then(
    function() { 
      console.log('Load succeed'); 
    },
    function(e) { 
      console.error(e);
    }
  );
}
</script>

</body>
</html>

番外編

公式Google Castのガイド

google castの導入についてまとめています。
https://developers.google.com/cast/docs/chrome_sender/integrate

ただ、ガイドはあまり丁寧に書いてなくて、cast.framework.CastContext.getInstance().getCurrentSession() のところでは、インスタンスがどのタイミングで生成されるのか、コールバックはどのように定義するのか詳しく書いていません。

githubのサンプルコードを参考してremotePlayerのconnected listenerのことがわかりました。

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
// remotePlayerのconnected listenerを入れないと、castSession　は　null　です。

一番参考になるのはgithubのサンプルコードです。
https://github.com/googlecast/CastVideos-chrome

デザインポリシーに関して

キャストのボタンはdropdownメニューにあってはいけない
画面の一番最初にあるべき
どの画面にもキャストボタンがユーザが目に見えるところにあるべき

他にも色々あるが、重要なところだけ上にまとめた。詳細は次にリンクて
https://developers.google.com/cast/docs/terms

システム環境に関して

PCのChromeにすでに「キャスト」ボタンが存在していること。

ChromeでGoogle Castの動画再生（Sender Appsのみ）