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

ฟร็องซัว โบฟอร์
François Beaufort
GitHub
เอลัด อลอน
Elad Alon
GitHub

คุณสามารถแชร์แท็บ หน้าต่าง และหน้าจอในแพลตฟอร์มเว็บได้อยู่แล้วด้วย 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()

ภาพหน้าจอของปุ่มที่ใช้ในการสลับระหว่างการแชร์แท็บต่างๆ แบบไดนามิก
ปุ่ม "แชร์แท็บนี้แทน" ใน 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 โดยจะปรากฏเพียงแท็บที่ 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 โปรดดูซอร์สโค้ด

การสนับสนุนเบราว์เซอร์

การสนับสนุนเบราว์เซอร์

  • 107
  • 107
  • x
  • 11.1

แหล่งที่มา

  • 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 และบอกเราว่าคุณใช้งานฟีเจอร์นี้ที่ไหนและอย่างไร

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

รูปภาพหลักโดย John Schnobrich

ขอขอบคุณ Rachel Andrew ที่อ่านบทความนี้