Chrome 66 cho phép các trang web sử dụng màn hình phụ đính kèm thông qua API Bản trình bày và kiểm soát nội dung trên đó thông qua API Trình nhận bản trình bày.
Thông tin khái quát
Cho đến nay, nhà phát triển web có thể xây dựng trải nghiệm mà trong đó người dùng thấy nội dung cục bộ trong Chrome khác với nội dung họ thấy trên màn hình từ xa trong khi vẫn có thể kiểm soát trải nghiệm đó trên thiết bị. Ví dụ: quản lý hàng đợi phát trên youtube.com trong khi video phát trên TV hoặc nhìn thấy một cuộn phim có ghi chú của người thuyết trình trên máy tính xách tay trong khi bản trình bày toàn màn hình hiển thị trong phiên Hangout.
Có những trường hợp người dùng có thể chỉ muốn trình bày nội dung trên một màn hình đính kèm thứ hai. Ví dụ: hãy tưởng tượng một người dùng trong phòng hội nghị có trang bị máy chiếu và kết nối họ qua cáp HDMI. Thay vì phản chiếu bản trình bày lên một điểm cuối từ xa, người dùng thực sự muốn chiếu các trang trình bày ở chế độ toàn màn hình trên máy chiếu, để màn hình máy tính xách tay có sẵn để ghi chú của người thuyết trình và điều khiển trang trình bày. Mặc dù tác giả trang web có thể hỗ trợ việc này theo cách rất sơ lược (ví dụ: bật lên một cửa sổ mới mà sau đó người dùng phải kéo theo cách thủ công sang màn hình phụ và phóng to ra toàn màn hình), nhưng cách này cồng kềnh và mang lại trải nghiệm không nhất quán giữa bản trình bày cục bộ và từ xa.
Trình bày trang
Tôi sẽ hướng dẫn bạn cách sử dụng Trình bày API để trình bày một trang web trên màn hình phụ đính kèm. Kết quả cuối cùng có tại https://googlechrome.github.io/samples/presentation-api/.
Trước tiên, chúng ta sẽ tạo một đối tượng PresentationRequest
mới chứa URL mà chúng ta muốn hiển thị trên màn hình phụ đính kèm.
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);
});
Để hiển thị lời nhắc hiển thị bản trình bày, bạn cần thực hiện một cử chỉ của người dùng, chẳng hạn như nhấp vào nút. Vì vậy, hãy gọi presentationRequest.start()
khi nhấp vào nút và chờ lời hứa sẽ giải quyết sau khi người dùng đã chọn một màn hình trình bày (ví dụ: một màn hình phụ đi kèm trong trường hợp sử dụng của chúng ta).
function onPresentButtonClick() {
presentationRequest.start()
.then(connection => {
console.log('Connected to ' + connection.url + ', id: ' + connection.id);
})
.catch(error => {
console.log(error);
});
}
Danh sách hiển thị cho người dùng cũng có thể bao gồm các thiết bị đầu cuối từ xa như thiết bị Chromecast nếu bạn đang kết nối với một mạng đang quảng cáo các thiết bị đó. Lưu ý rằng màn hình được phản chiếu không có trong danh sách này. Hãy xem http://crbug.com/840466.
Khi lời hứa được phân giải, trang web tại URL đối tượng PresentationRequest
sẽ hiển thị với màn hình đã chọn. Thế là xong!
Bây giờ, chúng ta có thể đi sâu hơn và theo dõi các sự kiện "đóng" và "chấm dứt" như minh hoạ dưới đây. Xin lưu ý rằng bạn có thể kết nối lại với presentationConnection
"đã đóng" bằng presentationRequest.reconnect(presentationId)
, trong đó presentationId
là mã nhận dạng của đối tượng presentationRequest
trước đó.
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.');
});
Giao tiếp với trang
Giờ bạn đang suy nghĩ, điều đó thật tuyệt nhưng làm cách nào để chuyển thông báo giữa trang bộ điều khiển (trang chúng ta vừa tạo) và trang nhận (trang mà chúng ta đã truyền đến đối tượng PresentationRequest
)?
Trước tiên, hãy truy xuất các kết nối hiện có trên trang receiver bằng navigator.presentation.receiver.connectionList
và theo dõi các kết nối đến như minh hoạ dưới đây.
// 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);
});
}
Kết nối nhận được tin nhắn sẽ kích hoạt sự kiện "tin nhắn" mà bạn có thể nghe.
Thông báo có thể là một chuỗi, một Blob, ArrayBuffer hoặc ArrayBufferView.
Quá trình gửi cũng đơn giản như gọi connection.send(message)
từ trang bộ điều khiển hoặc trang bộ nhận.
// Controller page
function onSendMessageButtonClick() {
presentationConnection.send('Hello!');
}
presentationConnection.addEventListener('message', function(event) {
console.log('I just received ' + event.data + ' from the receiver.');
});
Hãy thử xem mẫu tại https://googlechrome.github.io/samples/presentation-api/ để nắm được cách hoạt động của mẫu. Tôi chắc chắn bạn sẽ thích điều này như tôi.
Mẫu và bản minh hoạ
Hãy xem mẫu Chrome chính thức mà chúng tôi sử dụng cho bài viết này.
Bạn cũng nên xem bản minh hoạ tương tác của Photowall. Ứng dụng web này cho phép nhiều bộ điều khiển cùng phối hợp trình chiếu ảnh trên màn hình bản trình bày. Bạn có thể xem mã tại https://github.com/GoogleChromeLabs/presentation-api-samples.
Một điều nữa
Chrome có trình đơn trình duyệt "Truyền" mà người dùng có thể gọi bất cứ lúc nào khi truy cập một trang web. Nếu bạn muốn điều khiển bản trình bày mặc định của trình đơn này, hãy chỉ định navigator.presentation.defaultRequest
cho một đối tượng presentationRequest
tuỳ chỉnh được tạo trước đó.
// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;
Mẹo dành cho nhà phát triển
Để kiểm tra trang receiver và gỡ lỗi, hãy truy cập trang chrome://inspect
nội bộ, chọn "Other" (Khác) rồi nhấp vào đường liên kết " Inspection" (kiểm tra) bên cạnh URL hiện được hiển thị.
Bạn cũng nên xem trang chrome://media-router-internals
nội bộ để tìm hiểu kỹ hơn về các quy trình khám phá/khả năng cung cấp nội bộ.
Bước tiếp theo
Kể từ Chrome 66, các nền tảng ChromeOS, Linux và Windows đều được hỗ trợ. Chúng tôi sẽ hỗ trợ máy Mac sau.
Tài nguyên
- Trạng thái tính năng của Chrome: https://www.chromestatus.com/features#presentation%20api
- Lỗi triển khai: https://crbug.com/?q=component:Blink>PresentationAPI
- Thông số kỹ thuật của API Bản trình bày: https://w3c.github.io/presentation-api/
- Các vấn đề về quy cách: https://github.com/w3c/presentation-api/issues