跳到主要内容

tabCapture 标签媒体流

官方文档

用于捕获标签的媒体流

权限设置​

"permissions": [
  "tabCapture"
],

方法​

capture() 捕获标签媒体流​

捕获当前活动选项卡的可见区域的媒体流

type MediaStreamConstraint = {
  mandatory: object;
  optional?: object;
}

type CaptureOptions = {
  audio?: boolean;
  audioConstraints?: MediaStreamConstraint;
  video?: boolean;
  videoConstraints?: MediaStreamConstraint;
}

chrome.tabCapture.capture(
  options: CaptureOptions,
  callback: (stream: LocalMediaStream) => void,
)

getCapturedTabs() 获取捕获的标签​

已请求捕获或正在捕获的选项卡列表

type TabCaptureState = 'pending' | 'active' | 'stopped' | 'error';

type CaptureInfo = {
  fullscreen: boolean;
  status: TabCaptureState;
  tabId: number;
}

chrome.tabCapture.getCapturedTabs(
  callback?: (result: CaptureInfo[]) => void,
)

getMediaStreamId() 获取媒体流ID​

获取当前媒体流的ID

type GetMediaStreamOptions = {
  // 选项卡 ID
  consumerTabId?: number;
  targetTabId?: number;
}

chrome.tabCapture.getMediaStreamId(
  options?: GetMediaStreamOptions,
  callback?: (streamId: string) => void,
)

// 获取到的媒体流ID，再通过 navigator.mediaDevices.getUserMedia({audio: {streamId: streamId}}) 获取媒体流
navigator.mediaDevices.getUserMedia({
  audio: {
    mandatory: {
      chromeMediaSource: "tab",
      chromeMediaSourceId: id,
    },
  },
  video: {
    mandatory: {
      chromeMediaSource: "tab",
      chromeMediaSourceId: id,
    },
  },
});

事件​

onStatusChanged 状态变化事件​

当捕获的标签的状态发生变化时触发

type CaptureInfo = {
  fullscreen: boolean;
  status: TabCaptureState;
  tabId: number;
}

// background.js
chrome.tabCapture.onStatusChanged.addListener((info: CaptureInfo) => {
  console.log('🍄  background: >>>>>>>>>>>>>>>>>> 状态变化事件', Date.now(), info);
});