1 files changed, 100 insertions, 0 deletions
diff --git a/files/ko/web/api/mediastream_image_capture_api/index.html b/files/ko/web/api/mediastream_image_capture_api/index.html
new file mode 100644
index 0000000000..016486c12d
--- /dev/null
+++ b/files/ko/web/api/mediastream_image_capture_api/index.html
@@ -0,0 +1,100 @@
+---
+title: MediaStream Image Capture API
+slug: Web/API/MediaStream_Image_Capture_API
+tags:
+  - API
+  - MediaStream
+  - MediaStream Image Capture API
+  - Overview
+  - Reference
+  - 비디오
+  - 사진
+  - 이미지
+translation_of: Web/API/MediaStream_Image_Capture_API
+---
+<div>{{DefaultAPISidebar("Image Capture API")}}</div>
+
+<p class="summary"><strong>MediaStream Image Capture API</strong>는 촬영 장치를 사용해 이미지와 비디오를 캡처하기 위한 API입니다. 그러나 데이터 캡처 외에도 이미지 해상도, 적목 현상 감소 기능, 플래시 존재 유무와 현재 사용 여부 등 장치 사양에 대한 정보를 가져올 때에도 사용할 수 있습니다. 거꾸로, Image Capture API를 사용하면 현재 장치의 허용 범위 안에서 해당 기능을 조정할 수도 있습니다.</p>
+
+<h2 id="개념과_사용법">개념과 사용법</h2>
+
+<p>이미지 또는 비디오 스트림을 가져오는 절차는 다음과 같습니다. 예제 코드는 <a href="https://googlechrome.github.io/samples/image-capture/">Chrome의 Image Capture 예제</a>에서 가져온 것입니다.</p>
+
+<p>우선, {{domxref("MediaDevices.getUserMedia()")}}를 사용해 장치를 가리키는 참조를 가져옵니다. 아래 코드는 단순히 사용 가능한 비디오 장치를 아무거나 요청하는 것이지만, <code>getUserMedia()</code> 메서드는더 상세한 장치 기능 요청도 허용합니다. 반환 값은 {{domxref("MediaStream")}} 객체로 이행하는 {{jsxref("Promise")}}입니다.</p>
+
+<pre class="brush: js">navigator.mediaDevices.getUserMedia({ video: true })
+  .then(mediaStream =&gt; {
+    // Do something with the stream.
+  })
+</pre>
+
+<p id="sect1">그 후, {{domxref("MediaStream.getVideoTracks()")}}를 호출해 미디어 스트림에서 시각적인 부분을 분리합니다. <code>getVideoTracks()</code>의 반환 값은 {{domxref("MediaStreamTrack")}} 객체의 배열로, 여기서는 사용해야 할 객체를 배열의 첫 번째 요소라고 가정합니다. 실제 사용 시에는 <code>MediaStreamTrack</code> 객체의 속성을 사용해 원하는 객체를 찾을 수 있습니다.</p>
+
+<pre class="brush: js">const track = mediaStream.getVideoTracks()[0];</pre>
+
+<p>이미지를 캡처하기 전에 우선 장치의 기능을 설정하고 싶을 것입니다. 다른 작업을 수행하기 전에, 트랙 객체의 {{domxref("MediaStreamTrack.applyConstraints","applyConstraints()")}} 메서드를 사용하면 됩니다.</p>
+
+<pre class="brush: js">let zoom = document.querySelector('#zoom');
+const capabilities = track.getCapabilities();
+// 확대 지원 여부 판별
+if(!capabilities.zoom) {
+  return;
+}
+track.applyConstraints({ advanced : [{ zoom: zoom.value }] });
+</pre>
+
+<p>마지막으로, <code>MediaStreamTrack</code> 객체를 {{domxref("ImageCapture.ImageCapture()", "ImageCapture()")}} 생성자에 제공합니다. <code>MediaStream</code>은 여러 종류의 트랙을 담고 있으며 적절한 트랙을 가져올 때 사용할 수 있는 메서드를 소유하지만, <code>ImageCapture</code> 생성자는 {{domxref("MediaStreamTrack.kind")}}가 <code>"video"</code> 값이 아닌 경우 <code>NotSupportedError</code> {{domxref("DOMException")}}을 던집니다.</p>
+
+<pre class="brush: js">let imageCapture = new ImageCapture(track);
+</pre>
+
+<h2 id="인터페이스">인터페이스</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture")}}</dt>
+ <dd>촬영 장치를 참조하는 유효한 {{domxref("MediaStreamTrack")}}을 사용해 이미지를 캡처하기 위한 인터페이스입니다.</dd>
+ <dt>{{domxref("PhotoCapabilities")}}</dt>
+ <dd>장착된 촬영 장치에서 사용 가능한 설정 옵션을 제공합니다. {{domxref("ImageCapture.getPhotoCapabilities()")}}를 호출해서 <code>PhotoCapabilities</code> 객체를 가져올 수 있습니다.</dd>
+</dl>
+
+<h2 id="명세">명세</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Image')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<h3 id="ImageCapture"><code>ImageCapture</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture")}}</p>
+
+<h3 id="PhotoCapabilities"><code>PhotoCapabilities</code></h3>
+
+<div>
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("api.PhotoCapabilities")}}</p>
+</div>
+</div>
+
+<h2 id="같이_보기">같이 보기</h2>
+
+<ul>
+ <li>{{domxref("MediaStream")}}</li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+</ul>