Chrome 66 允许网页通过 Presentation API 以及通过 Presentations API 控制其内容 Receiver API。
<ph type="x-smartling-placeholder">![1 月 2 日。用户选择连接辅助显示屏](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/12-user-picks-secondar-03beeb097e67e.jpg?authuser=0000&hl=uk)
![2 月 2 日。系统会自动向之前选择的显示屏显示网页](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/22-web-page-is-automat-5dab3e95502c3.jpg?authuser=0000&hl=uk)
背景
在此之前,Web 开发者可以打造出让用户看到本地应用 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()
,
在用户选择演示文稿后等待 promise 得到解决
显示屏(例如,在我们的用例中连接的辅助显示屏)。
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。
<ph type="x-smartling-placeholder">![演示文稿显示选择器](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/presentation-display-pick-6b14dbd5ed08c.png?authuser=0000&hl=uk)
当 promise 进行解析时,PresentationRequest
对象网址处的网页为
所选显示屏上显示的内容一切就绪!
现在,我们可以更深入地监控和“terminate”事件(如下所示)
。请注意,可以重新连接到“已关闭”的
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.');
});
与页面通信
现在您在想,这很好, 但我要如何在
控制方页面(我们刚刚创建的页面)和接收方页面(即
我们已传递到 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 演示。此 Web 应用允许 多个控制器协作展示照片幻灯片 演示文稿。验证码的下载地址: https://github.com/GoogleChromeLabs/presentation-api-samples.
<ph type="x-smartling-placeholder">![Photowall 演示屏幕截图](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/photowall-demo-screenshot-10527faacc264.jpg?authuser=0000&hl=uk)
还有一件事
Chrome 具有“投射”功能用户在访问
网站。如果您想控制此菜单的默认展示方式,则
将 navigator.presentation.defaultRequest
分配给自定义
之前创建的 presentationRequest
对象。
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
开发提示
如需检查接收器页面并进行调试,请前往内部
chrome://inspect
页面上,选择“Other”,然后点击
当前显示的网址
![检查展示接收器页面](https://developer.chrome.google.cn/static/blog/present-web-pages-to-secondary-attached-displays/image/inspect-presentation-rece-260dbbca83182.png?authuser=0000&hl=uk)
您可能还需要查看内部chrome://media-router-internals
深入探究内部发现/可用性流程的页面。
后续步骤
自 Chrome 66 起,ChromeOS、Linux 和 Windows 平台均受支持。Mac 稍后会提供支持。