การปรับปรุงการแชร์หน้าจอใน 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 ที่ตรวจสอบเอกสารนี้