이미지 캡처는 스틸 이미지를 캡처하고 카메라 하드웨어를 구성하는 API입니다. 설정을 변경할 수 있습니다. 이 API는 Android 및 데스크톱의 Chrome 59에서 사용할 수 있습니다. 또한 ImageCapture 폴리필 라이브러리 게시
API를 사용하면 확대/축소, 밝기, ISO 및 화이트 밸런스입니다. 무엇보다도, 이미지 캡처를 사용하면 사용 가능한 모든 장치 카메라 또는 웹캠의 전체 해상도 기능을 지원합니다. 웹에서 사진을 찍는 이전 기술에는 동영상 스냅샷, 정지 이미지보다 낮은 해상도를 사용합니다.
ImageCapture 객체는 MediaStreamTrack를 소스로 사용하여 구성됩니다. 이
API에는 takePhoto() 및 grabFrame()의 두 가지 캡처 메서드와
카메라의 기능 및 설정을 검색하고 이를 변경
설정을 변경할 수 있습니다.
공사
Image Capture API는 획득한 MediaStreamTrack를 통해 카메라에 액세스합니다.
getUserMedia()에서:
navigator.mediaDevices.getUserMedia({video: true})
.then(gotMedia)
.catch(error => console.error('getUserMedia() error:', error));
function gotMedia(mediaStream) {
const mediaStreamTrack = mediaStream.getVideoTracks()[0];
const imageCapture = new ImageCapture(mediaStreamTrack);
console.log(imageCapture);
}
DevTools 콘솔에서 이 코드를 사용해 볼 수 있습니다.
에서 확인하세요.촬영하기
캡처는 두 가지 방법, 즉 전체 프레임과 빠른 스냅샷으로 수행할 수 있습니다. takePhoto()
단일 사진 노출의 결과인 Blob를 반환합니다.
브라우저에서 다운로드하거나 저장하거나 <img>
요소가 포함됩니다. 이 방법은 사용 가능한 가장 높은 사진 카메라 해상도를 사용합니다.
예를 들면 다음과 같습니다.
const img = document.querySelector('img');
// ...
imageCapture.takePhoto()
.then(blob => {
img.src = URL.createObjectURL(blob);
img.onload = () => { URL.revokeObjectURL(this.src); }
})
.catch(error => console.error('takePhoto() error:', error));
grabFrame()는 ImageBitmap 객체, 즉 라이브 동영상의 스냅샷을 반환합니다.
예를 들어 <canvas> 모델을 학습시켜
색상 값을 선택적으로 변경할 수 있습니다. ImageBitmap에는
동영상 소스의 해상도(일반적으로 카메라의 해상도보다 낮습니다.
사용할 수 있습니다 예를 들면 다음과 같습니다.
const canvas = document.querySelector('canvas');
// ...
imageCapture.grabFrame()
.then(imageBitmap => {
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
})
.catch(error => console.error('grabFrame() error:', error));
기능 및 설정
카메라 설정에 따라 캡처 설정을 조작할 수 있는
변경사항이 MediaStreamTrack에 반영되는지 아니면
takePhoto() 이후에 표시됩니다. 예를 들어 zoom 수준이 변경되면 즉시 변경됩니다.
MediaStreamTrack로 전파되는 반면 적목현상 감소는 설정된 경우
사진을 찍을 때만 적용됩니다.
'게시' 미리보기를 통해 카메라 기능과 설정을 조작할 수 있음
MediaStreamTrack: MediaStreamTrack.getCapabilities()는
MediaTrackCapabilities
사전을 찾아보거나
값(예: 지원되는 확대/축소 범위 또는 허용된 화이트 밸런스 모드일 수 있습니다.
이에 따라 MediaStreamTrack.getSettings()는
MediaTrackSettings
확인할 수 있습니다. 확대/축소, 밝기, 토치 모드는 다음에 속합니다.
예를 들어
var zoomSlider = document.querySelector('input[type=range]');
// ...
const capabilities = mediaStreamTrack.getCapabilities();
const settings = mediaStreamTrack.getSettings();
if (capabilities.zoom) {
zoomSlider.min = capabilities.zoom.min;
zoomSlider.max = capabilities.zoom.max;
zoomSlider.step = capabilities.zoom.step;
zoomSlider.value = settings.zoom;
}
'라이브 아님' 카메라 기능과 설정을 조작할 수 있는
ImageCapture 객체: ImageCapture.getPhotoCapabilities()는
PhotoCapabilities
'Non-Live'에 대한 액세스를 제공하는 객체입니다. 카메라 기능이 추가되었습니다.
이에 따라 Chrome 61부터 ImageCapture.getPhotoSettings()
는
PhotoSettings
현재 설정으로 이동합니다. 사진 해상도, 적목현상
축소 및 플래시 모드 (토치 제외)는 이 섹션에 속합니다. 예를 들면 다음과 같습니다.
var widthSlider = document.querySelector('input[type=range]');
// ...
imageCapture.getPhotoCapabilities()
.then(function(photoCapabilities) {
widthSlider.min = photoCapabilities.imageWidth.min;
widthSlider.max = photoCapabilities.imageWidth.max;
widthSlider.step = photoCapabilities.imageWidth.step;
return imageCapture.getPhotoSettings();
})
.then(function(photoSettings) {
widthSlider.value = photoSettings.imageWidth;
})
.catch(error => console.error('Error getting camera capabilities and settings:', error));
구성
'게시' 미리보기를 통해 카메라 설정을 구성할 수 있습니다.
MediaStreamTrack님의 applyConstraints()
제약 조건
예를 들면 다음과 같습니다.
var zoomSlider = document.querySelector('input[type=range]');
mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
.catch(error => console.error('Uh, oh, applyConstraints() error:', error));
'라이브 아님' 카메라 설정은 takePhoto()의 선택적
PhotoSettings
Google에서 검색합니다. 예를 들면 다음과 같습니다.
var widthSlider = document.querySelector('input[type=range]');
imageCapture.takePhoto({ imageWidth : widthSlider.value })
.then(blob => {
img.src = URL.createObjectURL(blob);
img.onload = () => { URL.revokeObjectURL(this.src); }
})
.catch(error => console.error('Uh, oh, takePhoto() error:', error));
카메라 기능
위의 코드를 실행하면
grabFrame() 및 takePhoto() 결과
takePhoto() 메서드를 통해 카메라의 최대 해상도에 액세스할 수 있습니다.
grabFrame()이(가) MediaStreamTrack에서 다음으로 이용 가능한 VideoFrame를 확보합니다.
렌더러 프로세스 내에서이지만 takePhoto()는 MediaStream를 중단합니다.
카메라를 재구성하고 사진을 찍습니다 (일반적으로 압축된 형식,
따라서 Blob)하고 MediaStreamTrack를 재개합니다. 본질적으로 이는
takePhoto()가 전체 정지 이미지 해상도에 액세스하도록 허용합니다
카메라 기능에
영향을 주지 않습니다. 이전에는 사진을 찍는 것만 가능했습니다. 작성자:
다음과 같이 동영상을 소스로 사용하여 canvas 요소에서 drawImage()를 호출합니다.
여기에서 예시 참조)
자세한 내용은 README.md 섹션에서 확인할 수 있습니다.
이 데모에서 <canvas> 크기는 동영상의 해상도로 설정됩니다.
반면 <img>의 자연스러운 크기는 최대 정지 이미지
카메라의 해상도입니다. CSS는 물론 디스플레이 광고를 설정하는 데
둘 다의 크기입니다.
스틸 이미지에 사용 가능한 모든 카메라 해상도를 가져와 설정할 수 있습니다.
MediaSettingsRange 값을 사용하여 PhotoCapabilities.imageHeight 및
imageWidth입니다. 참고로, 최소 및 최대 너비와 높이 제약 조건은
getUserMedia()는 동영상용이므로 (논의한 바와 같이)
사용할 수 있습니다. 다시 말해
오프라인 상태에서 저장 시 기기의 최대 해상도에 액세스할 수 있습니다.
getUserMedia()를 캔버스로 변경합니다. WebRTC 해상도 제약 조건 데모
해상도에 getUserMedia() 제약 조건을 설정하는 방법을 보여줍니다.
기타 설정
Shape Detection API 이미지 캡처에서 원활하게 작동합니다.
grabFrame()는 반복적으로 호출하여 피드할 수 있습니다.ImageBitmap를FaceDetector또는BarcodeDetector로 설정합니다. 자세히 알아보기: Paul Kinlan의 블로그 게시물에서 API를 참조하세요.카메라 플래시 (기기 조명)는 다음 카메라로 액세스할 수 있습니다.
FillLightMode인치PhotoCapabilities토치 모드 (깜박임이 계속 켜져 있음)는MediaTrackCapabilities를 탭합니다.
데모 및 코드 샘플
지원
- Android 및 데스크톱에서 실행되는 Chrome 59
- 59 이전 Android 및 데스크톱에서 실행되는 Chrome Canary 실험용 웹 플랫폼 기능이 사용 설정되었습니다.