คุณสามารถแชร์แท็บ หน้าต่าง และหน้าจอในแพลตฟอร์มเว็บได้อยู่แล้วด้วย API การจับภาพหน้าจอ สรุปสั้นๆ ก็คือ getDisplayMedia()
ช่วยให้ผู้ใช้เลือกหน้าจอหรือส่วนของหน้าจอ (เช่น หน้าต่าง) ที่จะจับภาพเป็นสตรีมสื่อได้ จากนั้น สตรีมนี้จะถูกบันทึกหรือแชร์กับคนอื่นๆ ผ่านเครือข่าย บทความนี้จะกล่าวถึงการเปลี่ยนแปลงบางอย่างกับ API เมื่อเร็วๆ นี้เพื่อรักษาความเป็นส่วนตัวให้ดียิ่งขึ้นและป้องกันการแชร์ข้อมูลส่วนบุคคลโดยไม่ได้ตั้งใจ
ต่อไปนี้เป็นรายการการควบคุมที่คุณใช้สำหรับการแชร์หน้าจอแบบรักษาความเป็นส่วนตัวได้
- ตัวเลือก
displaySurface
สามารถระบุได้ว่าเว็บแอปต้องการเสนอประเภทพื้นผิว Display ที่เฉพาะเจาะจง (แท็บ หน้าต่าง หรือหน้าจอ) - โดยจะใช้ตัวเลือก
monitorTypeSurfaces
เพื่อป้องกันไม่ให้ผู้ใช้แชร์ทั้งหน้าจอได้ - ตัวเลือก
surfaceSwitching
จะระบุว่า Chrome ควรอนุญาตให้ผู้ใช้สลับระหว่างแท็บที่แชร์แบบไดนามิกหรือไม่ - ใช้ตัวเลือก
selfBrowserSurface
เพื่อป้องกันไม่ให้ผู้ใช้แชร์แท็บปัจจุบันได้ ซึ่งจะเป็นการหลีกเลี่ยงเอฟเฟกต์ "กระจกเงา" - ตัวเลือก
systemAudio
จะช่วยให้ Chrome นำเสนอเฉพาะการบันทึกเสียงที่เกี่ยวข้องให้แก่ผู้ใช้เท่านั้น
การเปลี่ยนแปลงของ getDisplayMedia()
ได้ทำการเปลี่ยนแปลงต่อไปนี้กับ getDisplayMedia()
ตัวเลือก displaySurface
เว็บแอปที่มีเส้นทางของผู้ใช้แบบเฉพาะทางซึ่งทำงานได้ดีที่สุดกับการแชร์หน้าต่างหรือหน้าจอ จะยังคงขอให้ Chrome เสนอหน้าต่างหรือหน้าจอให้เด่นชัดขึ้นในเครื่องมือเลือกสื่อได้ ลำดับของข้อเสนอจะไม่เปลี่ยนแปลง แต่จะเลือกแผงที่เกี่ยวข้องไว้ล่วงหน้า
ค่าสำหรับตัวเลือก displaySurface
มีดังนี้
"browser"
สำหรับแท็บ"window"
สำหรับ Windows"monitor"
สำหรับหน้าจอ
const stream = await navigator.mediaDevices.getDisplayMedia({
// Pre-select the "Window" pane in the media picker.
video: { displaySurface: "window" },
});
โปรดทราบว่าเราไม่มีตัวเลือกให้เลือกหน้าต่างหรือหน้าจอที่เฉพาะเจาะจงไว้ล่วงหน้า ระบบออกแบบมาให้เป็นเช่นนี้เพราะจะทำให้เว็บแอปมีอำนาจเหนือผู้ใช้มากเกินไป
ตัวเลือก monitorTypeSurfaces
ขณะนี้เว็บแอปการประชุมทางวิดีโอตั้งค่า monitorTypeSurfaces
เป็น "exclude"
ได้แล้ว เพื่อปกป้องบริษัทจากการรั่วไหลของข้อมูลส่วนตัวผ่านข้อผิดพลาดของพนักงาน จากนั้น Chrome จะยกเว้นหน้าจอในเครื่องมือเลือกสื่อ หากต้องการรวมไว้ ให้ตั้งค่าเป็น "include"
ปัจจุบันค่าเริ่มต้นของ monitorTypeSurfaces
คือ "include"
แต่เราขอแนะนําให้ตั้งค่าดังกล่าวอย่างชัดแจ้ง เนื่องจากค่าเริ่มต้นอาจเปลี่ยนแปลงได้ในอนาคต
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Remove the "Entire Screen" pane in the media picker.
monitorTypeSurfaces: "exclude",
});
โปรดทราบว่า monitorTypeSurfaces: "exclude"
อย่างชัดเจนไม่เกี่ยวข้องกับ displaySurface: "monitor"
ตัวเลือก surfaceSwitching
เหตุผลหนึ่งที่ผู้คนพูดถึงมากที่สุดสำหรับการแชร์ทั้งหน้าจอคือความต้องการที่จะสลับระหว่างการแชร์แพลตฟอร์มต่างๆ ในเซสชันหนึ่งอย่างราบรื่น ในการแก้ปัญหานี้ Chrome จึงได้แสดงปุ่มที่ให้ผู้ใช้สลับระหว่างการแชร์แท็บต่างๆ แบบไดนามิก ก่อนหน้านี้ปุ่ม "แชร์แท็บนี้แทน" มีอยู่ในส่วนขยาย Chrome และตอนนี้สามารถใช้กับเว็บแอปใดก็ได้ที่เรียกใช้ getDisplayMedia()
หากตั้งค่า surfaceSwitching
เป็น "include"
เบราว์เซอร์จะแสดงปุ่มดังกล่าว หากตั้งค่าเป็น "exclude"
ระบบจะไม่แสดงปุ่มนั้นแก่ผู้ใช้ เราแนะนำให้เว็บแอปกำหนดค่าที่ชัดเจนเนื่องจาก Chrome อาจเปลี่ยนแปลงค่าเริ่มต้นเมื่อเวลาผ่านไป
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Ask Chrome to expose browser-level UX elements that allow
// the user to switch the underlying track at any time,
// initiated by the user and without prior action by the web app.
surfaceSwitching: "include"
});
ตัวเลือก selfBrowserSurface
ในสถานการณ์ของการประชุมทางวิดีโอ ผู้ใช้มักจะเลือกแท็บการประชุมทางวิดีโอผิดเอง ซึ่งทำให้เกิดเอฟเฟกต์ "กระจกเงา" เสียงหอน และความสับสนโดยทั่วไป
คุณสามารถตั้งค่าเว็บแอปการประชุมทางวิดีโอของ selfBrowserSurface
เป็น "exclude"
เพื่อปกป้องผู้ใช้จากตนเอง จากนั้น Chrome จะไม่รวมแท็บปัจจุบันจากรายการแท็บที่แสดงต่อผู้ใช้ หากต้องการรวมไว้ ให้ตั้งค่าเป็น "include"
ปัจจุบันค่าเริ่มต้นของ selfBrowserSurface
คือ "exclude"
แต่เราขอแนะนําให้ตั้งค่าดังกล่าวอย่างชัดแจ้ง เนื่องจากค่าเริ่มต้นอาจเปลี่ยนแปลงได้ในอนาคต
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
selfBrowserSurface: "exclude" // Avoid 🦶🔫.
});
โปรดทราบว่า selfBrowserSurface: "exclude"
อย่างชัดแจ้งจะใช้ร่วมกับ preferCurrentTab: true
ไม่ได้
ตัวเลือก systemAudio
getDisplayMedia()
ช่วยให้บันทึกเสียงควบคู่กับวิดีโอได้ แต่เสียงออกมาไม่ได้เท่ากันทั้งหมด พิจารณาเว็บแอปการประชุมทางวิดีโอ ดังนี้
- หากผู้ใช้แชร์แท็บอื่น ก็ควรบันทึกเสียงด้วย
- ในทางกลับกัน เสียงของระบบจะรวมเสียงของผู้เข้าร่วมจากระยะไกล และไม่ควรส่งกลับไปหาผู้เข้าร่วมเหล่านั้น
ในอนาคต คุณอาจยกเว้นแหล่งที่มาของเสียงบางแหล่งจากการบันทึกได้ แต่ในปัจจุบัน เว็บแอปการประชุมทางวิดีโอมักพบวิธีที่ดีที่สุดในการหลีกเลี่ยงการบันทึกเสียงของระบบ ซึ่งก่อนหน้านี้ทำได้โดยตรวจสอบจอแสดงผลที่ผู้ใช้เลือก และหยุดแทร็กเสียงหากผู้ใช้เลือกแชร์หน้าจอ อย่างไรก็ตาม กรณีนี้ก่อให้เกิดปัญหาเล็กน้อย กล่าวคือผู้ใช้บางรายเกิดความสับสนเมื่อเลือกช่องทำเครื่องหมายอย่างชัดแจ้งเพื่อแชร์เสียงของระบบ จากนั้นผู้เข้าร่วมจากระยะไกลจะได้รับแจ้งว่าไม่มีเสียงใดๆ เข้ามา
การตั้งค่า systemAudio
เป็น "exclude"
จะทําให้เว็บแอปหลีกเลี่ยงการรบกวนผู้ใช้ผ่านสัญญาณที่หลากหลายได้ Chrome จะเสนอการบันทึกเสียงไปพร้อมกับแท็บและหน้าต่าง แต่จะไม่เสนอข้างหน้าจอ
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true, // Ask to capture audio; caveat follows.
systemAudio: "exclude" // Do not offer to capture *system* audio.
});
ปัจจุบันค่าเริ่มต้นของ systemAudio
คือ "include"
แต่เราขอแนะนําให้ตั้งค่าดังกล่าวอย่างชัดแจ้ง เนื่องจากค่าเริ่มต้นอาจเปลี่ยนแปลงได้ในอนาคต
การสาธิต
คุณทดลองใช้ตัวควบคุมการแชร์หน้าจอเหล่านี้ได้โดยเรียกใช้การสาธิตใน Glitch โปรดดูซอร์สโค้ด
การสนับสนุนเบราว์เซอร์
displaySurface
,surfaceSwitching
และselfBrowserSurface
พร้อมใช้งานใน Chrome 107 บนเดสก์ท็อป
การสนับสนุนเบราว์เซอร์
- 105
- 105
- x
- x
systemAudio
พร้อมใช้งานใน Chrome 105 บนเดสก์ท็อป
การสนับสนุนเบราว์เซอร์
- 119
- 119
- x
- x
monitorTypeSurfaces
พร้อมใช้งานใน Chrome 119 บนเดสก์ท็อป
ความคิดเห็น
ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบข้อมูลเกี่ยวกับประสบการณ์ที่คุณได้รับจากการควบคุมการแชร์หน้าจอ
บอกให้เราทราบเกี่ยวกับการออกแบบ
มีบางอย่างเกี่ยวกับการควบคุมการแชร์หน้าจอที่ไม่เป็นไปตามที่คุณคาดหวังบ้างไหม หรือมีเมธอดหรือคุณสมบัติที่คุณจำเป็นต้องใช้ในการนำแนวคิดของคุณไปปฏิบัติจริงหรือไม่ หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลการรักษาความปลอดภัย
- ยื่นปัญหาด้านข้อมูลจำเพาะในที่เก็บของ GitHub หรือเพิ่มความคิดของคุณเกี่ยวกับปัญหาที่มีอยู่
มีปัญหาเกี่ยวกับการติดตั้งใช้งานใช่ไหม
คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจากข้อกำหนดหรือไม่
- รายงานข้อบกพร่องที่ https://new.crbug.com และอย่าลืมใส่รายละเอียดให้มากที่สุด รวมถึงวิธีการง่ายๆ ในการผลิตซ้ำ ภาพแตกเหมาะสำหรับการแชร์รหัส
แสดงการสนับสนุน
มีแผนจะใช้ตัวควบคุมการแชร์หน้าจอไหม การสนับสนุนแบบสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนนั้นสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev และบอกเราว่าคุณใช้งานฟีเจอร์นี้ที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- ข้อกำหนด
- คำอธิบาย
displaySurface
- คำอธิบาย
monitorTypeSurfaces
- คำอธิบาย
surfaceSwitching
- คำอธิบาย
selfBrowserSurface
- คำอธิบาย
systemAudio
- การตรวจสอบ TAG
กิตติกรรมประกาศ
รูปภาพหลักโดย John Schnobrich
ขอขอบคุณ Rachel Andrew ที่อ่านบทความนี้