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にすでに「キャスト」ボタンが存在していること。
