initial commit

7 files changed, 559 insertions, 0 deletions

diff --git a/files/ko/web/api/imagecapture/getphotocapabilities/index.html b/files/ko/web/api/imagecapture/getphotocapabilities/index.html
new file mode 100644
index 0000000000..9ee855a96d
--- /dev/null
+++ b/files/ko/web/api/imagecapture/getphotocapabilities/index.html
@@ -0,0 +1,79 @@
+---
+title: ImageCapture.getPhotoCapabilities()
+slug: Web/API/ImageCapture/getPhotoCapabilities
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/getPhotoCapabilities
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>getPhotoCapabilities()</code></strong> 메서드는 사용 가능한 설정 옵션을 담은 {{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>capabilitiesPromise</em> = <em>imageCaptureObj</em>.getPhotoCapabilities()</pre>
+
+<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3>
+
+<p>{{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <a href="https://googlechrome.github.io/samples/image-capture/photo-resolution.html">Chrome의 Image Capture / Photo Resolution Sample</a>에서 가져온 코드로, <code>getPhotoCapabilities()</code>를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 {{domxref("MediaStream")}}에서 가져온 {{domxref("MediaStreamTrack")}} 객체를 사용해 {{domxref("ImageCapture")}} 객체를 생성하는 부분도 포함하고 있습니다.</p>
+
+<pre class="brush: js">const input = document.querySelector('input[type="range"]');
+
+var imageCapture;
+
+navigator.mediaDevices.getUserMedia({video: true})
+.then(mediaStream =&gt; {
+  document.querySelector('video').srcObject = mediaStream;
+
+  const track = mediaStream.getVideoTracks()[0];
+  imageCapture = new ImageCapture(track);
+
+  return imageCapture.getPhotoCapabilities();
+})
+.then(photoCapabilities =&gt; {
+  const settings = imageCapture.track.getSettings();
+
+  input.min = photoCapabilities.imageWidth.min;
+  input.max = photoCapabilities.imageWidth.max;
+  input.step = photoCapabilities.imageWidth.step;
+
+  return imageCapture.getPhotoSettings();
+})
+.then(photoSettings =&gt; {
+  input.value = photoSettings.imageWidth;
+})
+.catch(error =&gt; console.log('Argh!', error.name || error));</pre>
+
+<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','#dom-imagecapture-getphotocapabilities','getPhotoCapabilities()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.getPhotoCapabilities")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/getphotosettings/index.html b/files/ko/web/api/imagecapture/getphotosettings/index.html
new file mode 100644
index 0000000000..b82bd7290d
--- /dev/null
+++ b/files/ko/web/api/imagecapture/getphotosettings/index.html
@@ -0,0 +1,86 @@
+---
+title: ImageCapture.getPhotoSettings()
+slug: Web/API/ImageCapture/getPhotoSettings
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/getPhotoSettings
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>getPhotoSettings()</code></strong> 메서드는 현재 촬영 설정을 담은 {{domxref("PhotoSettings")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>settingsPromise</em> = <em>imageCapture</em>.getPhotoSettings()</pre>
+
+<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3>
+
+<p>다음의 속성으로 구성된 {{domxref("PhotoSettings")}} 객체로 이행하는 {{jsxref("Promise")}}.</p>
+
+<ul>
+ <li><code>fillLightMode</code>: 캡처 장치의 플래시 설정. <code>"auto"</code>, <code>"off"</code>, <code>"flash"</code> 중 하나를 사용할 수 있습니다.</li>
+ <li><code>imageHeight</code>: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, {{glossary("user agent", "사용자 에이전트")}}는 이 값과 제일 가까운 높이를 사용합니다.</li>
+ <li><code>imageWidth</code>: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.</li>
+ <li><code>redEyeReduction</code>: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.</li>
+</ul>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <a href="https://googlechrome.github.io/samples/image-capture/photo-resolution.html">Chrome의 Image Capture / Photo Resolution Sample</a>에서 가져온 코드로, <code>getPhotoCapabilities()</code>를 사용해 범위 입력 칸의 크기를 수정합니다. 또한 장치의 {{domxref("MediaStream")}}에서 가져온 {{domxref("MediaStreamTrack")}} 객체를 사용해 {{domxref("ImageCapture")}} 객체를 생성하는 부분도 포함하고 있습니다.</p>
+
+<pre class="brush: js"><code>const input = document.querySelector('input[type="range"]');
+
+var imageCapture;
+
+navigator.mediaDevices.getUserMedia({video: true})
+.then(mediaStream =&gt; {
+  document.querySelector('video').srcObject = mediaStream;
+
+  const track = mediaStream.getVideoTracks()[0];
+  imageCapture = new ImageCapture(track);
+
+  return imageCapture.getPhotoCapabilities();
+})
+.then(photoCapabilities =&gt; {
+  const settings = imageCapture.track.getSettings();
+
+  input.min = photoCapabilities.imageWidth.min;
+  input.max = photoCapabilities.imageWidth.max;
+  input.step = photoCapabilities.imageWidth.step;
+
+  return imageCapture.getPhotoSettings();
+})
+.then(photoSettings =&gt; {
+  input.value = photoSettings.imageWidth;
+})
+.catch(error =&gt; console.log('Argh!', error.name || error));</code></pre>
+
+<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','#dom-imagecapture-getphotosettings','getPhotoSettings()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.getPhotoSettings")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/grabframe/index.html b/files/ko/web/api/imagecapture/grabframe/index.html
new file mode 100644
index 0000000000..3a0b53ff05
--- /dev/null
+++ b/files/ko/web/api/imagecapture/grabframe/index.html
@@ -0,0 +1,73 @@
+---
+title: ImageCapture.grabFrame()
+slug: Web/API/ImageCapture/grabFrame
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/grabFrame
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의 <strong><code>grabFrame()</code></strong> 메서드는 {{domxref("MediaStreamTrack")}}의 라이브 비디오에서 스냅샷을 찍고, 그 결과를 담은 {{domxref("ImageBitmap")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>bitmapPromise</em> = <em>imageCapture</em>.grabFrame()
+</pre>
+
+<h3 id="반환_값"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.375rem;'>반환 값</span></h3>
+
+<p>{{domxref("ImageBitmap")}} 객체로 이행하는 {{jsxref("Promise")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 <a href="https://simpl.info/imagecapture/">Simple Image Capture 데모</a>에서 가져온 것으로, <code>grabFrame()</code>이 반환한 {{jsxref("Promise")}}의 {{domxref("ImageBitmap")}}을 사용해 {{htmlelement("canvas")}} 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 {{domxref("ImageCapture")}} 객체의 초기화 과정은 생략했습니다.</p>
+
+<pre class="brush: js">var grabFrameButton = document.querySelector('button#grabFrame');
+var canvas = document.querySelector('canvas');
+
+grabFrameButton.onclick = grabFrame;
+
+function grabFrame() {
+  imageCapture.grabFrame()
+  .then(function(imageBitmap) {
+    console.log('Grabbed frame:', imageBitmap);
+    canvas.width = imageBitmap.width;
+    canvas.height = imageBitmap.height;
+    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
+    canvas.classList.remove('hidden');
+  })
+  .catch(function(error) {
+    console.log('grabFrame() error: ', error);
+  });
+}
+</pre>
+
+<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','#dom-imagecapture-grabframe','grabFrame()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.grabFrame")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/imagecapture/index.html b/files/ko/web/api/imagecapture/imagecapture/index.html
new file mode 100644
index 0000000000..34841fe2d2
--- /dev/null
+++ b/files/ko/web/api/imagecapture/imagecapture/index.html
@@ -0,0 +1,67 @@
+---
+title: ImageCapture() 생성자
+slug: Web/API/ImageCapture/ImageCapture
+tags:
+  - API
+  - Constructor
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture API
+  - Reference
+translation_of: Web/API/ImageCapture/ImageCapture
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary"><strong><code>ImageCapture()</code></strong> 생성자는 새로운 {{domxref("ImageCapture")}} 객체를 생성합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>imageCapture</em> = new ImageCapture(<em>videoTrack</em>)</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>videoTrack</code></dt>
+ <dd>이미지를 가져올 때 사용할 {{domxref("MediaStreamTrack")}}. 화상전화 스트림, 재생 중인 영화, 웹캠 스트림 등 모든 출처를 사용할 수 있습니다.</dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>지정한 비디오 트랙에서 정지 프레임을 캡처할 수 있는 <code>ImageCapture</code> 객체.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 예제는 {{domxref("MediaDevices.getUserMedia()")}}을 사용해, <code>ImageCapture()</code> 생성자에 필요한 {{domxref("MediaStreamTrack")}}을 가져오는 법을 보입니다.</p>
+
+<pre class="brush: js"> navigator.mediaDevices.getUserMedia({video: true})
+  .then(mediaStream =&gt; {
+    document.querySelector('video').srcObject = mediaStream
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+  })
+  .catch(error =&gt; console.log(error));</pre>
+
+<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','#dom-imagecapture-imagecapture','ImageCapture')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.ImageCapture")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/index.html b/files/ko/web/api/imagecapture/index.html
new file mode 100644
index 0000000000..4e96539bc1
--- /dev/null
+++ b/files/ko/web/api/imagecapture/index.html
@@ -0,0 +1,123 @@
+---
+title: ImageCapture
+slug: Web/API/ImageCapture
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - Interface
+  - MediaStream Image Capture API
+  - Reference
+translation_of: Web/API/ImageCapture
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><a href="/ko/docs/Web/API/MediaStream_Image_Capture_API">MediaStream Image Capture API</a>의 <strong><code>ImageCapture</code></strong> 인터페이스는 유효한 {{domxref("MediaStreamTrack")}}이 참조하는 카메라 또는 기타 촬영 장치를 통해 이미지나 사진을 촬영하기 위한 메서드를 제공합니다.</p>
+
+<h2 id="생성자">생성자</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.ImageCapture()", "ImageCapture()")}}</dt>
+ <dd>비디오 스트림을 나타내는 {{domxref("MediaStreamTrack")}}에서 정지 프레임(사진)을 캡처하기 위한 <code>ImageCapture</code> 객체를 반환합니다.</dd>
+</dl>
+
+<h2 id="속성">속성</h2>
+
+<dl>
+ <dt>{{domxref("ImageCapture.track")}} {{readonlyinline}}</dt>
+ <dd>생성자에 전달한 {{domxref("MediaStreamTrack")}}의 참조를 반환합니다.</dd>
+</dl>
+
+<h2 id="메서드">메서드</h2>
+
+<p><code>ImageCapture</code> 인터페이스는 {{domxref("EventTarget")}}의 메서드를 상속하며, 다음 메서드도 포함합니다.</p>
+
+<dl>
+ <dt>{{domxref("ImageCapture.takePhoto()")}}</dt>
+ <dd>{{domxref("MediaStreamTrack")}}의 출처 비디오 캡처 장치를 통해 단일 노출 촬영을 한 후, 그 데이터를 담은 {{domxref("Blob")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoCapabilities()")}}</dt>
+ <dd>가능한 설정 옵션을 담은 {{domxref("PhotoCapabilities")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("ImageCapture.getPhotoSettings()")}}</dt>
+ <dd>현재 사진 설정을 담은 {{domxref("PhotoSettings")}} 객체로 이행하는 {{jsxref("Promise")}}를 반환합니다.</dd>
+ <dt>{{domxref("ImageCapture.grabFrame()")}}</dt>
+ <dd>{{domxref("MediaStreamTrack")}}의 라이브 비디오에서 스냅샷을 찍은 후, 성공했으면 {{domxref("ImageBitmap")}}을 반환합니다.</dd>
+</dl>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 <a href="https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html">Chrome의 Grab Frame - Take Photo Sample</a>에서 가져온 것입니다. <code>ImageCapture</code>는 이미지를 캡처할 도구가 필요하므로, 다음 예제는 브라우저 단말기의 미디어 장치(카메라)로 시작합니다.</p>
+
+<p>이 예제는 {{domxref("MediaStream")}}으로부터 추출한 {{domxref("MediaStreamTrack")}}부터 시작합니다. 그 다음엔 해당 트랙을 사용해 <code>takePhoto()</code>와 <code>grabFrame()</code>을 호출할 <code>ImageCapture</code> 객체를 생성합니다. 마침내, 최종 결과를 캔버스 객체에 적용합니다.</p>
+
+<pre class="brush: js">var imageCapture;
+
+function onGetUserMediaButtonClick() {
+  navigator.mediaDevices.getUserMedia({video: true})
+  .then(mediaStream =&gt; {
+    document.querySelector('video').srcObject = mediaStream;
+
+    const track = mediaStream.getVideoTracks()[0];
+    imageCapture = new ImageCapture(track);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onGrabFrameButtonClick() {
+  imageCapture.grabFrame()
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#grabFrameCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; console.log(error));
+}
+
+function onTakePhotoButtonClick() {
+  imageCapture.takePhoto()
+  .then(blob =&gt; createImageBitmap(blob))
+  .then(imageBitmap =&gt; {
+    const canvas = document.querySelector('#takePhotoCanvas');
+    drawCanvas(canvas, imageBitmap);
+  })
+  .catch(error =&gt; 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;
+});</pre>
+
+<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','#imagecaptureapi','ImageCapture')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("api.ImageCapture")}}</p>
diff --git a/files/ko/web/api/imagecapture/takephoto/index.html b/files/ko/web/api/imagecapture/takephoto/index.html
new file mode 100644
index 0000000000..ac7fd39f3d
--- /dev/null
+++ b/files/ko/web/api/imagecapture/takephoto/index.html
@@ -0,0 +1,82 @@
+---
+title: ImageCapture.takePhoto()
+slug: Web/API/ImageCapture/takePhoto
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture
+  - Method
+  - Reference
+translation_of: Web/API/ImageCapture/takePhoto
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p><span class="seoSummary">{{domxref("ImageCapture")}} 인터페이스의<strong> <code>takePhoto()</code></strong> 메서드는 {{domxref("MediaStreamTrack")}}을 제공하는 비디오 캡처 장치를 사용해 단일 노출 촬영을 하고, 그 데이터를 담은 {{domxref("Blob")}}으로 이행하는 {{jsxref("Promise")}}를 반환합니다.</span></p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>blobPromise</em> = <em>imageCaptureObj</em>.takePhoto([<em>photoSettings</em>])</pre>
+
+<h3 id="매개변수">매개변수</h3>
+
+<dl>
+ <dt><code>photoSettings</code> {{optional_inline}}</dt>
+ <dd>사진을 촬영할 때 사용할 옵션을 나타내는 객체. 가능한 옵션은 다음과 같습니다.
+ <ul>
+  <li><code>fillLightMode</code>: 캡처 장치의 플래시 설정. <code>"auto"</code>, <code>"off"</code>, <code>"flash"</code> 중 하나를 사용할 수 있습니다.</li>
+  <li><code>imageHeight</code>: 원하는 이미지 크기의 높이를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, {{glossary("user agent", "사용자 에이전트")}}는 이 값과 제일 가까운 높이를 사용합니다.</li>
+  <li><code>imageWidth</code>: 원하는 이미지 크기의 너비를 나타내는 정숫값. 일련의 정해진 크기만 지원하는 경우, 사용자 에이전트는 이 값과 제일 가까운 너비를 사용합니다.</li>
+  <li><code>redEyeReduction</code>: 적목 현상 감소 기능이 존재하는 경우, 사용할지 나타내는 불리언 값.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="반환_값">반환 값</h3>
+
+<p>{{domxref("Blob")}}으로 이행하는 {{jsxref("Promise")}}.</p>
+
+<h2 id="예제">예제</h2>
+
+<p>다음 코드는 <a href="https://simpl.info/imagecapture/">Simple Image Capture 데모</a>에서 가져온 것으로, <code>takePhoto()</code>가 반환한 {{jsxref("Promise")}}의 {{domxref("Blob")}}을 사용해 {{htmlelement("img")}} 요소에 할당하는 방법을 보입니다. 코드를 짧게 유지하기 위해 {{domxref("ImageCapture")}} 객체의 초기화 과정은 생략했습니다.</p>
+
+<pre class="brush: js">var takePhotoButton = document.querySelector('button#takePhoto');
+var canvas = document.querySelector('canvas');
+
+takePhotoButton.onclick = takePhoto;
+
+function takePhoto() {
+  imageCapture.takePhoto().then(function(blob) {
+    console.log('Took photo:', blob);
+    img.classList.remove('hidden');
+    img.src = URL.createObjectURL(blob);
+  }).catch(function(error) {
+    console.log('takePhoto() error: ', error);
+  });
+}
+</pre>
+
+<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','#dom-imagecapture-takephoto','takePhoto()')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.takePhoto")}}</p>
+</div>
diff --git a/files/ko/web/api/imagecapture/track/index.html b/files/ko/web/api/imagecapture/track/index.html
new file mode 100644
index 0000000000..0cab8caacf
--- /dev/null
+++ b/files/ko/web/api/imagecapture/track/index.html
@@ -0,0 +1,49 @@
+---
+title: ImageCapture.track
+slug: Web/API/ImageCapture/track
+tags:
+  - API
+  - Experimental
+  - ImageCapture
+  - MediaStream Image Capture
+  - Property
+  - Read-only
+  - Reference
+translation_of: Web/API/ImageCapture/track
+---
+<div>{{APIRef("MediaStream Image")}}</div>
+
+<p>{{domxref("ImageCapture")}} 인터페이스의 <strong><code>track</code></strong> 읽기 전용 속성은 {{domxref("ImageCapture.ImageCapture","ImageCapture()")}} 생성자에 제공한 {{domxref("MediaStreamTrack")}}의 참조를 반환합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="syntaxbox">const <em>mediaStreamTrack</em> = <em>imageCaptureObj</em>.track</pre>
+
+<h3 id="값">값</h3>
+
+<p>{{domxref("MediaStreamTrack")}} 객체.</p>
+
+<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','#dom-imagecapture-track','track')}}</td>
+   <td>{{Spec2('MediaStream Image')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<div>
+
+
+<p>{{Compat("api.ImageCapture.track")}}</p>
+</div>