Chrome 66 允許網頁使用次要附加顯示器，透過 簡報 API，並透過簡報內容控管其內容 Receiver API。
背景
過去，網頁程式開發人員可以為當地使用者打造各種體驗 Chrome 顯示的內容與遙控器顯示的內容不同 顯示，但仍可在本機控制體驗。範例 包括管理 youtube.com 的播放佇列，同時在電視上播放影片 或是筆電上顯示附有演講者備忘稿的投影片收盤 螢幕畫面分享。
在某些情況下，使用者可能會單純想透過 第二，連接螢幕例如，假設使用者正在會議室裡 搭配透過 HDMI 傳輸線連接的投影機。 使用者並不是在遠端端點上呈現簡報， 我真的想在投影機上以全螢幕分享螢幕畫面， 筆記型電腦螢幕，可顯示演講者備忘稿和投影片控制。網站期間 作者可以透過相當基本的方式加以支持 (例如 視窗，使用者必須手動將視窗拖曳到次要顯示器上 最大化到全螢幕) 之間會很麻煩，而且會產生不一致的 能享有流暢的本機與遠端簡報體驗
分享頁面
我會逐步引導您使用 Presentation API 來分享網頁 安裝在次要連接螢幕上最終結果可在 https://googlechrome.github.io/samples/presentation-api/.
首先，我們要建立新的 PresentationRequest 物件，其中包含
我們要在次要附加顯示器上顯示的網址。
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()
等待使用者選出簡報後，等待承諾解決
螢幕 (例如在本使用案例中使用次要連接螢幕)。
function onPresentButtonClick() {
presentationRequest.start()
.then(connection => {
console.log('Connected to ' + connection.url + ', id: ' + connection.id);
})
.catch(error => {
console.log(error);
});
}
向使用者顯示的清單也可能包含遠端端點，例如 Chromecast 裝置 (前提是你已連線至用來宣傳裝置的網路)。請注意， 鏡像的螢幕不在清單中。請參閱 http://crbug.com/840466。
承諾解析時，位於 PresentationRequest 物件網址的網頁會
。呃，
我們現在可以進一步監控「關閉」以及「終止」顯示的活動
。請注意，您可以重新連線至「已關閉」
presentationConnection presentationRequest.reconnect(presentationId)
其中 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.');
});
與頁面溝通
現在你也想這麼做，但我該如何在我的
控制器頁面 (我們剛才建立的頁面) 和接收端網頁 (也就是我們建立的頁面)
我們是否已傳遞至 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);
});
}
接收訊息的連線會觸發「訊息」可監聽的事件
訊息可以是字串、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.
還有一件事
Chrome 支援投放功能瀏覽器選單使用者瀏覽
網站。如要控制這個選單的預設呈現方式，
將「navigator.presentation.defaultRequest」指派給自訂欄位
先前建立的 presentationRequest 物件。
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
開發人員提示
如要檢查接收器頁面並進行偵錯，請前往內部
選取「chrome://inspect」頁面後，選取「其他」，然後按一下旁邊的「檢查」連結
目前顯示的網址
建議您也前往內部 chrome://media-router-internals
頁面，深入瞭解內部探索/可用性程序。
後續步驟
自 Chrome 66 起，我們支援 ChromeOS、Linux 和 Windows 平台。Mac 支援服務將於稍後推出。