การปรับปรุงการแชร์หน้าจอใน Chrome 109

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

เว็บแอปใช้ getDisplayMedia() เพื่อบันทึกแท็บ หน้าต่าง หรือหน้าจอเป็น MediaStream ได้อยู่แล้ว ใน Chrome 109 คุณจะใช้ประโยชน์จากการปรับปรุงต่อไปนี้ได้

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

โฟกัสแบบมีเงื่อนไข

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

const controller = new CaptureController();
// Prompt the user to share a tab, a window or a screen.
const stream =
    await navigator.mediaDevices.getDisplayMedia({ controller });

const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface === "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface === "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("no-focus-change");
}

ดูข้อมูลเพิ่มเติมได้ที่การแชร์หน้าจอที่ดีขึ้นด้วยโฟกัสแบบมีเงื่อนไข

ระงับการเล่นเสียงในเครื่อง

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

// Prompt the user to share a tab, a window or a screen with audio.
// If successful, stop the captured audio from being played out over
// the local device’s speakers.
const stream = await navigator.mediaDevices.getDisplayMedia({
  audio: { suppressLocalAudioPlayback: true },
});
const [audioTrack] = stream.getAudioTracks();
const settings = audioTrack.getSettings();
console.log(settings.suppressLocalAudioPlayback); // true

ในขณะที่เขียน suppressLocalAudioPlayback ยังไม่ได้ทำงานกับ applyConstraints() ดู Bug 1381959

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

รูปภาพหลักโดย Brett Jordan

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