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
|
---
title: MediaStreamTrack.applyConstraints()
slug: Web/API/MediaStreamTrack/applyConstraints
tags:
- API
- Media Capture and Streams API
- Media Streams API
- MediaStreamTrack
- Method
translation_of: Web/API/MediaStreamTrack/applyConstraints
---
<div>{{APIRef("Media Capture and Streams")}}</div>
<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <code><strong>applyConstraints</strong></code><strong><code>()</code></strong> 메서드는 트랙에 제약을 적용합니다. 제약을 통해 웹 사이트와 앱은 프레임 레이트, 해상도, 플래시 여부 등, 제약 가능한 속성을 자신이 바라는 이상적인 값과 허용 가능한 범위로 제한할 수 있습니다.</span></p>
<p>제약을 통해 미디어를 여러분의 선호 가이드라인에 맞출 수 있습니다. 예를 들면 고해상도 비디오를 선호하되 네트워크 사용량 폭증을 막기 위해 다소 낮은 프레임 레이트를 요구할 수 있습니다. 또한 이상적인 크기나, 허용 가능한 크기의 범위를 지정할 수도 있습니다. <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서의 <a href="/ko/docs/Web/API/Media_Streams_API/Constraints#Applying_constraints">제약 적용</a> 항목에서 원하는 제약을 적용하는 방법에 대해 더 알아보세요.</p>
<h2 id="구문">구문</h2>
<pre class="syntaxbox">const <em>appliedPromise</em> = <em>track</em>.applyConstraints([<em>constraints</em>])</pre>
<h3 id="매개변수">매개변수</h3>
<dl>
<dt><code>constraints</code> {{optional_inline}}</dt>
<dd>트랙에 적용할 제약 속성을 나열하는 {{domxref("MediaTrackConstraints")}} 객체. 기존에 존재하는 제약은 모두 새로운 값으로 대체하고, <code>constraints</code> 매개변수에 포함하지 않은 제약의 경우 기본값으로 돌아갑니다. 매개변수를 생략한 경우, 모든 사용자 지정 제약을 기본값으로 초기화합니다. <code>constraints</code> 객체는 {{jsxref("Promise")}}가 이행하기 전에 반드시 적용해야 하는 기본 제약 설정을 나타냅니다. 추가로, 반드시 동일한 조건이어야 함을 나타내는 고급 제약도 <code>MediaTrackConstrants</code> 객체 배열로 포함할 수 있습니다.</dd>
</dl>
<h3 id="반환_값">반환 값</h3>
<p>제약을 성공적으로 적용한 경우 이행하는 {{jsxref("Promise")}}. 제약 적용에 실패한 경우, 이름이 <code>OverconstrainedError</code>인 {{domxref("MediaStreamError")}}로 거부합니다. 제약이 너무 엄격해서 일치하는 조건을 찾지 못한 경우 발생할 수 있습니다.</p>
<h2 id="예제">예제</h2>
<p>다음 코드는 기본과 고급 제약을 지정하는 법을 보입니다. 우선 페이지와 앱이 640에서 1280의 너비, 480에서 720의 높이가 필요하다고 지정합니다. 이때 뒤쪽의 큰 수를 선호하는 값으로 나타냅니다. 고급 제약은 더 나아가 1920*1280의 이미지를 선호하며, 이 크기를 제공할 수 없는 경우 가로세로비 1.333을 요구합니다. 이렇게 여러 개의 제약을 두는 것을 명세는 "백오프 전략"이라고 말합니다.</p>
<pre class="brush: js">const constraints = {
width: {min: 640, ideal: 1280},
height: {min: 480, ideal: 720},
advanced: [
{width: 1920, height: 1280},
{aspectRatio: 1.333}
]
};
navigator.mediaDevices.getUserMedia({ video: true })
.then(mediaStream => {
const track = mediaStream.getVideoTracks()[0];
track.applyConstraints(constraints)
.then(() => {
// Do something with the track such as using the Image Capture API.
})
.catch(e => {
// The constraints could not be satisfied by the available devices.
});
});
</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('Media Capture', '#dom-mediatrackconstraints', 'applyConstraints()')}}</td>
<td>{{Spec2('Media Capture')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('MediaStream Image', '#mediatrackconstraintset-section','applyConstraints()')}}</td>
<td>{{Spec2('MediaStream Image')}}</td>
<td>Adds image constraints.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.MediaStreamTrack.applyConstraints")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/API/MediaStream_Image_Capture_API">MediaStream Image Capture API</a></li>
</ul>
|
