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

François Beaufort
François Beaufort
GitHub

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.

1/2. Người dùng chọn một màn hình phụ đi 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 tự động hiển thị với màn hình đã chọn trước đó
2/2. Một trang web sẽ tự động xuất hiện trên màn hình đã chọn trước đó

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.

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 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.

Ảnh chụp màn hình bản minh hoạ 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 đ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ị.

Kiểm tra các trang về trình nhận bản trình bày
Kiểm tra trang về bộ 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 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