การควบคุมการแชร์หน้าจอที่รักษาความเป็นส่วนตัว

François Beaufort

Elad Alon

การแชร์แท็บ หน้าต่าง และหน้าจอบนแพลตฟอร์มเว็บทำได้แล้วด้วย 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" },
});

ระบบจะเลือกแผง "หน้าต่าง" ไว้ล่วงหน้าในเครื่องมือเลือกสื่อ

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

ตัวเลือก 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() ก็สามารถใช้ได้

ปุ่ม "แชร์แท็บนี้แทน" ใน Chrome

หากตั้งค่า 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 🦶🔫.
});

ระบบจะยกเว้นแท็บปัจจุบัน เหลือเพียงแท็บที่ 2 เท่านั้น

โปรดทราบว่า selfBrowserSurface: "exclude" ที่อาจไม่เหมาะสมจะใช้ร่วมกับ preferCurrentTab: true ไม่ได้

ตัวเลือก systemAudio

getDisplayMedia() อนุญาตให้บันทึกเสียงควบคู่ไปกับวิดีโอ แต่เสียงแต่ละแบบก็มีความแตกต่างกัน ลองพิจารณาเว็บแอปการประชุมทางวิดีโอ ดังนี้ - หากผู้ใช้แชร์แท็บอื่น คุณควรบันทึกเสียงด้วย - ในทางกลับกัน เสียงของระบบจะรวมเสียงของผู้เข้าร่วมจากระยะไกล และไม่ควรส่งกลับไปยังผู้เข้าร่วมเหล่านั้น

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

การแชร์เสียงของแท็บจะแสดงในแผง "แท็บ Chrome" แต่จะไม่แสดงในแผง "ทั้งหน้าจอ"

การตั้งค่า 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 repo หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

พบปัญหาในการติดตั้งใช้งานใช่ไหม

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งานแตกต่างจากข้อมูลจำเพาะหรือไม่

• รายงานข้อบกพร่องที่ https://new.crbug.com โปรดระบุรายละเอียดให้มากที่สุดและวิธีการจำลองปัญหา Glitch ทำงานได้ดีสำหรับการแชร์โค้ด

แสดงการสนับสนุน

คุณวางแผนที่จะใช้การควบคุมการแชร์หน้าจอดังกล่าวไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ต่างๆ ได้ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ

โปรดทวีตถึง @ChromiumDev และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

• ข้อกำหนด
• displaySurface explainer
• monitorTypeSurfaces explainer
• surfaceSwitching explainer
• คำอธิบาย selfBrowserSurface
• systemAudio explainer
• การตรวจสอบแท็ก

กิตติกรรมประกาศ

ขอขอบคุณ Rachel Andrew ที่เขียนรีวิว