Ghi âm và chụp ảnh màn hình

Hướng dẫn này giải thích các phương pháp ghi âm và quay video từ một thẻ, cửa sổ hoặc màn hình bằng các API như chrome.tabCapture hoặc getDisplayMedia().

Ghi màn hình

Để ghi lại màn hình, hãy gọi getDisplayMedia() để kích hoạt hộp thoại hiển thị bên dưới. Nhờ vậy, người dùng có thể chọn thẻ, cửa sổ hoặc màn hình mà họ muốn chia sẻ, đồng thời cung cấp chỉ báo rõ ràng rằng quá trình ghi đang diễn ra.

Ví dụ sau đây yêu cầu quyền truy cập để ghi cả âm thanh và video.

const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });

Nếu được gọi trong tập lệnh nội dung, quá trình ghi sẽ tự động kết thúc khi người dùng chuyển đến một trang mới. Để ghi trong nền và qua các thao tác điều hướng, hãy sử dụng tài liệu ngoài màn hình với lý do DISPLAY_MEDIA.

Chụp thẻ dựa trên cử chỉ của người dùng

Khi gọi getDisplayMedia(), trình duyệt sẽ hiển thị một hộp thoại hỏi người dùng xem họ muốn chia sẻ nội dung gì. Tuy nhiên, trong một số trường hợp, người dùng vừa nhấp vào nút hành động để gọi tiện ích cho một thẻ cụ thể và bạn muốn bắt đầu thu thập thẻ ngay lập tức mà không cần lời nhắc này.

Ghi âm và quay video trong nền

Kể từ Chrome 116, bạn có thể gọi API chrome.tabCapture trong trình chạy dịch vụ để lấy mã nhận dạng luồng sau cử chỉ của người dùng. Sau đó, thông tin này có thể được truyền đến một tài liệu ngoài màn hình để bắt đầu quay.

Trong trình chạy dịch vụ:

chrome.action.onClicked.addListener(async (tab) => {
  const existingContexts = await chrome.runtime.getContexts({});

  const offscreenDocument = existingContexts.find(
    (c) => c.contextType === 'OFFSCREEN_DOCUMENT'
  );

  // If an offscreen document is not already open, create one.
  if (!offscreenDocument) {
    // Create an offscreen document.
    await chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from chrome.tabCapture API',
    });
  }

  // Get a MediaStream for the active tab.
  const streamId = await chrome.tabCapture.getMediaStreamId({
    targetTabId: tab.id
  });

  // Send the stream ID to the offscreen document to start recording.
  chrome.runtime.sendMessage({
    type: 'start-recording',
    target: 'offscreen',
    data: streamId
  });
});

Sau đó, trong tài liệu ngoài màn hình:

chrome.runtime.onMessage.addListener(async (message) => {
  if (message.target !== 'offscreen') return;
  
  if (message.type === 'start-recording') {
    const media = await navigator.mediaDevices.getUserMedia({
      audio: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
      video: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
    });

    // Continue to play the captured audio to the user.
    const output = new AudioContext();
    const source = output.createMediaStreamSource(media);
    source.connect(output.destination);

    // TODO: Do something to recording the MediaStream.
  }
});

Để biết ví dụ đầy đủ, hãy xem mẫu Ghi thẻ – Trình ghi.

Ghi âm và quay video trong thẻ mới

Trước Chrome 116, bạn không thể sử dụng API chrome.tabCapture trong trình chạy dịch vụ hoặc sử dụng mã luồng do API đó tạo trong tài liệu ngoài màn hình. Cả hai phương pháp này đều là yêu cầu cho phương pháp trên.

Thay vào đó, bạn có thể mở trang tiện ích trong thẻ hoặc cửa sổ mới, đồng thời trực tiếp lấy luồng. Thiết lập thuộc tính targetTabId để chụp đúng thẻ.

Bắt đầu bằng cách mở trang tiện ích (có thể trong cửa sổ bật lên hoặc trình chạy dịch vụ):

chrome.windows.create({ url: chrome.runtime.getURL("recorder.html") });

Sau đó, trong trang tiện ích:

chrome.tabCapture.getMediaStreamId({ targetTabId: tabId }, async (id) => {
  const media = await navigator.mediaDevices.getUserMedia({
    audio: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
    video: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
  });

  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(media);
  source.connect(output.destination);
});

Ngoài ra, hãy cân nhắc sử dụng phương pháp ghi màn hình. Phương pháp này cho phép bạn quay video trong nền bằng tài liệu ngoài màn hình, nhưng vẫn hiển thị cho người dùng hộp thoại để chọn một thẻ, cửa sổ hoặc màn hình cần ghi.

Ghi âm trong cửa sổ bật lên

Nếu chỉ cần ghi âm, bạn có thể trực tiếp lấy một luồng trong cửa sổ bật lên của tiện ích bằng cách sử dụng chrome.tabCapture.capture. Khi cửa sổ bật lên đóng, việc ghi lại sẽ dừng lại.

chrome.tabCapture.capture({ audio: true }, (stream) => {
  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(stream);
  source.connect(output.destination);

  // TODO: Do something with the stream (e.g record it)
});

Nếu bạn muốn bản ghi duy trì qua các lần điều hướng, hãy cân nhắc sử dụng phương pháp được mô tả trong phần trước.

Các lưu ý khác

Để biết thêm thông tin về cách ghi lại sự kiện phát trực tiếp, hãy xem API MediaRecorder.