Cải tiến tính năng chia sẻ màn hình trong Chrome 109

François Beaufort
François Beaufort
GitHub
Elad Alon

Các ứng dụng web hiện có thể sử dụng getDisplayMedia() để chụp các thẻ, cửa sổ hoặc màn hình dưới dạng MediaStream. Kể từ Chrome 109, bạn có thể tận dụng các điểm cải tiến sau:

  • Khi tính năng chia sẻ màn hình bắt đầu, Tiêu điểm có điều kiện cho phép ứng dụng web chụp ảnh kiểm soát xem trình duyệt có đặt tiêu điểm vào thẻ hoặc cửa sổ đã chụp hay không, hoặc liệu thẻ chụp ảnh có còn hoạt động hay không.
  • Tuỳ chọn suppressLocalAudioPlayback kiểm soát việc âm thanh phát trong một thẻ có được phát qua loa cục bộ của người dùng hay không.

Tiêu điểm có điều kiện

Khi sử dụng tính năng Tiêu điểm có điều kiện, các ứng dụng web hiện có thể kiểm soát việc liệu thẻ hoặc cửa sổ đã chụp có được lấy tiêu điểm khi quá trình chụp bắt đầu hay không, hoặc liệu trang chụp có được giữ tiêu điểm hay không.

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");
}

Hãy xem bài viết Chia sẻ màn hình hiệu quả hơn bằng tính năng Tiêu điểm có điều kiện để biết thêm thông tin.

Chặn phát âm thanh cục bộ

Thông thường, các đồng nghiệp sẽ tập trung trong một phòng để một người trong số họ trình bày từ máy tính xách tay của họ cho một giải pháp hội nghị trong phòng có màn hình và loa chuyên dụng. Người trình bày thường tắt tiếng máy tính xách tay của riêng họ và sử dụng loa ngoài thường có âm lượng lớn hơn; điều này cũng đảm bảo âm thanh đồng bộ với video. Quy tắc ràng buộc về âm thanh suppressLocalAudioPlayback giúp tiết kiệm thời gian. Khi được đặt thành true, giá trị này cho biết trình duyệt sẽ ngừng chuyển tiếp âm thanh đến loa cục bộ khi quá trình quay video bắt đầu. Giá trị mặc định cho quy tắc ràng buộc này là 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

Tại thời điểm viết bài, suppressLocalAudioPlayback không hoạt động với applyConstraints(). Xem lỗi 1381959.

Lời cảm ơn

Cảm ơn Rachel Andrew đã xem xét tài liệu này.