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ột màn hình phụ đi kèm thông qua API Bản trình bày và để kiểm soát nội dung của API đó thông qua Bản trình bày API Bộ nhận.

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ụ đi 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 tự động hiển thị với 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 những trải nghiệm mà ở đó người dùng sẽ thấy nội dung trong Chrome khác với nội dung trẻ nhìn thấy trên điều khiển từ xa trong khi vẫn có thể kiểm soát trải nghiệm đó trên thiết bị. Ví dụ bao gồm cả việc quản lý danh sách chờ phát trên youtube.com trong khi video phát trên TV, hoặc nhìn thấy một cuộn cuộn có ghi chú của người thuyết trình trên máy tính xách tay trong khi ở chế độ toàn màn hình bản trình bày này được hiển thị trong một phiên Hangout.

Có những tình huống mà người dùng có thể chỉ muốn trình bày nội dung lên màn hình thứ hai, đi kèm. Ví dụ: hãy tưởng tượng một người dùng ở trong phòng hội thảo được trang bị máy chiếu kết nối với máy chiếu 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 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 trượt. Trong khi trang web tác giả có thể hỗ trợ điều này theo một cách rất thô tục (ví dụ: bật lên một mà người dùng phải kéo theo cách thủ công sang màn hình phụ và phóng to lên toàn màn hình), nhưng lại cồng kềnh và gây ra sự 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 API Bản trình bày để trình bày một trang web trên màn hình phụ đi kèm. Kết quả cuối cùng sẽ 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 chúng tôi 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 chuột trên nút. Chúng ta 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 bản trình bày màn hình (ví dụ: 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 điểm cuối từ xa 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ị này. Lưu ý rằng màn hình được phản chiếu không có trong danh sách. 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 thực hiện, trang web tại URL đối tượng PresentationRequest sẽ được hiển thị trên màn hình đã chọn. Thế là xong!

Giờ đây, chúng ta có thể đi xa hơn và giám sát "đóng" và "chấm dứt" các sự kiện như được hiển thị bên dưới. Lưu ý rằng bạn có thể kết nối lại với một địa chỉ trang web "đã đóng" presentationConnection 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 nghĩ, điều đó thật tuyệt nhưng làm cách nào để chuyển thông báo giữa trang điều khiển (trang chúng tôi vừa tạo) và trang người nhận (trang này 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 nhận bằng navigator.presentation.receiver.connectionList và nghe tin nhắn đến kết nối như được hiển thị 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 "tin nhắn" sự kiệ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. Bạn có thể gửi dữ liệu dễ dàng như gọi connection.send(message) từ trang điều khiển hoặc trang nhận.

// Controller page

function onSendMessageButtonClick() {
  presentationConnection.send('Hello!');
}

presentationConnection.addEventListener('message', function(event) {
  console.log('I just received ' + event.data + ' from the receiver.');
});

Phát mẫu tại https://googlechrome.github.io/samples/presentation-api/ để tìm hiểu cách thức hoạt động. 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 nhau trình chiếu ảnh một màn hình bản trình bày. Mã có 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ó tính năng "Truyền" người dùng có thể gọi bất kỳ lúc nào trong khi truy cập vào của bạn. Nếu bạn muốn điều khiển bản trình bày mặc định cho trình đơn này, thì gán navigator.presentation.defaultRequest cho một tuỳ chỉnh Đối tượng presentationRequest đã đượ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 nhận và gỡ lỗi, hãy chuyển đến chrome://inspect, hãy chọn "Khác" rồi nhấp vào đường liên kết "kiểm tra" bên cạnh URL đang hiển thị.

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

Bạn cũng nên xem 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 đều được hỗ trợ. Mac sẽ được hỗ trợ sau.

Tài nguyên