Эта страница переведена с помощью Cloud Translation API.

Запись звука и захват экрана

В этом руководстве объясняются различные подходы к записи аудио и видео с вкладки, окна или экрана с использованием таких API, как chrome.tabCapture или getDisplayMedia() .

Запись экрана

Для записи экрана вызовите getDisplayMedia() , что вызовет диалоговое окно, показанное ниже. Это дает пользователю возможность выбрать, какой вкладкой, окном или экраном он хочет поделиться, и дает четкое указание на то, что происходит запись.

Диалоговое окно совместного использования экрана для сайта example.com.

В следующем примере запрашивается доступ для записи аудио и видео.

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

Если вызвать в сценарии содержимого, запись автоматически завершится, когда пользователь перейдет на новую страницу. Для записи в фоновом режиме и во время навигации используйте закадровый документ с причиной DISPLAY_MEDIA .

Захват вкладки на основе жеста пользователя

Вызов getDisplayMedia() приводит к тому, что браузер отображает диалоговое окно, в котором пользователя спрашивает, чем он хотел бы поделиться. Однако в некоторых случаях пользователь просто нажал кнопку действия , чтобы вызвать ваше расширение для определенной вкладки, и вы хотели бы немедленно начать захват вкладки без этого запроса.

Запись аудио и видео в фоновом режиме

Начиная с Chrome 116, вы можете вызвать API chrome.tabCapture в сервисном работнике, чтобы получить идентификатор потока после жеста пользователя. Затем его можно передать в закадровый документ, чтобы начать запись.

В вашем сервисном работнике:

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
  });
});

Затем в закадровом документе:

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.
  }
});

Полный пример см. в образце Tab Capture — Recorder .

Запись аудио и видео в новой вкладке

До версии Chrome 116 было невозможно использовать API chrome.tabCapture в сервис-воркере или использовать идентификатор потока, созданный этим API, в закадровом документе. Оба эти требования являются требованиями для описанного выше подхода.

Вместо этого вы можете открыть страницу расширения в новой вкладке или окне и напрямую получить поток. Задайте свойство targetTabId для захвата правильной вкладки.

Начните с открытия страницы расширения (возможно, во всплывающем окне или сервис-воркере):

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

Затем на странице расширения:

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);
});

В качестве альтернативы рассмотрите возможность использования подхода записи экрана , который позволяет выполнять запись в фоновом режиме с использованием закадрового документа, но показывает пользователю диалоговое окно для выбора вкладки, окна или экрана для записи.

Запись звука во всплывающем окне

Если вам нужно только записать звук, вы можете напрямую получить поток во всплывающем окне расширения, используя chrome.tabCapture.capture . Когда всплывающее окно закроется, запись будет остановлена.

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)
});

Если вам нужно, чтобы запись сохранялась при навигации, рассмотрите возможность использования подхода, описанного в предыдущем разделе .

Другие соображения

Дополнительные сведения о том, как записать поток, см. в API MediaRecorder .

Запись экрана

В следующем примере запрашивается доступ для записи аудио и видео.

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

Захват вкладки на основе жеста пользователя

Запись аудио и видео в фоновом режиме

В вашем сервисном работнике:

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
  });
});

Затем в закадровом документе:

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.
  }
});

Полный пример см. в образце Tab Capture — Recorder .

Запись аудио и видео в новой вкладке

Начните с открытия страницы расширения (возможно, во всплывающем окне или сервис-воркере):

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

Затем на странице расширения:

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);
});

Запись звука во всплывающем окне

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)
});

Другие соображения

Дополнительные сведения о том, как записать поток, см. в API MediaRecorder .

Запись экрана

В следующем примере запрашивается доступ для записи аудио и видео.

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

Захват вкладки на основе жеста пользователя

Запись аудио и видео в фоновом режиме

В вашем сервисном работнике:

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
  });
});

Затем в закадровом документе:

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.
  }
});

Полный пример см. в образце Tab Capture — Recorder .

Запись аудио и видео в новой вкладке

Начните с открытия страницы расширения (возможно, во всплывающем окне или сервис-воркере):

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

Затем на странице расширения:

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);
});

Запись звука во всплывающем окне

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)
});

Другие соображения

Дополнительные сведения о том, как записать поток, см. в API MediaRecorder .

Запись экрана

В следующем примере запрашивается доступ для записи аудио и видео.

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

Захват вкладки на основе жеста пользователя

Запись аудио и видео в фоновом режиме

В вашем сервисном работнике:

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
  });
});

Затем в закадровом документе:

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.
  }
});

Полный пример см. в образце Tab Capture — Recorder .

Запись аудио и видео в новой вкладке

Начните с открытия страницы расширения (возможно, во всплывающем окне или сервис-воркере):

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

Затем на странице расширения:

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);
});

Запись звука во всплывающем окне

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)
});

Другие соображения

Дополнительные сведения о том, как записать поток, см. в API MediaRecorder .