ImageCapture.grabFrame()

ImageCapture 인터페이스의 grabFrame() 메서드는 MediaStreamTrack의 라이브 비디오에서 스냅샷을 찍고, 그 결과를 담은 ImageBitmap (en-US)으로 이행하는 Promise를 반환합니다.

구문

const bitmapPromise = imageCapture.grabFrame()

반환 값

ImageBitmap (en-US) 객체로 이행하는 Promise.

예제

다음 예제는 Simple Image Capture 데모에서 가져온 것으로, grabFrame()이 반환한 Promise의 ImageBitmap (en-US)을 사용해 <canvas> 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 ImageCapture 객체의 초기화 과정은 생략했습니다.

var grabFrameButton = document.querySelector('button#grabFrame');
var canvas = document.querySelector('canvas');

grabFrameButton.onclick = grabFrame;

function grabFrame() {
  imageCapture.grabFrame()
  .then(function(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(function(error) {
    console.log('grabFrame() error: ', error);
  });
}

명세

Specification
MediaStream Image Capture # dom-imagecapture-grabframe

브라우저 호환성

BCD tables only load in the browser