ImageCapture

MediaStream Image Capture APIImageCapture 인터페이스는 유효한 MediaStreamTrack이 참조하는 카메라 또는 기타 촬영 장치를 통해 이미지나 사진을 촬영하기 위한 메서드를 제공합니다.

생성자

ImageCapture()
비디오 스트림을 나타내는 MediaStreamTrack에서 정지 프레임(사진)을 캡처하기 위한 ImageCapture 객체를 반환합니다.

속성

ImageCapture.track Read only
생성자에 전달한 MediaStreamTrack의 참조를 반환합니다.

메서드

ImageCapture 인터페이스는 EventTarget의 메서드를 상속하며, 다음 메서드도 포함합니다.

ImageCapture.takePhoto()
MediaStreamTrack의 출처 비디오 캡처 장치를 통해 단일 노출 촬영을 한 후, 그 데이터를 담은 Blob으로 이행하는 Promise를 반환합니다.
ImageCapture.getPhotoCapabilities()
가능한 설정 옵션을 담은 PhotoCapabilities 객체로 이행하는 Promise를 반환합니다.
ImageCapture.getPhotoSettings()
현재 사진 설정을 담은 PhotoSettings 객체로 이행하는 Promise를 반환합니다.
ImageCapture.grabFrame()
MediaStreamTrack의 라이브 비디오에서 스냅샷을 찍은 후, 성공했으면 ImageBitmap을 반환합니다.

예제

다음 코드는 Chrome의 Grab Frame - Take Photo Sample에서 가져온 것입니다. ImageCapture는 이미지를 캡처할 도구가 필요하므로, 다음 예제는 브라우저 단말기의 미디어 장치(카메라)로 시작합니다.

이 예제는 MediaStream으로부터 추출한 MediaStreamTrack부터 시작합니다. 그 다음엔 해당 트랙을 사용해 takePhoto()grabFrame()을 호출할 ImageCapture 객체를 생성합니다. 마침내, 최종 결과를 캔버스 객체에 적용합니다.

var imageCapture;

function onGetUserMediaButtonClick() {
  navigator.mediaDevices.getUserMedia({video: true})
  .then(mediaStream => {
    document.querySelector('video').srcObject = mediaStream;

    const track = mediaStream.getVideoTracks()[0];
    imageCapture = new ImageCapture(track);
  })
  .catch(error => console.log(error));
}

function onGrabFrameButtonClick() {
  imageCapture.grabFrame()
  .then(imageBitmap => {
    const canvas = document.querySelector('#grabFrameCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
}

function onTakePhotoButtonClick() {
  imageCapture.takePhoto()
  .then(blob => createImageBitmap(blob))
  .then(imageBitmap => {
    const canvas = document.querySelector('#takePhotoCanvas');
    drawCanvas(canvas, imageBitmap);
  })
  .catch(error => console.log(error));
}

/* Utils */

function drawCanvas(canvas, img) {
  canvas.width = getComputedStyle(canvas).width.split('px')[0];
  canvas.height = getComputedStyle(canvas).height.split('px')[0];
  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width * ratio) / 2;
  let y = (canvas.height - img.height * ratio) / 2;
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
      x, y, img.width * ratio, img.height * ratio);
}

document.querySelector('video').addEventListener('play', function() {
  document.querySelector('#grabFrameButton').disabled = false;
  document.querySelector('#takePhotoButton').disabled = false;
});

명세

Specification Status Comment
MediaStream Image Capture
The definition of 'ImageCapture' 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
ImageCapture
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
ImageCapture() constructor
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
getPhotoCapabilities
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
getPhotoSettings
Experimental
Chrome Full support 61Edge Full support ≤79Firefox ? IE ? Opera Full support 46Safari ? WebView Android Full support 61Chrome Android Full support 61Firefox Android ? Opera Android Full support 43Safari iOS ? Samsung Internet Android Full support 8.0
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
takePhoto
Experimental
Chrome Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Edge Full support ≤79Firefox ? IE ? Opera Full support 47
Full support 47
No support 46 — 47
Notes
Notes photoSettings argument not supported.
Safari ? WebView Android Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Chrome Android Full support 60
Full support 60
No support 59 — 60
Notes
Notes photoSettings argument not supported.
Firefox Android ? Opera Android Full support 44
Full support 44
No support 43 — 44
Notes
Notes photoSettings argument not supported.
Safari iOS ? Samsung Internet Android Full support 8.0
Full support 8.0
No support 7.0 — 8.0
Notes
Notes photoSettings argument not supported.
track
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.
See implementation notes.
See implementation notes.