chrome.tabCapture

설명

chrome.tabCapture API를 사용하여 탭 미디어 스트림과 상호작용합니다.

권한

tabCapture

개념 및 사용

chrome.tabCapture API를 사용하면 현재 탭의 동영상과 오디오가 포함된 MediaStream에 액세스할 수 있습니다. 사용자가 확장 프로그램의 작업 버튼을 클릭하는 등 확장 프로그램을 호출한 후에만 호출할 수 있습니다. 이는 "activeTab" 권한의 동작과 유사합니다.

시스템 오디오 보존

탭에 MediaStream가 획득되면 해당 탭의 오디오가 사용자에게 더 이상 재생되지 않습니다. 이는 suppressLocalAudioPlayback 플래그가 true로 설정된 경우 getDisplayMedia() 함수의 동작과 유사합니다.

사용자에게 오디오를 계속 재생하려면 다음을 사용하세요.

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

이렇게 하면 새 AudioContext가 생성되고 탭의 MediaStream 오디오가 기본 대상으로 연결됩니다.

스트림 ID

chrome.tabCapture.getMediaStreamId()를 호출하면 스트림 ID가 반환됩니다. 나중에 ID에서 MediaStream에 액세스하려면 다음을 사용하세요.

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

사용 제한

getMediaStreamId()를 호출한 후 반환된 스트림 ID를 사용할 수 있는 위치에 제한이 있습니다.

  • consumerTabId이 지정되면 동일한 보안 출처가 있는 지정된 탭의 모든 프레임에서 getUserMedia() 호출로 ID를 사용할 수 있습니다.
  • 이를 지정하지 않으면 Chrome 116부터 호출자와 동일한 렌더링 프로세스에서 동일한 보안 출처를 사용하는 모든 프레임에서 ID를 사용할 수 있습니다. 즉, 서비스 워커에서 획득한 스트림 ID를 오프스크린 문서에서 사용할 수 있습니다.

Chrome 116 이전에는 consumerTabId가 지정되지 않은 경우 스트림 ID가 호출자의 보안 출처, 렌더링 프로세스, 렌더링 프레임으로 제한되었습니다.

자세히 알아보기

chrome.tabCapture API 사용 방법에 대해 자세히 알아보려면 오디오 녹음 및 화면 캡처를 참고하세요. 이는 tabCapture 및 관련 API를 사용하여 여러 일반적인 사용 사례를 해결하는 방법을 보여줍니다.

유형

CaptureInfo

속성

  • 전체 화면

    부울

    캡처되는 탭의 요소가 전체 화면 모드인지 여부입니다.

  • 탭의 새로운 캡처 상태입니다.

  • tabId

    숫자

    상태가 변경된 탭의 ID입니다.

CaptureOptions

속성

GetMediaStreamOptions

Chrome 71 이상

속성

  • consumerTabId

    번호 선택사항

    나중에 getUserMedia()를 호출하여 스트림을 사용할 탭의 선택적 탭 ID입니다. 지정하지 않으면 결과 스트림은 호출 확장 프로그램에서만 사용할 수 있습니다. 스트림은 보안 출처가 소비자 탭의 출처와 일치하는 지정된 탭의 프레임에서만 사용할 수 있습니다. 탭의 출처는 HTTPS와 같은 보안 출처여야 합니다.

  • targetTabId

    번호 선택사항

    캡처할 탭의 선택적 탭 ID입니다. 지정하지 않으면 현재 활성 탭이 선택됩니다. 확장에 activeTab 권한이 부여된 탭만 타겟 탭으로 사용할 수 있습니다.

MediaStreamConstraint

속성

  • 필수

    객체

  • 선택사항

    객체 선택사항

TabCaptureState

열거형

'pending'

'active'

"stopped"

'error'

메서드

capture()

포그라운드만 
chrome.tabCapture.capture(
  options: CaptureOptions,
  callback: function,
): void

현재 활성 탭의 표시 영역을 캡처합니다. 캡처는 확장 프로그램이 호출된 후에만 현재 활성 탭에서 시작할 수 있습니다. 이는 activeTab이 작동하는 방식과 유사합니다. 캡처는 탭 내 페이지 탐색 전반에 걸쳐 유지되며 탭이 닫히거나 미디어 스트림이 확장 프로그램에 의해 닫히면 중지됩니다.

매개변수

  • 반환된 미디어 스트림을 구성합니다.

  • callback

    함수

    callback 매개변수는 다음과 같습니다. 

    (stream: LocalMediaStream) => void

    • 스트림

      LocalMediaStream

getCapturedTabs()

chrome.tabCapture.getCapturedTabs(): Promise<CaptureInfo[]>

캡처를 요청했거나 캡처 중인 탭 목록을 반환합니다(즉, 상태가 stopped가 아니고 상태가 error가 아님). 이를 통해 확장 프로그램은 새 탭 캡처가 성공하지 못하도록 방지하는 기존 탭 캡처가 있음을 사용자에게 알릴 수 있습니다 (또는 동일한 탭에 대한 중복 요청을 방지할 수 있음).

반환 값

getMediaStreamId()

Chrome 71 이상 
chrome.tabCapture.getMediaStreamId(
  options?: GetMediaStreamOptions,
): Promise<string>

타겟 탭을 캡처하는 스트림 ID를 만듭니다. chrome.tabCapture.capture() 메서드와 유사하지만 미디어 스트림 대신 미디어 스트림 ID를 소비자 탭에 반환합니다.

매개변수

반환 값

  • Promise<string>

    Chrome 116 이상

이벤트

onStatusChanged

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

탭의 캡처 상태가 변경될 때 발생하는 이벤트입니다. 이를 통해 확장 프로그램 작성자는 탭의 캡처 상태를 추적하여 페이지 작업과 같은 UI 요소를 동기화할 수 있습니다.

매개변수

  • callback

    함수

    callback 매개변수는 다음과 같습니다. 

    (info: CaptureInfo) => void