試した内容

利用するブラウザ

今回のお試しでは、ブラウザは「Google Chrome」を使っています。

デバイスの構成

今回、利用しているデバイスは以下の通りです。

PC
Chromecast（第3世代）
Chromecast を接続したモニタ

PC と Chromecast は、自宅の中で同じローカルネットワークに接続している状態です。

用意した HTML＋JavaScript

お試し用に作った内容は、以下のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/castjs/5.3.0/cast.min.js"></script>
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <script>
      let castjs;
      let isCasting = false;

      function setup() {
        createCanvas(400, 200);
        textSize(16);
        textAlign(CENTER, CENTER);

        castjs = new Castjs();

        castjs.on("connect", () => {
          isCasting = true;
        });
        castjs.on("disconnect", () => {
          isCasting = false;
        });
      }

      function draw() {
        background(200);

        text(
          " C キーでキャスト / キャスト停止は S キー",
          width / 2,
          height / 2 - 20
        );
        if (isCasting) {
          text("「キャスト中」", width / 2, height / 2 + 20);
        } else {
          text("「キャスト停止中」", width / 2, height / 2 + 20);
        }
      }

      function keyPressed() {
        if (key === "c" || key === "C") {
          startCasting();
        } else if (key === "s" || key === "S") {
          stopCasting();
        }
      }

      function startCasting() {
        castjs.on("available", () => {
          castjs.cast(
            "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
          );
        });
      }

      function stopCasting() {
        if (castjs.connected) {
          castjs.disconnect();
        }
      }
    </script>
  </body>
</html>

キー押下時の処理や、ブラウザ上での状態の表示の部分で p5.js を使っています。
castjs を使ったキャストの開始／停止の処理は、この中では　10行にも満たないくらいの分量になりました。

処理の実行

こちらを試す際にローカルサーバーを使わないで、HTMLファイルをブラウザにドラッグアンドドロップするやり方にすると、エラーが発生します。そのため、ローカルサーバーを用意して、上記の JavaScript の処理を実行します。

やり方は色々あると思いますが、自分は VSCode の拡張機能「Live Server」を使うやり方にしました。

ブラウザ上での操作の流れ

HTMLファイルを開くと、ブラウザに以下の内容が表示されます。

そして「c」キーを押すと、ブラウザで以下の画面が表示されます。

この中で、自分がキャスト先にしたい Chromecast を選択すると、動画のキャストが開始されます。
また、キャスト中に「ｓ」キーを押すと、それが停止されます。

このように、HTML＋JavaScript で Chromecast への動画のキャストが行えました。

関連するフレームワーク・API

今回、上記の内容ではライブラリを用いた実装でした。ライブラリのソースを見てみると、以下の部分でフレームワークを呼んで処理を行っているようです。

https://github.com/castjs/castjs/blob/master/cast.js#L4

そのフレームワーク・API に関する公式の情報が気になった場合は、以下を見ていけば良さそうです。

●Google Cast API リファレンス | Google for Developers
　https://developers.google.com/cast/docs/reference?hl=ja

●ウェブ用 Cast Application Framework（CAF）を使用した開発のセットアップ | Google for Developers
　https://developers.google.com/cast/docs/web_sender?hl=ja

今後、ライブラリの詳細を見ていきつつ、上記の Google のリファレンスも見てみようと思います。