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

# castアプリの種類

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

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

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


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


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

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

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

### ソースコード

```html
<!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のことがわかりました。

```javascript
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_menu.png](https://qiita-image-store.s3.amazonaws.com/0/60849/b5a709d2-d9c0-3ff7-92c1-009b3c9ae1d9.png)