คุณแชร์แท็บ หน้าต่าง และหน้าจอได้แล้วบนแพลตฟอร์มเว็บด้วย Screen Capture API กล่าวโดยสรุปคือ getDisplayMedia()
ช่วยให้ผู้ใช้เลือกหน้าจอหรือส่วนของหน้าจอ (เช่น หน้าต่าง) เพื่อจับภาพเป็นสตรีมสื่อได้ จากนั้นสตรีมนี้จะสามารถบันทึกหรือแชร์กับคนอื่นๆ ผ่านเครือข่ายได้ บทความนี้จะกล่าวถึงการเปลี่ยนแปลงล่าสุดกับ API เพื่อรักษาความเป็นส่วนตัวให้ดียิ่งขึ้นและป้องกันการแชร์ข้อมูลส่วนบุคคลโดยไม่ได้ตั้งใจ
ต่อไปนี้คือรายการการควบคุมที่คุณสามารถใช้เพื่อแชร์หน้าจอแบบรักษาความเป็นส่วนตัว
- ตัวเลือก
displaySurface
สามารถระบุได้ว่าเว็บแอปต้องการเสนอประเภทพื้นผิวการแสดงผลที่เจาะจง (แท็บ หน้าต่าง หรือหน้าจอ) - คุณใช้ตัวเลือก
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" },
});
![ภาพหน้าจอของเครื่องมือเลือกสื่อที่แสดงรายการที่เลือกไว้ล่วงหน้า](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-64dafc4173b.png?authuser=5&hl=th)
โปรดทราบว่าเราไม่มีตัวเลือกให้เลือกหน้าต่างหรือหน้าจอที่ต้องการไว้ล่วงหน้า เราออกแบบมาโดยตลอดเพราะจะทำให้เว็บแอปเหนือผู้ใช้มากเกินไป
ตัวเลือก 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",
});
![ภาพหน้าจอของเครื่องมือเลือกสื่อที่ไม่มี](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-85b3c9b30c4fa.png?authuser=5&hl=th)
โปรดทราบว่า monitorTypeSurfaces: "exclude"
ที่อาจไม่เหมาะสมจะใช้ร่วมกับ displaySurface: "monitor"
ไม่ได้
ตัวเลือก surfaceSwitching
หนึ่งในเหตุผลยอดนิยมสำหรับการแชร์ทั้งหน้าจอคือความต้องการสลับใช้แพลตฟอร์มต่างๆ อย่างราบรื่นในระหว่างเซสชัน เพื่อแก้ไขปัญหานี้ Chrome จึงแสดงปุ่มที่ช่วยให้ผู้ใช้สลับระหว่างการแชร์แท็บต่างๆ แบบไดนามิกได้ "แชร์แท็บนี้แทน" นี้ ก่อนหน้านี้ปุ่มใช้ได้กับส่วนขยาย Chrome และตอนนี้เว็บแอปใดก็ได้ที่เรียกใช้ getDisplayMedia()
แล้ว
![ภาพหน้าจอของปุ่มที่ใช้เพื่อสลับแท็บต่างๆ แบบไดนามิก](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-button-us-5e92f90d179ed.png?authuser=5&hl=th)
หากตั้งค่า 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 🦶🔫.
});
![ภาพหน้าจอของเครื่องมือเลือกสื่อไม่รวมแท็บปัจจุบัน](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-248b79ead1a5f.png?authuser=5&hl=th)
โปรดทราบว่า selfBrowserSurface: "exclude"
ที่อาจไม่เหมาะสมจะใช้ร่วมกับ preferCurrentTab: true
ไม่ได้
ตัวเลือก systemAudio
getDisplayMedia()
ช่วยให้บันทึกเสียงควบคู่กับวิดีโอได้ แต่เสียงแต่ละคนไม่ได้มีความสำคัญเท่าๆ กัน ลองใช้เว็บแอปการประชุมทางวิดีโอ
- หากผู้ใช้แชร์แท็บอื่น ก็ควรบันทึกเสียงไว้ด้วย
- เสียงของระบบก็จะรวมถึงผู้เข้าร่วมจากระยะไกล เสียงของตนเอง และไม่ควรส่งกลับไปยัง
ในอนาคตคุณอาจแยกแหล่งที่มาของเสียงบางแหล่งออกจากการบันทึกได้ แต่ในปัจจุบัน เว็บแอปการประชุมทางวิดีโอมักจะเป็นวิธีที่ดีที่สุดในการหลีกเลี่ยงการบันทึกเสียงของระบบ ซึ่งก่อนหน้านี้ทำได้โดยตรวจสอบหน้าจอที่ผู้ใช้เลือกและหยุดแทร็กเสียงหากเลือกแชร์หน้าจอ อย่างไรก็ตาม สิ่งนี้ก่อให้เกิดปัญหาเล็กๆ น้อยๆ คือผู้ใช้บางรายอาจสับสนเมื่อเลือกช่องทำเครื่องหมายอย่างชัดแจ้งเพื่อแชร์เสียงของระบบ จากนั้นผู้เข้าร่วมระยะไกลจะแจ้งว่าไม่มีเสียงเข้ามา
![ภาพหน้าจอของเครื่องมือเลือกสื่อที่แสดงการแชร์เสียงของแท็บ](https://developer.chrome.google.cn/static/docs/web-platform/screen-sharing-controls/image/screenshots-media-picker-5a6ebb73dd84c.jpg?authuser=5&hl=th)
เมื่อตั้งค่า 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 โปรดใส่รายละเอียดให้มากที่สุดเท่าที่ทำได้ และวิธีการง่ายๆ ในการทำให้เนื้อหาเกิดซ้ำ Glitch เหมาะสำหรับการแชร์โค้ด
แสดงการสนับสนุน
คุณวางแผนที่จะใช้การควบคุมการแชร์หน้าจอดังกล่าวไหม การสนับสนุนสาธารณะของคุณช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ ทราบว่าการสนับสนุนนั้นสำคัญเพียงใด
ส่งทวีตไปที่ @ChromiumDev และแจ้งให้เราทราบว่าคุณใช้งานที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- ข้อกำหนด
- คำอธิบาย
displaySurface
- คำอธิบาย
monitorTypeSurfaces
- คำอธิบาย
surfaceSwitching
- คำอธิบาย
selfBrowserSurface
- คำอธิบาย
systemAudio
- ตรวจสอบ TAG
กิตติกรรมประกาศ
รูปภาพหลักโดย John Schnobrich
ขอขอบคุณ Rachel Andrew ที่อ่านบทความนี้