Chrome 66 อนุญาตให้หน้าเว็บใช้จอแสดงผลสำรองที่แนบผ่าน Displayation API และควบคุมเนื้อหาผ่าน Displayation Receiver API
ที่มา
ก่อนหน้านี้ นักพัฒนาเว็บสร้างประสบการณ์ที่ผู้ใช้จะเห็นเนื้อหาในเครื่องใน Chrome ที่แตกต่างจากเนื้อหาที่เห็นบนจอแสดงผลระยะไกล ขณะที่ยังคงควบคุมประสบการณ์นั้นได้จากในเครื่อง ตัวอย่างเช่น การจัดการคิวการเล่นบน youtube.com ขณะที่วิดีโอเล่นบนทีวี หรือการดูสไลด์ม้วนกระดาษที่มีบันทึกของผู้บรรยายบนแล็ปท็อป ขณะที่การนำเสนอแบบเต็มหน้าจอแสดงอยู่ในเซสชันแฮงเอาท์
แต่ก็มีบางกรณีที่ผู้ใช้อาจต้องการนำเสนอเนื้อหาบนจอแสดงผลที่แนบอยู่ ตัวอย่างเช่น สมมติว่าผู้ใช้ในห้องประชุม ติดตั้งเครื่องโปรเจ็กเตอร์ไว้ใช้เชื่อมต่อผ่านสาย 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
อีกอย่าง
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 จะมีให้บริการในภายหลัง
แหล่งข้อมูล
- สถานะฟีเจอร์ของ Chrome: https://www.chromestatus.com/features#presentation%20api
- ข้อบกพร่องในการติดตั้งใช้งาน: https://crbug.com/?q=component:Blink>PresentationAPI
- ข้อกำหนดของ API งานนำเสนอ: https://w3c.github.io/presentation-api/
- ปัญหาเกี่ยวกับข้อมูลจำเพาะ: https://github.com/w3c/presentation-api/issues