นำเสนอหน้าเว็บไปยังจอแสดงผลสำรองที่แนบอยู่

ฟร็องซัว โบฟอร์
François Beaufort
GitHub

Chrome 66 ช่วยให้หน้าเว็บใช้จอแสดงผลรองที่ต่ออยู่ผ่าน presentation API และควบคุมเนื้อหาผ่าน presentation API ตัวรับ

1/2 ผู้ใช้เลือกจอแสดงผลสำรองที่แนบอยู่
1/2 ผู้ใช้เลือกจอแสดงผลสำรองที่แนบอยู่
2/2. ระบบจะเสนอหน้าเว็บไปยังจอแสดงผลที่เลือกก่อนหน้านี้โดยอัตโนมัติ
2/2 ระบบจะนำเสนอหน้าเว็บโดยอัตโนมัติไปยังจอแสดงผลที่เลือกก่อนหน้านี้

ที่มา

ที่ผ่านมา นักพัฒนาเว็บสร้างประสบการณ์การใช้งานที่ผู้ใช้จะเห็นเนื้อหาในเครื่องใน Chrome ที่แตกต่างจากเนื้อหาที่เห็นบนจอแสดงผลระยะไกลโดยที่ยังควบคุมประสบการณ์การใช้งานดังกล่าวในเครื่องได้ ตัวอย่างเช่น การจัดการคิวการเล่นบน youtube.com ขณะเล่นวิดีโอบนทีวี หรือการเห็นคลิปสไลด์ที่มีบันทึกของผู้บรรยายบนแล็ปท็อป ขณะที่การนำเสนอแบบเต็มหน้าจอจะแสดงในเซสชันแฮงเอาท์

อย่างไรก็ตาม อาจมีบางกรณีที่ผู้ใช้อาจต้องการนำเสนอเนื้อหาในจอแสดงผลที่สองที่แนบอยู่ ตัวอย่างเช่น สมมติว่าผู้ใช้อยู่ในห้องประชุม ที่ติดตั้งโปรเจ็กเตอร์ซึ่งเชื่อมต่อผ่านสาย HDMI แทนที่จะมิเรอร์งานนำเสนอไปยังปลายทางระยะไกล ผู้ใช้ต้องการนำเสนอสไลด์แบบเต็มหน้าจอในโปรเจ็กเตอร์จริงๆ โดยปล่อยให้หน้าจอแล็ปท็อปมีไว้ดูบันทึกของผู้บรรยายและควบคุมสไลด์ แม้ว่าผู้เขียนเว็บไซต์จะสามารถสนับสนุนเรื่องนี้ได้ด้วยวิธีที่เป็นพื้นฐานมากๆ (เช่น การเปิดหน้าต่างใหม่ซึ่งผู้ใช้ต้องลากไปยังจอแสดงผลสำรองและขยายเต็มหน้าจอด้วยตนเอง) แต่ก็เป็นเรื่องยุ่งยากและให้ประสบการณ์ที่ไม่สอดคล้องกันระหว่างการนำเสนอทั้งในเครื่องและจากระยะไกล

นำเสนอหน้า

เราจะแนะนำวิธีใช้ งานนำเสนอ API เพื่อนำเสนอหน้าเว็บบนจอแสดงผลสำรองที่แนบอยู่ โปรดดูผลลัพธ์สุดท้ายที่ https://googlechrome.github.io/samples/presentation-api/

ก่อนอื่นเราจะสร้างออบเจ็กต์ PresentationRequest ใหม่ที่จะมี URL ที่ต้องการนำเสนอบนจอแสดงผลรองที่แนบอยู่

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() ด้วยการคลิกเพียงปุ่มหนึ่ง แล้วรอให้คำมั่นสัญญานั้นจบลงเมื่อผู้ใช้เลือกหน้าจองานนำเสนอแล้ว (เช่น จอแสดงผลสำรองที่แนบอยู่ตามกรณีการใช้งานของเรา)

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

เครื่องมือเลือกการแสดงงานนำเสนอ
เครื่องมือเลือกการแสดงงานนำเสนอ

เมื่อยืนยันค่าแล้ว หน้าเว็บใน URL ของออบเจ็กต์ PresentationRequest จะแสดงไปยังการแสดงผลที่เลือก เอาล่ะ!

ตอนนี้เราสามารถดำเนินการต่อและตรวจสอบเหตุการณ์ "ปิด" และ "สิ้นสุด" ดังที่แสดงด้านล่าง โปรดทราบว่าคุณเชื่อมต่อกับ presentationConnection ที่ "ปิดแล้ว" อีกครั้งได้ด้วย presentationRequest.reconnect(presentationId) โดย presentationId คือรหัสของออบเจ็กต์ presentationRequest ก่อนหน้า

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 แบบอินเทอร์แอกทีฟด้วย เว็บแอปนี้ช่วยให้ตัวควบคุมหลายตัวร่วมกันนำเสนอสไลด์รูปภาพในการแสดงงานนำเสนอได้ ดูโค้ดได้ที่ https://github.com/GoogleChromeLabs/presentation-api-samples

ภาพหน้าจอสาธิต Photowall
รูปภาพ โดย José Luis Mieza / CC BY-NC-SA 2.0

อีกสิ่งหนึ่ง

Chrome มีเมนูเบราว์เซอร์ "แคสต์" ที่ผู้ใช้เรียกใช้ได้ตลอดเวลาขณะเข้าชมเว็บไซต์ หากต้องการควบคุมงานนำเสนอเริ่มต้นสำหรับเมนูนี้ ให้กำหนด navigator.presentation.defaultRequest ให้กับออบเจ็กต์ presentationRequest ที่กำหนดเองซึ่งสร้างขึ้นก่อนหน้านี้

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

เคล็ดลับสำหรับนักพัฒนาซอฟต์แวร์

หากต้องการตรวจสอบหน้าผู้รับและแก้ไขข้อบกพร่อง ให้ไปที่หน้า chrome://inspect ภายใน เลือก "อื่นๆ" แล้วคลิกลิงก์ "ตรวจสอบ" ข้าง URL ที่แสดงอยู่ในปัจจุบัน

ตรวจสอบหน้าผู้รับงานนำเสนอ
ตรวจสอบหน้าผู้รับงานนำเสนอ

คุณยังอาจต้องการดูหน้า chrome://media-router-internals ภายในเพื่อเจาะลึกกระบวนการค้นพบ/ความพร้อมใช้งานภายใน

ขั้นตอนถัดไป

รองรับแพลตฟอร์ม ChromeOS, Linux และ Windows ตั้งแต่ Chrome 66 เป็นต้นไป ส่วนการสนับสนุนสำหรับ Mac จะพร้อมให้บริการในภายหลัง

แหล่งข้อมูล