セカンダリ接続ディスプレイにウェブページを表示する

François Beaufort
François Beaufort
GitHub

Chrome 66 では、 Presentation API を使用すると、そのコンテンツを Presentation API を通じて制御できるようになります。 Receiver API:

<ph type="x-smartling-placeholder">
</ph> 1/2。ユーザーが 2 台目の接続ディスプレイを選択する <ph type="x-smartling-placeholder">
</ph> 1/2。ユーザーが 2 台目の接続ディスプレイを選択する
で確認できます。
<ph type="x-smartling-placeholder">
</ph> 2/2。ウェブページは、以前に選択したディスプレイに自動的に表示されます <ph type="x-smartling-placeholder">
</ph> 2/2。ウェブページは、以前に選択したディスプレイに自動的に表示されます
で確認できます。

背景

これまでウェブ デベロッパーは、ローカル環境で表示される ユーザーがリモコンに表示されるコンテンツとは異なるコンテンツを Chrome で表示する ローカルでそのエクスペリエンスをコントロールできます。例 youtube.com での再生キューの管理、テレビでの動画の再生 全画面表示中にノートパソコンでスピーカー ノート付きのスライド動画を見たり、 ハングアウト セッションで表示されます。

ただし、ユーザーがコンテンツを Google Pixel に もう 1 つは 2 つ目のディスプレイですたとえば、会議室にいるユーザーが プロジェクターを HDMI ケーブルで接続します。 プレゼンテーションをリモート エンドポイントにミラーリングするのではなく、 スライドをプロジェクターで全画面表示したいのに ノートパソコンの画面でスピーカー ノートやスライドの操作に使用できます。サイトが 作成者はこれをごく初歩的な方法でサポートできます（たとえば、 ユーザーが手動でセカンダリ ディスプレイにドラッグし、 全画面に最大化）すると、操作が煩雑になり、一貫性が 経験を積むことができます。

ページをプレゼンテーションする

Presentation API を使用してウェブページをプレゼンテーションする方法を説明しましょう。 表示されます。最終的な結果は https://googlechrome.github.io/samples/presentation-api/.

まず、新しい PresentationRequest オブジェクトを作成します。このオブジェクトには、 アタッチされたセカンダリ ディスプレイに表示する URL です。

const presentationRequest = new PresentationRequest('receiver.html');

In this article, I won’t cover use cases where the parameter passed to
`PresentationRequest` can be an array like `['cast://foo’, 'apple://foo',
'https://example.com']` as this is not relevant there.

We can now monitor presentation display availability and toggle a "Present"
button visibility based on presentation displays availability. Note that we can
also decide to always show this button.

<aside class="caution"><b>Caution:</b> The browser may use more energy while the <code>availability</code> object is alive
and actively listening for presentation display availability changes. Please
use it with caution in order to save energy on mobile.</aside>

```js
presentationRequest.getAvailability()
  .then(availability => {
    console.log('Available presentation displays: ' + availability.value);
    availability.addEventListener('change', function() {
      console.log('> Available presentation displays: ' + availability.value);
    });
  })
  .catch(error => {
    console.log('Presentation availability not supported, ' + error.name + ': ' +
        error.message);
  });

プレゼンテーションの表示プロンプトを表示するには、クリックなどのユーザー操作が必要です 必要があります。ボタンのクリックで presentationRequest.start() を呼び出し、 ユーザーがプレゼンテーションを選択したら、Promise が解決されるのを待つ （このユースケースではセカンダリ接続ディスプレイなど）。

function onPresentButtonClick() {
  presentationRequest.start()
  .then(connection => {
    console.log('Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log(error);
  });
}

ユーザーに提示されるリストには、次のようなリモート・エンドポイントも含まれる場合があります。 Chromecast デバイス（Chromecast をアドバタイジングするネットワークに接続している場合）。注: ミラーリングされたディスプレイはリストに表示されません。http://crbug.com/840466 をご覧ください。

<ph type="x-smartling-placeholder">
</ph> プレゼンテーションの表示選択ツール <ph type="x-smartling-placeholder">
</ph> プレゼンテーションの表示選択ツール
をご覧ください。

Promise が解決されると、PresentationRequest オブジェクトの URL のウェブページは次のようになります。 表示されます。これで完了です。

さらに「クローズ」状態をモニタリングできます。「終了」などのタスクをイベントを記録します。 ご覧ください「クローズされた」インスタンスに再接続することは presentationRequest.reconnect(presentationId) で presentationConnection ここで、presentationId は前の presentationRequest オブジェクトの ID です。

function onCloseButtonClick() {
  // Disconnect presentation connection but will allow reconnection.
  presentationConnection.close();
}

presentationConnection.addEventListener('close', function() {
  console.log('Connection closed.');
});


function onTerminateButtonClick() {
  // Stop presentation connection for good.
  presentationConnection.terminate();
}

presentationConnection.addEventListener('terminate', function() {
  console.log('Connection terminated.');
});

ページとのやり取り

素晴らしいことですが、Google Cloud と （先ほど作成したページ）とレシーバー ページ（先ほど作成したもの）を PresentationRequest オブジェクトに渡した値など）？

まず、レシーバーページの既存の接続を取得します。 navigator.presentation.receiver.connectionListして、着信を聞きます 下図のように接続されます。

// Receiver page

navigator.presentation.receiver.connectionList
.then(list => {
  list.connections.map(connection => addConnection(connection));
  list.addEventListener('connectionavailable', function(event) {
    addConnection(event.connection);
  });
});

function addConnection(connection) {

  connection.addEventListener('message', function(event) {
    console.log('Message: ' + event.data);
    connection.send('Hey controller! I just received a message.');
  });

  connection.addEventListener('close', function(event) {
    console.log('Connection closed!', event.reason);
  });
}

メッセージを受信する接続は「message」をイベントをリッスンします。 メッセージには、文字列、Blob、ArrayBuffer、ArrayBufferView を指定できます。 送信は、オブジェクトから connection.send(message) を呼び出すだけで、 コントローラまたはレシーバーの ページで行います

// Controller page

function onSendMessageButtonClick() {
  presentationConnection.send('Hello!');
}

presentationConnection.addEventListener('message', function(event) {
  console.log('I just received ' + event.data + ' from the receiver.');
});

サンプルを試してみる: https://googlechrome.github.io/samples/presentation-api/ 説明します。私と同じくらいお楽しみいただけると思います。

サンプルとデモ

この記事で使用した Chrome の公式サンプルをご覧ください。

Photowall のインタラクティブなデモもおすすめです。このウェブアプリにより、 複数のコントローラを使用して、同じデバイスで 表示されなくなります。コードの入手先: https://github.com/GoogleChromeLabs/presentation-api-samples.

<ph type="x-smartling-placeholder">
</ph> フォトウォールのデモのスクリーンショット <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> 写真 作成者: José Luis Mieza / CC BY-NC-SA 2.0

終わりに

Chrome には「キャスト」機能があるブラウザ メニューにアクセスしている最中に、ユーザーがいつでも 確認できますこのメニューのデフォルトの表示方法を設定する場合は、 navigator.presentation.defaultRequest をカスタム 先ほど作成した presentationRequest オブジェクト。

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

開発のヒント

レシーバー ページを調べてデバッグするには、内部 chrome://inspect ページで [その他] を選択し、 URL を返します。

<ph type="x-smartling-placeholder">
</ph> プレゼンテーション レシーバー ページを調べる <ph type="x-smartling-placeholder">
</ph> プレゼンテーション レシーバー ページを調べる
をご覧ください。

また、社内の chrome://media-router-internals もご覧ください。 を使用して、社内の調査/可用性プロセスの詳細を確認できます。

次のステップ

Chrome 66 では、ChromeOS、Linux、Windows の各プラットフォームがサポートされています。Mac 後にサポートされる予定です。

リソース