MediaStream Image Capture API의 ImageCapture
인터페이스는 유효한 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. |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.