castjs を使って Chromecast への動画のキャストを JavaScript で行う（p5.js も併用）

Last updated at 2024-07-28Posted at 2024-07-28

調べものをしている中で、Chromecast への動画のキャストなどを扱えるライブラリの castjs を見かけたので、それを試してみた話です。

●castjs/castjs: 📺 Chromecast Sender Library for the Browser
　https://github.com/castjs/castjs

とりあえずのお試しで、リビングにある Chromecast（第3世代）に、castjs のデモで掲載されている動画をキャストしてみました。

試した内容

利用するブラウザ

今回のお試しでは、ブラウザは「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 への動画のキャストが行えました。