Hiển thị trang web đến màn hình phụ đính kèm

François Beaufort
François Beaufort

Chrome 66 cho phép các trang web sử dụng màn hình phụ đính kèm thông qua API trình bày và kiểm soát nội dung của màn hình thông qua API Trình nhận bản trình bày.

1/2. Người dùng chọn một màn hình phụ đính kèm
1/2. Người dùng chọn một màn hình phụ đính kèm
2/2. Một trang web sẽ tự động hiển thị trên màn hình đã chọn trước đó
2/2. Một trang web sẽ tự động hiển thị trên màn hình đã chọn trước đó

Thông tin khái quát

Cho đến nay, các nhà phát triển web có thể xây dựng trải nghiệm mà trong đó người dùng sẽ 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 mà vẫn có thể kiểm soát cục bộ trải nghiệm đó. Ví dụ như quản lý hàng đợi phát trên youtube.com khi video phát trên TV hoặc nhìn thấy một cuộn trang trình bày 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 được hiển thị trong một phiên Hangout.

Có những trường hợp mà người dùng có thể chỉ muốn trình bày nội dung trên màn hình thứ hai, đính kèm. 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 vào 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 trên 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 cho 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ơ cấp (ví dụ: bật cửa sổ mới mà người dùng phải kéo vào màn hình phụ và phóng to ra toàn màn hình theo cách thủ công), nhưng việc 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 một trang

Tôi sẽ hướng dẫn bạn cách sử dụng API Bản trình bày để trình bày một trang web trên màn hình phụ đính kèm của bạn. Bạn có thể xem kết quả cuối cùng 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 trình bày 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);
  });

Việc hiển thị lời nhắc hiển thị bản trình bày yêu cầu một cử chỉ của người dùng, chẳng hạn như nhấp vào một nút. Vì vậy, hãy gọi presentationRequest.start() khi nhấp vào nút và chờ lời hứa được 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ụ đính 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 mà người dùng thấy cũng có thể bao gồm các điểm cuối từ xa, chẳng hạn như thiết bị Chromecast nếu bạn đang kết nối với một mạng quảng cáo các thiết bị đó. Xin lưu ý rằng màn hình được phản chiếu không có trong danh sách. Hãy truy cập vào http://crbug.com/840466.

Bộ chọn hiển thị bản trình bày
Bộ chọn hiển thị bản trình bày

Khi lời hứa được giải quyết, trang web tại URL đối tượng PresentationRequest sẽ hiển thị đến màn hình đã chọn. Như thế là được!

Bây giờ, chúng ta có thể tìm hiểu sâu hơn và theo dõi các sự kiện "đóng" và "kết thúc" 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

Bây giờ, bạn hãy nghĩ, điều đó thật tuyệt nhưng làm cách nào để truyền thông báo giữa trang trình điều khiển (trang chúng tôi vừa tạo) và trang trình nhận (trang chúng tôi đã chuyể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 nhận bằng navigator.presentation.receiver.connectionList và theo dõi các kết nối đến như hiển thị bên dưới.

// 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ể theo dõi. Thông báo có thể ở dạng chuỗi, Blob, ArrayBufferView hoặc ArrayBufferView. Việc gửi cũng đơn giản như gọi connection.send(message) từ trang tay điều khiển hoặc trang trình 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 dùng thử mẫu tại https://googlechrome.github.io/samples/presentation-api/ để hiểu rõ cách hoạt động của mẫu. Chắc chắn bạn sẽ thích trải nghiệm này như tôi.

Đoạn nhạc 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 dùng bản minh hoạ Photowall tương tác. Ứng dụng web này cho phép nhiều bộ điều khiển cộng tác 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.

Ảnh chụp màn hình bản minh hoạ của Photowall
Ảnh của José Luis Mieza / CC BY-NC-SA 2.0

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 kiểm soát bản trình bày mặc định của trình đơn này, hãy gán navigator.presentation.defaultRequest cho đố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 cho nhà phát triển

Để kiểm tra trang trình thu nhận và gỡ lỗi, hãy truy cập trang chrome://inspect nội bộ, chọn "Khác" rồi nhấp vào đường liên kết "kiểm tra" bên cạnh URL hiện có.

Kiểm tra các trang trình nhận bản trình bày
Kiểm tra các trang nhận bản trình bày

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 sử dụng nội bộ.

Các bước tiếp theo

Kể từ Chrome 66, các nền tảng ChromeOS, Linux và Windows được hỗ trợ. Chúng tôi sẽ hỗ trợ máy Mac sau.

Tài nguyên