Chrome 66 允許網頁使用次要附加顯示器,透過 簡報 API,並透過簡報內容控管其內容 Receiver API。
![1/2.使用者選擇次要連接螢幕](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/12-user-picks-secondar-03beeb097e67e.jpg?authuser=19&hl=zh-tw)
![2/2。網頁會自動顯示在先前所選的顯示畫面中](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/22-web-page-is-automat-5dab3e95502c3.jpg?authuser=19&hl=zh-tw)
背景
過去,網頁程式開發人員可以為當地使用者打造各種體驗 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。
![簡報顯示選擇器](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/presentation-display-pick-6b14dbd5ed08c.png?authuser=19&hl=zh-tw)
承諾解析時,位於 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.
![Photowall 示範螢幕截圖](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/photowall-demo-screenshot-10527faacc264.jpg?authuser=19&hl=zh-tw)
還有一件事
Chrome 支援投放功能瀏覽器選單使用者瀏覽
網站。如要控制這個選單的預設呈現方式,
將「navigator.presentation.defaultRequest
」指派給自訂欄位
先前建立的 presentationRequest
物件。
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
開發人員提示
如要檢查接收器頁面並進行偵錯,請前往內部
選取「chrome://inspect
」頁面後,選取「其他」,然後按一下旁邊的「檢查」連結
目前顯示的網址
![檢查簡報接收器頁面](https://developer.chrome.com/static/blog/present-web-pages-to-secondary-attached-displays/image/inspect-presentation-rece-260dbbca83182.png?authuser=19&hl=zh-tw)
建議您也前往內部 chrome://media-router-internals
頁面,深入瞭解內部探索/可用性程序。
後續步驟
自 Chrome 66 起,我們支援 ChromeOS、Linux 和 Windows 平台。Mac 支援服務將於稍後推出。