ImageCapture: метод grabFrame()

Экспериментально: Это экспериментальная технология .
Перед использованием в продукте внимательно ознакомьтесь со таблицей совместимости браузеров.

Метод grabFrame() интерфейса ImageCapture делает снимок текущего видео в MediaStreamTrack и возвращает Promise, который разрешается объектом ImageBitmap содержащим снимок.

Синтаксис

grabFrame()

Параметры

Нет.

Возвращаемое значение

Promise, разрешающийся объектом ImageBitmap.

Исключения

InvalidStateError DOMException: Выбрасывается, если свойство readyState объекта MediaStreamTrack, переданного в конструктор, не live.
UnknownError DOMException: Выбрасывается, если операция не может быть завершена по какой-либо причине.

Примеры

Этот пример взят из демонстрации Simple Image Capture. Он демонстрирует, как использовать Promise, возвращаемый grabFrame(), для копирования полученного кадра в элемент <canvas>. Для упрощения, он не показывает, как создать объект ImageCapture.

let grabFrameButton = document.querySelector("button#grabFrame");
let canvas = document.querySelector("canvas");

grabFrameButton.onclick = grabFrame;

function grabFrame() {
  imageCapture
    .grabFrame()
    .then((imageBitmap) => {
      console.log("Grabbed frame:", imageBitmap);
      canvas.width = imageBitmap.width;
      canvas.height = imageBitmap.height;
      canvas.getContext("2d").drawImage(imageBitmap, 0, 0);
      canvas.classList.remove("hidden");
    })
    .catch((error) => {
      console.error("grabFrame() error: ", error);
    });
}

Спецификации

Спецификация
MediaStream Image Capture # dom-imagecapture-grabframe

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`grabFrame`	59	79	Нет	46	Нет	59	Нет	43	Нет	7.0	59

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture/grabFrame