プレゼンテーション API

<button id="presentBtn" style="display: none;">プレゼンテーション開始</button>
<script>
  // 1 個以上のプレゼンテーション画面が利用可能なら、プレゼンテーション開始ボタンを可視にします
  const presentBtn = document.getElementById("presentBtn");

  // 相対のプレゼンテーション URL (たとえば "presentation.html") も使用可能です
  const presUrls = [
    "https://example.com/presentation.html",
    "https://example.net/alternate.html",
  ];

  // 画面の利用可能性に応じて、プレゼンテーション開始ボタンを表示したり隠したりします
  const handleAvailabilityChange = (available) => {
    presentBtn.style.display = available ? "inline" : "none";
  };

  // プレゼンテーション画面の利用可能性がわかるとすぐに Promise が解決します。
  const request = new PresentationRequest(presUrls);
  request
    .getAvailability()
    .then((availability) => {
      // 利用可能性オブジェクトが生きている間ずっと、操作を行うユーザーエージェントにより
      // availability.value が最新に保たれる可能性があります。ウェブ開発者は、
      // 不要になったらすぐにオブジェクトを破棄することが推奨されます。
      handleAvailabilityChange(availability.value);
      availability.onchange = () => {
        handleAvailabilityChange(availability.value);
      };
    })
    .catch(() => {
      // このプラットフォームは利用可能性の監視に対応しておらず、
      // プレゼンテーション画面の探索は request.start() が呼ばれるまで行われません。
      // 簡単のためにデバイスが利用可能なように見せかけます。
      // ボタンの第 3 の状態を実装してもいいでしょう。
      handleAvailabilityChange(true);
    });
</script>

<script>
  presentBtn.onclick = () => {
    // 新しいプレゼンテーションを開始します
    request
      .start()
      // 成功時、プレゼンテーションへの接続が setConnection に渡されます。
      .then(setConnection);
    // 失敗時は、ユーザーが選択ダイアログをキャンセルしたか、画面が見つかりませんでした。
  };
</script>

<button id="reconnectBtn" style="display: none;">再接続</button>
<script>
  const reconnect = () => {
    // 存在するなら、localStorage から presId を読み込みます
    const presId = localStorage["presId"];
    // プレゼンテーションに再接続するには、presId が必要です。
    if (presId) {
      request
        .reconnect(presId)
        // 成功時、プレゼンテーションへの新しい接続が setConnection に渡されます。
        .then(setConnection);
      // presUrl と presId に対応する接続が見つからなかったか、エラーが発生しました。
    }
  };
  // 操作器を開いた時、自動的に再接続します。
  document.addEventListener("DOMContentLoaded", reconnect);
  // 手動での再接続もできるようにします。
  reconnectBtn.onclick = reconnect;
</script>

<script>
  navigator.presentation.defaultRequest = new PresentationRequest(presUrls);
  navigator.presentation.defaultRequest.onconnectionavailable = (evt) => {
    setConnection(evt.connection);
  };
</script>

<button id="disconnectBtn" style="display: none;">切断</button>
<button id="stopBtn" style="display: none;">停止</button>
<button id="reconnectBtn" style="display: none;">再接続</button>
<script>
  let connection;

  // 接続中のプレゼンテーションがあるなら、切断ボタンと停止ボタンを表示します
  const stopBtn = document.querySelector("#stopBtn");
  const reconnectBtn = document.querySelector("#reconnectBtn");
  const disconnectBtn = document.querySelector("#disconnectBtn");

  stopBtn.onclick = () => {
    connection?.terminate();
  };

  disconnectBtn.onclick = () => {
    connection?.close();
  };

  function setConnection(newConnection) {
    // 再接続を試みているのでなければ、既存のプレゼンテーションから切断します
    if (
      connection &&
      connection !== newConnection &&
      connection.state !== "closed"
    ) {
      connection.onclose = undefined;
      connection.close();
    }

    // 新しい接続をセットし、プレゼンテーション ID を保存します
    connection = newConnection;
    localStorage["presId"] = connection.id;

    function showConnectedUI() {
      // ユーザーがプレゼンテーションの切断や終了をできるようにします
      stopBtn.style.display = "inline";
      disconnectBtn.style.display = "inline";
      reconnectBtn.style.display = "none";
    }

    function showDisconnectedUI() {
      disconnectBtn.style.display = "none";
      stopBtn.style.display = "none";
      reconnectBtn.style.display = localStorage["presId"] ? "inline" : "none";
    }

    // 接続の状態を監視します
    connection.onconnect = () => {
      showConnectedUI();

      // メッセージハンドラーを登録します
      connection.onmessage = (message) => {
        console.log(`メッセージを受信: ${message.data}`);
      };

      // プレゼンテーションページに最初のメッセージを送信します
      connection.send("Say hello");
    };

    connection.onclose = () => {
      connection = null;
      showDisconnectedUI();
    };

    connection.onterminate = () => {
      // 存在すれば、localStorage から presId を削除します
      delete localStorage["presId"];
      connection = null;
      showDisconnectedUI();
    };
  }
</script>

const addConnection = (connection) => {
  connection.onmessage = (message) => {
    if (message.data === "Say hello") connection.send("hello");
  };
};

navigator.presentation.receiver.connectionList.then((list) => {
  list.connections.forEach((connection) => {
    addConnection(connection);
  });
  list.onconnectionavailable = (evt) => {
    addConnection(evt.connection);
  };
});

<script>
  connection.send('{"string": "你好，世界!", "lang": "zh-CN"}');
  connection.send('{"string": "こんにちは、世界!", "lang": "ja"}');
  connection.send('{"string": "안녕하세요, 세계!", "lang": "ko"}');
  connection.send('{"string": "Hello, world!", "lang": "en-US"}');
</script>

<script>
  connection.onmessage = (message) => {
    const messageObj = JSON.parse(message.data);
    const spanElt = document.createElement("SPAN");
    spanElt.lang = messageObj.lang;
    spanElt.textContent = messageObj.string;
    document.body.appendChild(spanElt);
  };
</script>