chrome.tabCapture

Mô tả

Sử dụng API chrome.tabCapture để tương tác với luồng nội dung nghe nhìn trên thẻ.

Quyền

tabCapture

Tổng quan

API chrome.tabCapture cho phép bạn truy cập vào MediaStream chứa video và âm thanh của thẻ hiện tại. Cuộc gọi chỉ có thể được gọi sau khi người dùng gọi một tiện ích, chẳng hạn như bằng bằng cách nhấp vào nút hành động của tiện ích. Điều này tương tự như hành vi của Quyền activeTab.

Duy trì âm thanh hệ thống

Khi nhận được MediaStream cho một thẻ, âm thanh trong thẻ đó sẽ không được phát nữa cho người dùng. Điều này tương tự như hành vi của hàm getDisplayMedia() khi cờ suppressLocalAudioPlayback được đặt thành true.

Để tiếp tục phát âm thanh cho người dùng, hãy sử dụng các thiết bị sau:

const output = new AudioContext();
const source = output.createMediaStreamSource(stream);
source.connect(output.destination);

Thao tác này sẽ tạo một AudioContext mới và kết nối âm thanh của MediaStream trên thẻ với âm thanh mặc định đích.

Mã luồng

Việc gọi chrome.tabCapture.getMediaStreamId sẽ trả về một mã luồng. Để sau truy cập vào MediaStream từ mã nhận dạng, hãy sử dụng các thẻ sau:

navigator.mediaDevices.getUserMedia({
  audio: {
    mandatory: {
      chromeMediaSource: "tab",
      chromeMediaSourceId: id,
    },
  },
  video: {
    mandatory: {
      chromeMediaSource: "tab",
      chromeMediaSourceId: id,
    },
  },
});

Giới hạn mức sử dụng

Sau khi gọi getMediaStreamId(), sẽ có các hạn chế về nơi có thể sử dụng mã luồng được trả về:

  • Nếu bạn chỉ định consumerTabId, lệnh gọi getUserMedia() có thể sử dụng mã này trong bất kỳ khung nào trong thẻ nhất định có cùng nguồn gốc bảo mật.
  • Khi bạn không chỉ định thuộc tính này, hãy bắt đầu sử dụng trong Chrome 116, mã nhận dạng này có thể được dùng trong mọi khung hình có cùng nguồn gốc bảo mật trong cùng một quy trình kết xuất như phương thức gọi. Điều này có nghĩa là mã luồng nhận được trong trình chạy dịch vụ có thể được dùng trong tài liệu ngoài màn hình.

Trước Chrome 116, khi bạn không chỉ định consumerTabId, mã luồng bị hạn chế ở cả hai nguồn gốc bảo mật, quy trình kết xuất và khung kết xuất của phương thức gọi.

Tìm hiểu thêm

Để tìm hiểu thêm về cách sử dụng API chrome.tabCapture, hãy xem Bản ghi âm và chụp ảnh màn hình. Hình ảnh này minh hoạ cách sử dụng tabCapture và các API liên quan để giải quyết một số trường hợp sử dụng phổ biến.

Loại

CaptureInfo

Thuộc tính

  • toàn màn hình

    boolean

    Liệu một phần tử trong thẻ đang được chụp có đang ở chế độ toàn màn hình hay không.

  • trạng thái

    TabCaptureState

    Trạng thái chụp mới của thẻ.

  • tabId

    số

    Mã của thẻ có trạng thái đã thay đổi.

CaptureOptions

Thuộc tính

GetMediaStreamOptions

Chrome 71 trở lên

Thuộc tính

  • consumerTabId

    số không bắt buộc

    Mã thẻ không bắt buộc của thẻ mà sau này sẽ gọi getUserMedia() để sử dụng luồng. Nếu bạn không chỉ định, thì chỉ tiện ích gọi mới có thể sử dụng luồng kết quả. Chỉ các khung trong thẻ nhất định có nguồn gốc bảo mật khớp với nguồn gốc của thẻ tiêu thụ mới có thể sử dụng luồng. Nguồn gốc của thẻ phải là nguồn gốc bảo mật, ví dụ: HTTPS.

  • targetTabId

    số không bắt buộc

    Mã thẻ không bắt buộc của thẻ sẽ được ghi lại. Nếu không được chỉ định, thẻ đang hoạt động sẽ được chọn. Bạn chỉ có thể dùng những thẻ đã được cấp quyền activeTab làm thẻ đích.

MediaStreamConstraint

Thuộc tính

  • bắt buộc

    đối tượng

  • tùy chọn

    đối tượng không bắt buộc

TabCaptureState

Enum

"đang chờ xử lý"

"đang hoạt động"

"senabled"

"error"

Phương thức

capture()

Chỉ ở nền trước 
chrome.tabCapture.capture(
  options: CaptureOptions,
  callback: function,
)

Chụp khu vực hiển thị của thẻ hiện đang hoạt động. Bạn chỉ có thể bắt đầu thu thập trên thẻ hiện đang hoạt động sau khi tiện ích đã được gọi, tương tự như cách activeTab hoạt động. Hoạt động chụp ảnh được duy trì trên các thao tác điều hướng trang trong thẻ và sẽ dừng khi người dùng đóng thẻ hoặc luồng nội dung nghe nhìn bị tiện ích đóng.

Tham số

  • tùy chọn

    CaptureOptions

    Định cấu hình luồng nội dung nghe nhìn được trả về.

  • số gọi lại

    hàm

    Tham số callback sẽ có dạng như sau: 

    (stream: LocalMediaStream) => void

    • luồng

      LocalMediaStream

getCapturedTabs()

Lời hứa 
chrome.tabCapture.getCapturedTabs(
  callback?: function,
)

Trả về danh sách các thẻ đã yêu cầu chụp hoặc đang được chụp, tức là trạng thái != đã dừng và trạng thái != lỗi. Điều này cho phép tiện ích thông báo cho người dùng rằng hiện có một lượt ghi thẻ thẻ sẽ ngăn việc ghi thẻ mới (hoặc để ngăn các yêu cầu thừa cho cùng một thẻ).

Tham số

  • số gọi lại

    hàm không bắt buộc

    Tham số callback sẽ có dạng như sau: 

    (result: CaptureInfo[]) => void

Giá trị trả về

  • Promise<CaptureInfo[]>

    Chrome 116 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

getMediaStreamId()

Lời hứa Chrome 71 trở lên 
chrome.tabCapture.getMediaStreamId(
  options?: GetMediaStreamOptions,
  callback?: function,
)

Tạo mã luồng để nắm bắt thẻ đích. Tương tự như phương thức chrome.tabCapture.capture(), nhưng trả về mã luồng nội dung đa phương tiện thay vì trả về mã luồng nội dung đa phương tiện cho thẻ người dùng.

Tham số

  • tùy chọn

    GetMediaStreamOptions không bắt buộc

  • số gọi lại

    hàm không bắt buộc

    Tham số callback sẽ có dạng như sau: 

    (streamId: string) => void

    • streamId

      string

Giá trị trả về

  • Cam kết<string>

    Chrome 116 trở lên

    Lời hứa chỉ được hỗ trợ cho Manifest V3 trở lên, các nền tảng khác cần sử dụng lệnh gọi lại.

Sự kiện

onStatusChanged

chrome.tabCapture.onStatusChanged.addListener(
  callback: function,
)

Sự kiện được kích hoạt khi trạng thái thu thập của một thẻ thay đổi. Điều này cho phép tác giả tiện ích theo dõi trạng thái ghi lại của thẻ để đồng bộ hoá các thành phần trên giao diện người dùng như hành động trên trang.

Tham số

  • số gọi lại

    hàm

    Tham số callback sẽ có dạng như sau: 

    (info: CaptureInfo) => void