MediaStream Image Capture API

MediaStream Image Capture API는 촬영 장치를 사용해 이미지와 비디오를 캡처하기 위한 API입니다. 그러나 데이터 캡처 외에도 이미지 해상도, 적목 현상 감소 기능, 플래시 존재 유무와 현재 사용 여부 등 장치 사양에 대한 정보를 가져올 때에도 사용할 수 있습니다. 거꾸로, Image Capture API를 사용하면 현재 장치의 허용 범위 안에서 해당 기능을 조정할 수도 있습니다.

개념과 사용법

이미지 또는 비디오 스트림을 가져오는 절차는 다음과 같습니다. 예제 코드는 Chrome의 Image Capture 예제에서 가져온 것입니다.

우선, MediaDevices.getUserMedia()를 사용해 장치를 가리키는 참조를 가져옵니다. 아래 코드는 단순히 사용 가능한 비디오 장치를 아무거나 요청하는 것이지만, getUserMedia() 메서드는더 상세한 장치 기능 요청도 허용합니다. 반환 값은 MediaStream 객체로 이행하는 Promise입니다.

navigator.mediaDevices.getUserMedia({ video: true })
  .then(mediaStream => {
    // Do something with the stream.
  })

그 후, MediaStream.getVideoTracks()를 호출해 미디어 스트림에서 시각적인 부분을 분리합니다. getVideoTracks()의 반환 값은 MediaStreamTrack 객체의 배열로, 여기서는 사용해야 할 객체를 배열의 첫 번째 요소라고 가정합니다. 실제 사용 시에는 MediaStreamTrack 객체의 속성을 사용해 원하는 객체를 찾을 수 있습니다.

const track = mediaStream.getVideoTracks()[0];

이미지를 캡처하기 전에 우선 장치의 기능을 설정하고 싶을 것입니다. 다른 작업을 수행하기 전에, 트랙 객체의 applyConstraints() 메서드를 사용하면 됩니다.

let zoom = document.querySelector('#zoom');
const capabilities = track.getCapabilities();
// 확대 지원 여부 판별
if(!capabilities.zoom) {
  return;
}
track.applyConstraints({ advanced : [{ zoom: zoom.value }] });

마지막으로, MediaStreamTrack 객체를 ImageCapture() 생성자에 제공합니다. MediaStream은 여러 종류의 트랙을 담고 있으며 적절한 트랙을 가져올 때 사용할 수 있는 메서드를 소유하지만, ImageCapture 생성자는 MediaStreamTrack.kind"video" 값이 아닌 경우 NotSupportedError DOMException을 던집니다.

let imageCapture = new ImageCapture(track);

인터페이스

ImageCapture
촬영 장치를 참조하는 유효한 MediaStreamTrack을 사용해 이미지를 캡처하기 위한 인터페이스입니다.
PhotoCapabilities
장착된 촬영 장치에서 사용 가능한 설정 옵션을 제공합니다. ImageCapture.getPhotoCapabilities()를 호출해서 PhotoCapabilities 객체를 가져올 수 있습니다.

명세

Specification Status Comment
MediaStream Image Capture Working Draft Initial definition.

브라우저 호환성

ImageCapture

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 No support NoOpera 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 No support NoOpera 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 No support NoOpera 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 No support NoOpera 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 No support NoOpera 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 No support NoOpera 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 No support NoOpera 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
No support  
No 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.

PhotoCapabilities

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
PhotoCapabilities
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera 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
fillLightMode
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera 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
imageHeight
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera 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
imageWidth
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera 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
redEyeReduction
Experimental
Chrome Full support 59Edge Full support ≤79Firefox ? IE No support NoOpera 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
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

같이 보기