Nội dung mô tả
Dùng API chrome.tabCapture
để tương tác với các luồng nội dung nghe nhìn trên thẻ.
Quyền
tabCapture
Khái niệm và cách sử dụng
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. Người dùng chỉ có thể gọi tiện ích sau khi gọi một tiện ích, chẳng hạn như 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 của hệ thống
Khi lấy MediaStream
cho một thẻ, âm thanh trong thẻ đó sẽ không được phát cho người dùng nữa. Đ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:
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
của thẻ với đích đến mặc định.
Mã luồng
Việc gọi chrome.tabCapture.getMediaStreamId()
sẽ trả về một mã luồng. Để truy cập vào MediaStream
sau này từ mã nhận dạng, hãy sử dụng các mục 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()
, có một số hạn chế về vị trí có thể dùng mã luồng được trả về:
- Nếu
consumerTabId
được chỉ định, thì lệnh gọigetUserMedia()
có thể sử dụng mã nhận dạng 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. - Nếu bạn không chỉ định thuộc tính này, thì kể từ Chrome 116, mã nhận dạng có thể được dùng trong bất kỳ khung nào có cùng nguồn gốc bảo mật trong cùng một quy trình kết xuất với phương thức gọi. Điều này có nghĩa là bạn có thể sử dụng mã luồng có được trong một trình chạy dịch vụ trong tài liệu ngoài màn hình.
Trước Chrome 116, khi consumerTabId
không được chỉ định, mã luồng bị giới hạn ở cả 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
, vui lòng xem bài viết Ghi âm và chụp ảnh màn hình. Hình này minh hoạ cách 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ó ở chế độ toàn màn hình hay không.
-
status
Trạng thái chụp mới của thẻ.
-
tabId
number
Mã của thẻ có trạng thái đã thay đổi.
CaptureOptions
Thuộc tính
-
âm thanh
boolean không bắt buộc
-
audioConstraints
MediaStreamConstraint không bắt buộc
-
video
boolean không bắt buộc
-
videoConstraints
MediaStreamConstraint không bắt buộc
GetMediaStreamOptions
Thuộc tính
-
consumerTabId
số không bắt buộc
Mã thẻ (không bắt buộc) của thẻ này sau đó 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 thu được. 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 dùng được luồng. Nguồn gốc của thẻ phải là một 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ẻ cần được ghi lại. Nếu bạn không chỉ định, thì thẻ đang hoạt động hiện tại sẽ được chọn. Bạn chỉ có thể dùng các thẻ mà tiện ích đã được cấp quyền
activeTab
làm thẻ mục tiêu.
MediaStreamConstraint
Thuộc tính
-
bắt buộc
đối tượng
-
không bắt buộc
đối tượng không bắt buộc
TabCaptureState
Liệt kê
Phương thức
capture()
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 chụ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. Quá trình chụp được duy trì trong các lần điều hướng trang trong thẻ và dừng khi thẻ được đóng hoặc luồng nội dung nghe nhìn bị tiện ích đóng.
Tham số
-
tùy chọn
Đị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()
chrome.tabCapture.getCapturedTabs(
callback?: function,
)
Trả về danh sách 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 đang có một thẻ được chụp và sẽ ngăn việc chụp thẻ mới thành công (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
-
kết quả
-
Giá trị trả về
-
Promise<CaptureInfo[]>
Chrome 116 trở lênLời hứa được hỗ trợ trong Manifest V3 trở lên nhưng lệnh gọi lại được cung cấp để có khả năng tương thích ngược. Bạn không thể sử dụng cả hai trong cùng một lệnh gọi hàm. Lời hứa sẽ được phân giải bằng cùng một loại được truyền đến lệnh gọi lại.
getMediaStreamId()
chrome.tabCapture.getMediaStreamId(
options?: GetMediaStreamOptions,
callback?: function,
)
Tạo mã luồng để chụp thẻ đích. Tương tự như phương thức chrome.tabCapture.capture(), nhưng trả về mã luồng nội dung nghe nhìn (thay vì mã luồng nội dung nghe nhìn) cho thẻ người dùng thông thườ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ề
-
Hứa hẹn<string>
Chrome 116 trở lênLời hứa được hỗ trợ trong Manifest V3 trở lên nhưng lệnh gọi lại được cung cấp để có khả năng tương thích ngược. Bạn không thể sử dụng cả hai trong cùng một lệnh gọi hàm. Lời hứa sẽ được phân giải bằng cùng một loại được truyền đến 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 chụp của một thẻ thay đổi. Việc này cho phép tác giả tiện ích theo dõi trạng thái chụp của các thẻ để đồng bộ hoá các thành phần trên giao diện người dùng như thao tác trên trang.
Tham số
-
số gọi lại
hàm
Tham số
callback
sẽ có dạng như sau:(info: CaptureInfo) => void
-
info
-