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

François Beaufort
François Beaufort
GitHub

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

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

ข้อมูลเบื้องต้น

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

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

นำเสนอหน้า

เราขอแนะนำวิธีใช้ Displayation 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 การสนับสนุนจะมีให้บริการในภายหลัง

แหล่งข้อมูล