แพลตฟอร์มเว็บมีScreen Capture API ที่ช่วยให้แชร์แท็บ หน้าต่าง และหน้าจอได้อยู่แล้ว เมื่อเว็บแอปเรียกใช้ getDisplayMedia() Chrome จะแจ้งให้ผู้ใช้แชร์แท็บ หน้าต่าง หรือหน้าจอกับเว็บแอปเป็นวิดีโอ MediaStreamTrack
เว็บแอปจำนวนมากที่ใช้ getDisplayMedia() จะแสดงตัวอย่างวิดีโอของพื้นผิวที่บันทึกไว้ให้ผู้ใช้ดู เช่น แอปการประชุมทางวิดีโอมักจะสตรีมวิดีโอนี้ไปยังผู้ใช้ที่อยู่ระยะไกลพร้อมทั้งแสดงวิดีโอบนHTMLVideoElementในเครื่องด้วย เพื่อให้ผู้ใช้ในเครื่องเห็นตัวอย่างของสิ่งที่ตนแชร์อยู่ตลอดเวลา
เอกสารนี้จะแนะนำ Captured Surface Control API ใหม่ใน Chrome ซึ่งช่วยให้เว็บแอปเลื่อนแท็บที่แคปเจอร์ รวมถึงอ่านและเขียนระดับการซูมของแท็บที่แคปเจอร์ได้
เหตุผลที่ควรใช้การควบคุมพื้นผิวที่บันทึก
แอปการประชุมทางวิดีโอทั้งหมดมีข้อเสียเหมือนกัน หากผู้ใช้ต้องการโต้ตอบกับแท็บหรือหน้าต่างที่บันทึกไว้ ผู้ใช้จะต้องเปลี่ยนไปใช้แพลตฟอร์มนั้น ซึ่งจะนำผู้ใช้ออกจากแอปการประชุมทางวิดีโอ ซึ่งอาจทำให้เกิดความท้าทายบางอย่าง ดังนี้
- ผู้ใช้จะมองไม่เห็นแอปที่บันทึกและฟีดวิดีโอของผู้ใช้ระยะไกลพร้อมกัน เว้นแต่จะใช้การแสดงภาพซ้อนภาพหรือหน้าต่างแบบแยกข้างกันสำหรับแท็บการประชุมทางวิดีโอและแท็บที่แชร์ ซึ่งอาจเป็นเรื่องยากในหน้าจอขนาดเล็ก
- ผู้ใช้ต้องสลับไปมาระหว่างแอปการประชุมทางวิดีโอและแพลตฟอร์มที่บันทึก
- ผู้ใช้จะเสียสิทธิ์เข้าถึงการควบคุมที่แอปวิดีโอคอนเฟอเรนซ์แสดงเมื่อไม่ได้ใช้งานแอป เช่น แอปแชทที่ฝังไว้ รีแอ็กชันด้วยอีโมจิ การแจ้งเตือนเกี่ยวกับผู้ใช้ที่ขอเข้าร่วมการโทร ตัวควบคุมมัลติมีเดียและเลย์เอาต์ รวมถึงฟีเจอร์วิดีโอคอนเฟอเรนซ์อื่นๆ ที่มีประโยชน์
- ผู้นำเสนอจะมอบสิทธิ์ควบคุมให้ผู้เข้าร่วมจากระยะไกลไม่ได้ ซึ่งทำให้เกิดสถานการณ์ที่คุ้นเคยกันดีที่ผู้ใช้ที่อยู่ระยะไกลขอให้ผู้นำเสนอเปลี่ยนสไลด์ เลื่อนขึ้นและลงเล็กน้อย หรือปรับระดับการซูม
Captured Surface Control API ช่วยแก้ปัญหาเหล่านี้
ฉันจะใช้การควบคุมพื้นผิวที่จับภาพได้อย่างไร
การใช้การควบคุมพื้นผิวที่บันทึกไว้ให้สำเร็จต้องทำตาม 2-3 ขั้นตอน เช่น การบันทึกแท็บเบราว์เซอร์อย่างชัดเจนและการขอสิทธิ์จากผู้ใช้ก่อนที่จะเลื่อนและซูมแท็บที่บันทึกไว้ได้
บันทึกแท็บเบราว์เซอร์
เริ่มต้นด้วยการแจ้งให้ผู้ใช้เลือกพื้นผิวที่จะแชร์โดยใช้ getDisplayMedia() และในกระบวนการนี้ ให้เชื่อมโยงออบเจ็กต์ CaptureController กับเซสชันการจับภาพ เราจะใช้วัตถุดังกล่าวเพื่อควบคุมพื้นผิวที่จับภาพในเร็วๆ นี้
const controller = new CaptureController(); const stream = await navigator.mediaDevices.getDisplayMedia({ controller }); จากนั้นสร้างตัวอย่างในเครื่องของพื้นผิวที่จับภาพในรูปแบบขององค์ประกอบ <video> ดังนี้
const previewTile = document.querySelector('video'); previewTile.srcObject = stream; หากผู้ใช้เลือกที่จะแชร์หน้าต่างหรือหน้าจอ ตอนนี้เราจะยังไม่ดำเนินการต่อ แต่หากผู้ใช้เลือกที่จะแชร์แท็บ เราอาจดำเนินการต่อ
const [track] = stream.getVideoTracks(); if (track.getSettings().displaySurface !== 'browser') { // Bail out early if the user didn't pick a tab. return; } ข้อความแจ้งขอสิทธิ์
การเรียกใช้ forwardWheel(), increaseZoomLevel(), decreaseZoomLevel() หรือ resetZoomLevel() เป็นครั้งแรกในออบเจ็กต์ CaptureController ที่กำหนดจะทำให้เกิดข้อความแจ้งสิทธิ์ หากผู้ใช้ให้สิทธิ์ ระบบจะอนุญาตให้เรียกใช้เมธอดเหล่านี้ต่อไปได้
ต้องมีการแตะของผู้ใช้เพื่อแสดงข้อความแจ้งขอสิทธิ์ต่อผู้ใช้ ดังนั้นแอปควรเรียกใช้เมธอดที่กล่าวถึงข้างต้นก็ต่อเมื่อมีสิทธิ์อยู่แล้ว หรือเป็นการตอบสนองต่อการแตะของผู้ใช้ เช่น click บนปุ่มที่เกี่ยวข้องในเว็บแอป
เลื่อน
เมื่อใช้ forwardWheel() แอปที่บันทึกจะส่งต่อเหตุการณ์ของล้อจากองค์ประกอบแหล่งที่มาภายในแอปที่บันทึกเองไปยัง Viewport ของแท็บที่บันทึกได้ เหตุการณ์เหล่านี้จะแยกไม่ออกจากแอปที่บันทึกไว้จากการโต้ตอบของผู้ใช้โดยตรง
หากแอปที่บันทึกใช้องค์ประกอบ <video> ที่ชื่อ "previewTile" โค้ดต่อไปนี้จะแสดงวิธีส่งต่อเหตุการณ์ล้อเลื่อนไปยังแท็บที่บันทึก
const previewTile = document.querySelector('video'); try { // Relay the user's action to the captured tab. await controller.forwardWheel(previewTile); } catch (error) { // Inspect the error. // ... } เมธอด forwardWheel() รับอินพุตเดียวซึ่งอาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้
- องค์ประกอบ HTML ที่จะส่งต่อเหตุการณ์ล้อไปยังแท็บที่จับภาพ
nullซึ่งระบุว่าควรหยุดการส่งต่อ
การเรียกใช้ forwardWheel() ที่สำเร็จจะลบล้างการเรียกใช้ก่อนหน้า
ระบบอาจปฏิเสธ Promise ที่ forwardWheel() แสดงผลในกรณีต่อไปนี้
- หากเซสชันการจับภาพยังไม่เริ่มหรือหยุดไปแล้ว
- หากผู้ใช้ไม่ได้ให้สิทธิ์ที่เกี่ยวข้อง
ซูม
การโต้ตอบกับระดับการซูมของแท็บที่แคปเจอร์จะทำผ่านCaptureController API Surface ต่อไปนี้
getSupportedZoomLevels()
เมธอดนี้จะแสดงรายการระดับการซูมที่เบราว์เซอร์รองรับสำหรับประเภทพื้นผิวที่กำลังจับภาพ ค่าในรายการนี้จะแสดงเป็นเปอร์เซ็นต์เมื่อเทียบกับ "ระดับการซูมเริ่มต้น" ซึ่งกำหนดเป็น 100% รายการจะเพิ่มขึ้นอย่างต่อเนื่องและมีค่า 100
สามารถเรียกใช้วิธีนี้ได้เฉพาะประเภทพื้นผิวการแสดงผลที่รองรับเท่านั้น ซึ่งในขณะนี้หมายถึงเฉพาะแท็บ
controller.getSupportedZoomLevels() อาจเรียกใช้ได้หากเป็นไปตามเงื่อนไขต่อไปนี้
controllerเชื่อมโยงกับการจับภาพที่ใช้งานอยู่- การจับภาพเป็นของแท็บ
ไม่เช่นนั้นระบบจะแสดงข้อผิดพลาด
"captured-surface-control" ไม่จำเป็นต้องมีสิทธิ์ในการเรียกใช้เมธอดนี้
zoomLevel
แอตทริบิวต์แบบอ่านอย่างเดียวนี้จะเก็บระดับการซูมปัจจุบันของแท็บที่แคปเจอร์ เป็นแอตทริบิวต์ที่กำหนดค่าเป็น Null ได้ และจะมีค่าเป็น null หากประเภทพื้นผิวที่จับภาพไม่มีคำจำกัดความที่สื่อความหมายของระดับการซูม ปัจจุบันระดับการซูมจะกำหนดไว้สำหรับแท็บเท่านั้น ไม่ใช่หน้าต่างหรือหน้าจอ
หลังจากสิ้นสุดการจับภาพ แอตทริบิวต์จะมีค่าระดับการซูมล่าสุด
"captured-surface-control" ไม่จำเป็นต้องมีสิทธิ์ในการอ่านแอตทริบิวต์นี้
onzoomlevelchange
ตัวแฮนเดิลเหตุการณ์นี้ช่วยให้รับฟังการเปลี่ยนแปลงระดับการซูมของแท็บที่จับภาพได้ ซึ่งอาจเกิดขึ้นในกรณีต่อไปนี้
- เมื่อผู้ใช้โต้ตอบกับเบราว์เซอร์เพื่อเปลี่ยนระดับการซูมของแท็บที่จับภาพด้วยตนเอง
- เพื่อตอบสนองต่อการเรียกใช้เมธอดการตั้งค่าการซูมของแอปที่จับภาพ (อธิบายไว้ด้านล่าง)
"captured-surface-control" ไม่จำเป็นต้องมีสิทธิ์ในการอ่านแอตทริบิวต์นี้
increaseZoomLevel(), decreaseZoomLevel() และ resetZoomLevel()
วิธีการเหล่านี้ช่วยให้สามารถจัดการระดับการซูมของแท็บที่จับภาพได้
increaseZoomLevel() และ decreaseZoomLevel() จะเปลี่ยนระดับการซูมเป็นระดับการซูมถัดไปหรือก่อนหน้าตามลำดับ ตามลำดับที่ getSupportedZoomLevels() แสดง resetZoomLevel() จะตั้งค่าเป็น 100
ต้องมี"captured-surface-control"สิทธิ์ในการเรียกใช้เมธอดเหล่านี้ หากแอปที่บันทึกไม่มีสิทธิ์นี้ ระบบจะแจ้งให้ผู้ใช้ให้สิทธิ์หรือปฏิเสธ
เมธอดเหล่านี้ทั้งหมดจะแสดงผล Promise ซึ่งจะได้รับการแก้ไขหากการเรียกสำเร็จ และจะถูกปฏิเสธในกรณีอื่นๆ สาเหตุที่อาจทำให้ถูกปฏิเสธมีดังนี้
- สิทธิ์ที่ขาดหายไป
- เรียกใช้ก่อนเริ่มการจับภาพ
- เรียกใช้หลังจากสิ้นสุดการจับภาพ
- เรียกใช้ใน
controllerที่เชื่อมโยงกับการจับภาพประเภทพื้นผิวการแสดงผลที่ไม่รองรับ (นั่นคือทุกอย่างยกเว้นการจับภาพแท็บ) - พยายามเพิ่มหรือลดค่าให้เกินค่าสูงสุดหรือต่ำสุดตามลำดับ
โปรดทราบว่าเราขอแนะนำให้หลีกเลี่ยงการโทรหา decreaseZoomLevel() หาก controller.zoomLevel == controller.getSupportedZoomLevels().at(0) และป้องกันการโทรหา increaseZoomLevel() ในลักษณะเดียวกันกับ .at(-1)
ตัวอย่างต่อไปนี้แสดงวิธีอนุญาตให้ผู้ใช้เพิ่มระดับการซูมของแท็บที่บันทึกได้โดยตรงจากแอปที่บันทึก
const zoomIncreaseButton = document.getElementById('zoomInButton'); zoomIncreaseButton.addEventListener('click', async (event) => { if (controller.zoomLevel >= controller.getSupportedZoomLevels().at(-1)) { return; } try { await controller.increaseZoomLevel(); } catch (error) { // Inspect the error. // ... } }); ตัวอย่างต่อไปนี้แสดงวิธีตอบสนองต่อการเปลี่ยนแปลงระดับการซูมของแท็บที่บันทึกไว้
controller.addEventListener('zoomlevelchange', (event) => { const zoomLevelLabel = document.querySelector('#zoomLevelLabel'); zoomLevelLabel.textContent = `${controller.zoomLevel}%`; }); การตรวจหาฟีเจอร์
หากต้องการตรวจสอบว่าระบบรองรับ Captured Surface Control API หรือไม่ ให้ใช้คำสั่งต่อไปนี้
if (!!window.CaptureController?.prototype.forwardWheel) { // CaptureController forwardWheel() is supported. } คุณยังใช้พื้นผิวอื่นๆ ของ Captured Surface Control API เช่น increaseZoomLevel หรือ decreaseZoomLevel หรือตรวจสอบทั้งหมดได้ด้วย
การสนับสนุนเบราว์เซอร์
การควบคุมพื้นผิวที่จับภาพพร้อมใช้งานจาก Chrome 136 บนเดสก์ท็อปเท่านั้น
ความปลอดภัยและความเป็นส่วนตัว
นโยบายสิทธิ์ของ "captured-surface-control" ช่วยให้คุณจัดการวิธีที่แอปบันทึกและ iframe ของบุคคลที่สามที่ฝังไว้เข้าถึงการควบคุมพื้นผิวที่บันทึกได้ หากต้องการทำความเข้าใจข้อแลกเปลี่ยนด้านความปลอดภัย โปรดดูส่วนข้อควรพิจารณาด้านความเป็นส่วนตัวและความปลอดภัยของคำอธิบายเกี่ยวกับตัวควบคุมพื้นผิวที่จับภาพ
สาธิต
คุณสามารถลองใช้การควบคุมพื้นผิวที่จับภาพได้โดยเรียกใช้เดโม
ความคิดเห็น
ทีม Chrome และชุมชนมาตรฐานเว็บอยากทราบประสบการณ์การใช้งานการควบคุมพื้นผิวที่บันทึกไว้ของคุณ
บอกเราเกี่ยวกับการออกแบบ
มีอะไรเกี่ยวกับฟีเจอร์การจับภาพพื้นผิวที่ทำงานไม่เป็นไปตามที่คุณคาดหวังไว้ไหม หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องใช้เพื่อนำไอเดียไปใช้ไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อกำหนดในที่เก็บ GitHub หรือแสดงความคิดเห็นในปัญหาที่มีอยู่
หากพบปัญหาในการติดตั้งใช้งาน
หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งานแตกต่างจากข้อกำหนด ยื่นข้อบกพร่องที่ https://new.crbug.com โปรดระบุรายละเอียดให้มากที่สุดเท่าที่จะทำได้ รวมถึงวิธีการจำลองปัญหา