1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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 => {
// 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>
|
