자바스크립트 "Image Capture API"

Image Capture API는 웹 개발자가 장치의 카메라 또는 스캐너와 같은 다른 이미지 캡처 장치에 액세스하고 브라우저에서 직접 스틸 이미지를 캡처할 수 있도록 하는 JavaScript API입니다. API는 이미지를 캡처하고 다양한 카메라 설정을 조정하는 간단하고 표준화된 방법을 제공합니다.

​

다음은 Image Capture API를 사용하여 사용자의 카메라에서 이미지를 캡처하는 방법에 대한 간단한 예입니다.

​

// Get the user's camera

navigator.mediaDevices.getUserMedia({ video: true })

.then(stream => {

// Create an ImageCapture object from the camera stream

const imageCapture = new ImageCapture(stream.getVideoTracks()[0]);

​

// Capture an image from the camera

imageCapture.takePhoto()

.then(blob => {

// Create an <img> element and display the captured image

const img = document.createElement('img');

img.src = URL.createObjectURL(blob);

document.body.appendChild(img);

})

.catch(error => console.log('takePhoto() error:', error));

})

.catch(error => console.log('getUserMedia() error:', error));

​

이 예제에서는 먼저 `navigator.mediaDevices.getUserMedia()`를 호출하여 사용자의 카메라에 대한 액세스를 요청합니다. 카메라에 액세스하면 스트림의 첫 번째 비디오 트랙을 사용하여 `ImageCapture` 개체를 만듭니다. 그런 다음 `imageCapture.takePhoto()`를 호출하여 이미지를 캡처하고 `Blob` 객체로 반환합니다. 마지막으로 `<img>` 요소를 생성하고 해당 `src` 속성을 페이지에 캡처된 이미지를 표시하는 `Blob` 객체에서 생성된 URL로 설정합니다.

​

Image Capture API는 밝기, 대비 및 확대/축소와 같은 카메라 설정을 조정하기 위한 다양한 옵션도 제공합니다. 다음은 카메라 밝기를 설정하는 방법의 예입니다.

​

// Get the user's camera

navigator.mediaDevices.getUserMedia({ video: true })

.then(stream => {

// Create an ImageCapture object from the camera stream

const imageCapture = new ImageCapture(stream.getVideoTracks()[0]);

​

// Set the camera's brightness to 50%

imageCapture.setOptions({ exposureCompensation: 0.5 });

​

// Capture an image from the camera

imageCapture.takePhoto()

.then(blob => {

// Create an <img> element and display the captured image

const img = document.createElement('img');

img.src = URL.createObjectURL(blob);

document.body.appendChild(img);

})

.catch(error => console.log('takePhoto() error:', error));

})

.catch(error => console.log('getUserMedia() error:', error));

​

이 예제에서는 `imageCapture.setOptions()`를 호출하여 카메라의 노출 보정(밝기)을 50%로 설정합니다. 그런 다음 카메라에서 이미지를 캡처하여 이전 예제와 같이 페이지에 표시합니다.

​

Image Capture API는 사용자의 카메라 또는 기타 이미지 캡처 장치에서 이미지를 캡처하기 위한 강력하고 유연한 도구입니다. 이 API를 사용하여 웹 개발자는 최신 장치의 전체 기능을 활용하는 대화형의 매력적인 웹 응용 프로그램을 만들 수 있습니다.