27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ChromeCastのSender(Chrome)とReceiverを実装して任意のURLをテレビに表示させる

Last updated at Posted at 2013-08-19

ChromeCast Image

ドキュメント

下準備

  1. ChromeCastがTVで見られるようになっている
  2. インストールしたChromeCastのアプリケーションを再び開き、端末の「Setting」に進み「Privacy」のところにある「Send this Chromecast's serial number when checking for updates」をOnにしておく

SenderとReceiver

Senderはリクエストオブジェクトを送信することで、Recever側のCast端末で受信し指定のURLを開きます。

Sender
var castApi = cast.Api();
var request = new cast.LaunchRequest(APP_ID, receiver); 
castApi.launch(request, onLaunch); 
Receiver
var receiver = new cast.receiver.Receiver(APP_ID, ['Test'], "", 5);
receiver.start();

APP-IDの発行

現在GoogleCast SDKはベータ版でホワイトリスト方式を採用しています。
そのためSenderからリクエストするのに必要なAPP-IDの発行をGoogleに要求する必要があります。

上記リンクが切れていたら以下のページから「Request Whitelisting」に遷移。
https://developers.google.com/cast/whitelisting#whitelist-receiver

最低限必要な情報は

  • メールアドレス
  • ChromeCastのシリアル番号(端末背面に記載)
  • Receiver URL(端末にリクエストが送られてきた時に開くURL)

コード

Sender
<html data-cast-api-enabled="true">
<head>
<script>
var cast = cast || {}
var cast_api, cv_activity;

var APP_ID = "YOUR APP ID"

var doLaunch = function(receiver) {
  var request = new cast.LaunchRequest(APP_ID, receiver);
  cast_api.launch(request, onLaunch);
};

var onLaunch = function(activity) {
  console.log(activity);
  if (activity.status == "running") {
    cv_activity = activity;
  } else if (activity.status == "error") {
    cv_activity = null;
  }
};

var onReceiverList = function(list) {
  // If the list is non-empty, show a widget with
  // the friendly names of receivers.
  // When a receiver is picked, invoke doLaunch with the receiver.
  console.log(list);
  doLaunch(list[0]);};

function initializeApi(){
  cast_api = new cast.Api();
  cast_api.addReceiverListener("YouTube", onReceiverList);
}

if (cast && cast.isAvailable) {
  // Cast is known to be available
  initializeApi();
} else {
  // Wait for API to post a message to us
  window.addEventListener("message", function(event) {
    console.log("message");
    console.log(event.data);
    if (event.source == window && event.data && 
        event.data.source == "CastApi" &&
        event.data.event == "Hello")
      initializeApi();
  });
};
</script>
</head>
<body>
</body>
</html>
Receiver
<html>
  <title>Hello Chromecast</title>
  <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
  <style>body { font-family: 'Droid Sans', Helvetica; font-size: 3em; text-align: center; color: white; margin: 5%;}</style>
  <script src="https://www.gstatic.com/cast/js/receiver/1.0/cast_receiver.js"></script>
  <script type="text/javascript">
    var castAppId = 'YOUR APP ID';
    var receiver = new cast.receiver.Receiver(castAppId, ['Test'], "", 5);
    receiver.start();
  </script>
  <body>
    <h1>Google Cast Receiver</h1>
    <h2>Hello Chromecast</h2>
  </body>
</html>
27
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?