ImageCapture.grabFrame()

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

구문

const bitmapPromise = imageCapture.grabFrame()

반환 값

ImageBitmap 객체로 이행하는 Promise.

예제

다음 예제는 Simple Image Capture 데모에서 가져온 것으로, grabFrame()이 반환한 PromiseImageBitmap을 사용해 <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 Status Comment
MediaStream Image Capture
The definition of 'grabFrame()' in that specification.
Working Draft Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
grabFrame
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 59Chrome Android Full support 59Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.