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

François Beaufort
François Beaufort
GitHub
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() ไม่ได้ โปรดดูข้อบกพร่อง 1381959

ขอขอบคุณ

ขอขอบคุณ Rachel Andrew ที่ตรวจสอบเอกสารนี้