diff options
Diffstat (limited to 'files/ko/web/api/mediastreamtrack')
13 files changed, 886 insertions, 0 deletions
diff --git a/files/ko/web/api/mediastreamtrack/applyconstraints/index.html b/files/ko/web/api/mediastreamtrack/applyconstraints/index.html new file mode 100644 index 0000000000..f2c145bf85 --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/applyconstraints/index.html @@ -0,0 +1,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> diff --git a/files/ko/web/api/mediastreamtrack/clone/index.html b/files/ko/web/api/mediastreamtrack/clone/index.html new file mode 100644 index 0000000000..71e6794948 --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/clone/index.html @@ -0,0 +1,46 @@ +--- +title: MediaStreamTrack.clone() +slug: Web/API/MediaStreamTrack/clone +tags: + - API + - Media Capture and Streams API + - Media Streams API + - MediaStreamTrack + - Method + - Reference +translation_of: Web/API/MediaStreamTrack/clone +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p>{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>clone()</code></strong> 메서드는 <code>MediaStreamTrack</code> 객체의 사본을 반환합니다. 사본은 새로운 {{domxref("MediaStreamTrack.id", "id")}}를 제외하면 모든 값이 원본과 동일합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>newTrack</em> = <em>track</em>.clone()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p><code>clone()</code>을 호출한 {{domxref("MediaStreamTrack")}}에서 {{domxref("MediaStreamTrack.id", "id")}}를 제외하면 똑같은 새로운 <code>MediaStreamTrack</code>.</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('Media Capture', '#dom-mediastreamtrack-clone', 'clone()')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.clone")}}</p> diff --git a/files/ko/web/api/mediastreamtrack/enabled/index.html b/files/ko/web/api/mediastreamtrack/enabled/index.html new file mode 100644 index 0000000000..6fbe680416 --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/enabled/index.html @@ -0,0 +1,83 @@ +--- +title: MediaStreamTrack.enabled +slug: Web/API/MediaStreamTrack/enabled +tags: + - Media + - Media Capture and Streams + - MediaStreamTrack + - Property + - Reference + - WebRTC +translation_of: Web/API/MediaStreamTrack/enabled +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>enabled</code></strong> 속성은 트랙이 소스 스트림을 렌더링 할 수 있으면 <code>true</code>, 아니면 <code>false</code>를 반환합니다. <code>enabled</code> 속성을 사용해 음소거 기능을 구현할 수 있습니다.</span> 활성화된 경우 트랙의 데이터는 입력에서 목적지로 출력됩니다. 비활성 상태에서는 빈 프레임만 출력합니다.</p> + +<p>오디오 트랙의 경우 비활성화 트랙이 생성하는 빈 프레임은 아무 소리도 없는 것, 즉 모든 샘플의 값이 0인 프레임이며, 비디오의 경우 모든 픽셀이 검은 프레임입니다.</p> + +<p>사실, <code>enabled</code>의 값은 사용자가 트랙의 "음소거" 상태로 취급할 상태를 나타내며, {{domxref("MediaStreamTrack.muted", "muted")}} 속성은 전송 중 프레임 유실 등으로 인해 데이터를 출력할 수 없는 상태를 뜻합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 트랙의 연결이 끊긴 후에도 <code>enabled</code> 값을 바꿀 수는 있지만 아무런 효과도 없습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>enabledFlag</em> = <em>track</em>.enabled +<em>track</em>.enabled = [true | false]</pre> + +<h3 id="값">값</h3> + +<p><code>true</code>는 실제 미디어의 렌더링이 허용됨을 나타냅니다. <code>false</code>로 설정한 경우 빈 프레임만 생성합니다.</p> + +<p>빈 오디오 프레임의 모든 샘플 값은 0입니다. 빈 비디오 프레임의 모든 픽셀은 완전한 검정입니다.</p> + +<h2 id="사용_일람">사용 일람</h2> + +<p>{{domxref("MediaStreamTrack")}}이 카메라의 비디오 입력을 나타내는 경우, 트랙의 <code>enabled</code>를<code>false</code>로 설정해 비활성화하면 카메라의 녹화 표시도 꺼집니다. 예를 들어, iMac과 MacBook의 카메라 옆에 존재하는 초록색 "사용 중" LED도 꺼집니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 코드는 {{event("click")}} 이벤트 처리기를 사용해 일시정지를 구현합니다.</p> + +<pre class="brush: js">pauseButton.onclick = function(evt) { + const newState = !myAudioTrack.enabled; + + pauseButton.innerHTML = newState ? "&#x25B6;&#xFE0F;" : "&#x23F8;&#xFE0F;"; + myAudioTrack.enabled = newState; +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-enabled', 'enabled') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.enabled")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Media_Streams_API">MediaStream API</a></li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("MediaStreamTrack")}}</li> + <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/mediastreamtrack/getcapabilities/index.html b/files/ko/web/api/mediastreamtrack/getcapabilities/index.html new file mode 100644 index 0000000000..7d950a96c4 --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/getcapabilities/index.html @@ -0,0 +1,48 @@ +--- +title: MediaStreamTrack.getCapabilities() +slug: Web/API/MediaStreamTrack/getCapabilities +tags: + - API + - Media Capture and Streams API + - Media Streams API + - MediaStreamTrack + - Method + - Reference +translation_of: Web/API/MediaStreamTrack/getCapabilities +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>getCapabilities()</code></strong> 메서드는 {{glossary("user agent", "사용자 에이전트")}}가 지원하는 각각의 제약 조건에 적용할 수 있는 값이나 값의 범위를 나타내는 {{domxref('MediaTrackCapabilities')}} 객체를 반환합니다.</span></p> + +<p>브라우저의 기능 범위를 알아낸 후에는 스크립트에서 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}를 사용해 트랙의 설정을 이상적인 값으로, 또는 적어도 원하는 범위 안으로 설정할 수 있습니다. <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서에서 제약 속성 사용법에 대해 자세히 알아보세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>capabilities</em> = <em>track</em>.getCapabilities()</pre> + +<h3 id="반환_값">반환 값</h3> + +<p>사용자 에이전트가 지원하는 제약 속성 각각의 가능한 값 또는 값의 범위를 나타내는 {{domxref('MediaTrackCapabilities')}} 객체.</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('Media Capture', '#dom-mediastreamtrack-getcapabilities', 'getCapabilities()')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.getCapabilities")}}</p> diff --git a/files/ko/web/api/mediastreamtrack/getconstraints/index.html b/files/ko/web/api/mediastreamtrack/getconstraints/index.html new file mode 100644 index 0000000000..b0ad272813 --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/getconstraints/index.html @@ -0,0 +1,62 @@ +--- +title: MediaStreamTrack.getConstraints() +slug: Web/API/MediaStreamTrack/getConstraints +tags: + - API + - Media Capture and Streams API + - Media Streams API + - MediaStreamTrack + - Method + - Reference +translation_of: Web/API/MediaStreamTrack/getConstraints +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>getConstraints()</code></strong> 메서드는 현재 트랙에서 마지막으로 호출한 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 메서드로 설정한 제약을 포함한 객체를 반환합니다. 반환한 제약 값은 웹 사이트나 애플리케이션이 제약 속성에 지정한 특정 값 또는 값의 범위 조건을 나타냅니다.</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>constraints</em> = <em>track</em>.getConstraints()</pre> + +<h3 id="반환_값"><span style="font-size: 1.714rem; letter-spacing: -0.021em; line-height: 1;">반환 값</span></h3> + +<p>가장 최근에 웹 사이트 또는 애플리케이션에서 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 호출로 지정한 제약 속성을 나타내는 {{domxref("MediaTrackConstraints")}} 객체. 지정할 때 사용한 속성 순서를 동일하게 반환하며, 웹 사이트 또는 애플리케이션에서 지정하지 않은 속성은 포함하지 않습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 반환한 제약 집합이 반드시 미디어의 실제 상태를 나타내는 것은 아닙니다. 사이트 코드에서 지정한 어떤 제약 조건을 만족할 수 없는 상황에서도, 해당 속성을 반환 값에 포함합니다. 따라서 반환 값이 반드시 미디어의 실제 상태를 나타내는 것은 아닙니다. 모든 제약 속성에 현재 활성화된 값이 필요한 경우 {{domxref("MediaStreamTrack.getSettings", "getSettings()")}} 메서드를 사용하세요.</p> +</div> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 트랙의 현재 제약을 가져와서 {{domxref("MediaTrackConstraints.facingMode", "facingMode")}}를 설정한 후, 새로운 제약을 트랙에 적용합니다.</p> + +<pre class="brush: js">function switchCameras(track, camera) { + const constraints = track.getConstraints(); + constraints.facingMode = camera; + track.applyConstraints(constraints); +}</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-mediastreamtrack-getconstraints', 'getConstraints()')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.getConstraints")}}</p> diff --git a/files/ko/web/api/mediastreamtrack/getsettings/index.html b/files/ko/web/api/mediastreamtrack/getsettings/index.html new file mode 100644 index 0000000000..32df925e2e --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/getsettings/index.html @@ -0,0 +1,49 @@ +--- +title: MediaStreamTrack.getSettings() +slug: Web/API/MediaStreamTrack/getSettings +tags: + - API + - Media Capture and Streams + - MediaStreamTrack + - Method + - Reference +translation_of: Web/API/MediaStreamTrack/getSettings +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary">{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>getSettings()</code></strong> 메서드는 트랙의 각 제약 속성에 지금 적용된 값을 담은 {{domxref("MediaTrackSettings")}} 객체를 반환합니다.</span> <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서에서 제약 속성 사용법에 대해 자세히 알아보세요.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>settings</em> = <em>track</em>.getSettings()</pre> + +<h3 id="반환_값"><span style="font-size: 1.714rem; letter-spacing: -0.021em; line-height: 1;">반환 값</span></h3> + +<p>트랙의 현재 제약 속성 설정을 설명하는 {{domxref("MediaTrackSettings")}} 객체.</p> + +<div class="note"> +<p><strong>참고:</strong> 반환하는 객체는 모든 제약 속성을 포함하며, 사이트 코드에서 수정하지 않은 플랫폼 기본값 역시 들어있습니다. 사이트 코드에서 제일 최근에 적용한 제약 속성만 필요한 경우, {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}} 메서드를 사용하세요.</p> +</div> + +<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-mediastreamtrack-getsettings', 'getSettings()')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.getSettings")}}</p> diff --git a/files/ko/web/api/mediastreamtrack/id/index.html b/files/ko/web/api/mediastreamtrack/id/index.html new file mode 100644 index 0000000000..ee7a4ebe30 --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/id/index.html @@ -0,0 +1,50 @@ +--- +title: MediaStreamTrack.id +slug: Web/API/MediaStreamTrack/id +tags: + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference + - WebRTC +translation_of: Web/API/MediaStreamTrack/id +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><code><strong>MediaStreamTrack.id</strong></code> 읽기 전용 속성은 {{glossary("user agent", "사용자 에이전트")}}가 생성하는, 트랙의 전역 고유 식별자(GUID)를 담은 {{domxref("DOMString")}}을 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>id</em> = <em>track</em>.id</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-id', 'MediaStreamTrack.id') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.id")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/mediastreamtrack/index.html b/files/ko/web/api/mediastreamtrack/index.html new file mode 100644 index 0000000000..1b5fd8b18a --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/index.html @@ -0,0 +1,135 @@ +--- +title: MediaStreamTrack +slug: Web/API/MediaStreamTrack +tags: + - API + - Interface + - Media + - Media Capture and Streams API + - Media Streams API + - MediaStreamTrack + - Reference + - WebRTC +translation_of: Web/API/MediaStreamTrack +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary"><strong><code>MediaStreamTrack</code></strong> 인터페이스는 스트림 내의 단일 미디어 트랙을 나타냅니다. 보통 오디오와 비디오 트랙이지만, 다른 종류도 존재할 수 있습니다.</span></p> + +<h2 id="속성">속성</h2> + +<p><code>MediaStreamTrack</code>은 다음에 나열된 속성 외에도 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}로 설정하고 {{domxref("MediaStreamTrack.getConstraints", "getConstraints()")}}와 {{domxref("MediaStreamTrack.getSettings", "getSettings()")}}로 접근 가능한 제약 속성을 가집니다. <a href="/ko/docs/Web/API/Media_Streams_API/Constraints">기능, 제약, 설정</a> 문서를 방문해 제약 속성을 다루는 법을 알아보세요. 올바르게 다루지 않으면 불안정한 코드를 낳을 수 있습니다.</p> + +<dl> + <dt>{{domxref("MediaStreamTrack.contentHint")}}</dt> + <dd>트랙 유형에 대한 힌트를 제공하는 문자열입니다. 웹 애플리케이션이 트랙의 처리 방식을 결정할 때 사용할 수 있습니다.</dd> + <dt>{{domxref("MediaStreamTrack.enabled")}}</dt> + <dd>트랙을 활성화, 즉 미디어 출처 스트림의 렌더링을 허용하면 <code>true</code>이고 비활성화, 즉 미디어 소스 스트림 렌더링을 허용하지 않아 검은 화면과 조용함만 확인할 수 있으면 <code>false</code>인 속성입니다. 트랙의 연결이 끊긴 경우에도 값을 바꿀 수는 있으나 아무런 효과도 없습니다. + <div class="note"><strong>참고:</strong> 일반적인 "음소거" 기능은 <code>enabled</code>를 <code>false</code>로 바꿔서 구현할 수 있습니다. <code>muted</code> 속성은 기술적인 문제로 인해 미디어가 존재하지 않을 때를 나타냅니다.</div> + </dd> + <dt>{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}</dt> + <dd>트랙의 고유 식별자(GUID)를 담은 {{domxref("DOMString")}}을 반환합니다. 고유 식별자는 브라우저가 생성합니다.</dd> + <dt>{{domxref("MediaStreamTrack.isolated")}} {{ReadOnlyInline}}</dt> + <dd>트랙이 <strong>고립</strong>된 경우 <code>true</code>인 속성입니다. 고립 상태란 해당 <code>MediaStreamTrack</code>을 소유한 문서에서 트랙에 접근할 수 없을 때를 의미합니다. {{domxref("MediaStreamTrack.peerIdentity", "peerIdentity")}} 속성이 설정된 경우, 그리고 트랙의 소스가 교차 출처에 위치하는 경우 발생합니다.</dd> + <dt>{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}</dt> + <dd>오디오 트랙인 경우 <code>"audio"</code>, 비디오 트랙인 경우 <code>"video"</code>인 {{domxref("DOMString")}}을 반환합니다. 트랙이 소스에서 분리된 경우 변하지 않습니다.</dd> + <dt>{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}</dt> + <dd>트랙 소스에 대해 사용자 에이전트가 할당한 식별자를 담은 {{domxref("DOMString")}}을 반환합니다. 식별자의 예시는 <code>"internal microphone"</code>입니다. 빈 문자열일 수 있으며, 연결된 소스가 없는 경우 계속 빈 문자열로 남아 있습니다. 트랙이 소스에서 분리되더라도 식별자는 변하지 않습니다.</dd> + <dt>{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}</dt> + <dd>기술적인 문제로 인해 트랙이 미디어 데이터를 제공할 수 없음을 나타내는 불리언 값을 반환합니다. + <div class="note"><strong>참고:</strong> 일반적인 "음소거" 기능은 <code>enabled</code>를 <code>false</code>로 바꿔서 구현할 수 있으며, 음소거 해제는 <code>enabled</code>를 다시 <code>true</code>로 바꾸면 됩니다.</div> + </dd> + <dt>{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}</dt> + <dd>읽기 전용 트랙(비디오 파일 소스, 설정을 바꿀 수 없는 카메라 등)인 경우 <code>true</code>를 반환합니다. 그 외의 경우 <code>false</code>를 반환합니다.</dd> + <dt>{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}</dt> + <dd>트랙의 상태를 나타내는 열거형 값을 반환합니다. 가능한 값은 다음과 같습니다. + <ul> + <li><code>"live"</code>는 입력이 연결됐으며 실시간 데이터를 제공하고 있음을 나타냅니다. 이때, {{domxref("MediaStreamTrack.enabled", "enabled")}} 특성을 사용해 데이터 출력을 켜거나 끌 수 있습니다.</li> + <li><code>"ended"</code>는 입력이 더 이상 데이터를 전달하지 않고 있으며, 앞으로도 새로운 데이터를 제공하지 않을 것임을 나타냅니다.</li> + </ul> + </dd> +</dl> + +<dl class="hidden"> + <dt>{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}} {{deprecated_inline}}</dt> + <dd>Returns a Boolean with a value of <code>true</code> if the track is sourced by a {{domxref("RTCPeerConnection")}}, <code>false</code> otherwise.</dd> +</dl> + +<h2 id="메서드">메서드</h2> + +<dl> + <dt>{{domxref("MediaStreamTrack.applyConstraints()")}}</dt> + <dd>애플리케이션이 <code>MediaStreamTrack</code>에 사용 가능한 제약 속성을 원하는 값과 범위로 지정할 수 있는 메서드입니다.</dd> + <dt>{{domxref("MediaStreamTrack.clone()")}}</dt> + <dd><code>MediaStreamTrack</code>의 복제본을 반환합니다.</dd> + <dt>{{domxref("MediaStreamTrack.getCapabilities()")}}</dt> + <dd><code>MediaStreamTrack</code>에 사용 가능한 제약 속성을 반환합니다.</dd> + <dt>{{domxref("MediaStreamTrack.getConstraints()")}}</dt> + <dd><code>MediaStreamTrack</code>에 현재 지정된 제약을 담은 {{domxref('MediaTrackConstraints')}} 객체를 반환합니다. 이전에 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}}로 설정한 값과 동일합니다.</dd> + <dt>{{domxref("MediaStreamTrack.getSettings()")}}</dt> + <dd><code>MediaStreamTrack</code>에 현재 지정된 제약 속성 각각의 값을 담은 {{domxref("MediaTrackSettings")}} 객체를 반환합니다.</dd> + <dt>{{domxref("MediaStreamTrack.stop()")}}</dt> + <dd>트랙에 연결된 소스의 재생을 중단하고, 서로 분리합니다. 트랙의 상태는 <code>ended</code>로 변경합니다.</dd> +</dl> + +<h2 id="이벤트">이벤트</h2> + +<p>다음 이벤트는 <code>MediaStreamTrack</code>의 {{domxref("EventTarget.addEventListener", "addEventListener()")}}를 사용하거나 <code>on<em>eventname</em></code> 속성을 사용해 수신할 수 있습니다.</p> + +<dl> + <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/ended_event">ended</a></code></dt> + <dd>트랙의 플레이백이 끝났을 때, 즉 {{domxref("MediaStreamTrack.readyState", "readyState")}}의 값이 <code>ended</code>로 변했을 때 발생합니다.<br> + <code><a href="/ko/docs/Web/API/MediaStreamTrack/onended">onended</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd> + <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/mute_event">mute</a></code></dt> + <dd>기술적인 이유(네트워크 문제 등)로 인해 일시적으로 트랙이 데이터를 제공하지 못할 때, 즉 {{domxref("MediaStreamTrack.muted", "muted")}}의 값이 <code>true</code>로 변했을 때 발생합니다.<br> + <code><a href="/ko/docs/Web/API/MediaStreamTrack/onmute">onmute</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd> + <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/isolationchange_event">isolationchange</a></code></dt> + <dd>문서가 트랙에 대한 접근 권한을 얻거나 잃었을 때, 즉 {{domxref("MediaStreamTrack.isolated", "isolated")}}의 값이 변할 때 발생합니다.<br> + <code><a href="/ko/docs/Web/API/MediaStreamTrack/onisolationchange">onisolationchange</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd> + <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/unmute_event">unmute</a></code></dt> + <dd>데이터를 다시 사용할 수 있어서 <code>muted</code> 상태가 끝날 때 발생합니다.<br> + <code><a href="/ko/docs/Web/API/MediaStreamTrack/onunmute">onunmute</a></code> 이벤트 처리기 속성으로도 수신할 수 있습니다.</dd> +</dl> + +<dl class="hidden"> + <dt><code><a href="/ko/docs/Web/API/MediaStreamTrack/overconstrained_event">overconstrained</a></code> {{deprecated_inline}}</dt> + <dd>지정한 제약이 트랙과 호환되지 않아서 해당 제약을 무시할 때 발생합니다.<br> + <code><a href="/ko/docs/Web/API/MediaStreamTrack/onoverconstrained">onoverconstrained</a></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('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("WebRTC Identity", "#isolated-track", "Isolated tracks")}}</td> + <td>{{Spec2("WebRTC Identity")}}</td> + <td>Additional properties for isolated track support</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div> + + +<p>{{Compat("api.MediaStreamTrack")}}</p> +</div> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> + <li>{{domxref("MediaStream")}}</li> +</ul> diff --git a/files/ko/web/api/mediastreamtrack/kind/index.html b/files/ko/web/api/mediastreamtrack/kind/index.html new file mode 100644 index 0000000000..752ab567bd --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/kind/index.html @@ -0,0 +1,59 @@ +--- +title: MediaStreamTrack.kind +slug: Web/API/MediaStreamTrack/kind +tags: + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference + - WebRTC +translation_of: Web/API/MediaStreamTrack/kind +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary"><code><strong>MediaStreamTrack.kind</strong></code> 읽기 전용 속성은 트랙이 오디오인 경우 <code>"audio"</code>, 비디오인 경우 <code>"video"</code>인 {{domxref("DOMString")}}을 반환합니다.</span> 트랙이 소스에서 분리된 경우엔 바뀌지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>type</em> = <em>track</em>.kind</pre> + +<h3 id="값">값</h3> + +<p>{{domxref("DOMString")}}. 가능한 값은 다음과 같습니다.</p> + +<ul> + <li><code>"audio"</code>: 트랙이 오디오 트랙입니다.</li> + <li><code>"video"</code>: 트랙이 비디오 트랙입니다.</li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-kind', 'MediaStreamTrack.kind') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.kind")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/mediastreamtrack/label/index.html b/files/ko/web/api/mediastreamtrack/label/index.html new file mode 100644 index 0000000000..0c2d615e2a --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/label/index.html @@ -0,0 +1,54 @@ +--- +title: MediaStreamTrack.label +slug: Web/API/MediaStreamTrack/label +tags: + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference + - WebRTC +translation_of: Web/API/MediaStreamTrack/label +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><span class="seoSummary"><code><strong>MediaStreamTrack.label</strong></code> 읽기 전용 속성은 {{glossary("user agent", "사용자 에이전트")}}가 트랙 소스를 식별하기 위해 지정한 레이블을 담은 {{domxref("DOMString")}}을 반환합니다.</span> 소스가 연결되지 않은 경우 빈 문자열이며, 연결됐던 트랙이 소스에서 분리되더라도 레이블은 바뀌지 않습니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>label</em> = <em>track</em>.label</pre> + +<h3 id="값">값</h3> + +<p>사용자 에이전트가 지정한 식별 레이블. <code>"internal microphone"</code> 등의 형태입니다.</p> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-label', 'MediaStreamTrack.label') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.label")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/Guide/API/WebRTC">WebRTC</a></li> +</ul> diff --git a/files/ko/web/api/mediastreamtrack/muted/index.html b/files/ko/web/api/mediastreamtrack/muted/index.html new file mode 100644 index 0000000000..c212d7b424 --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/muted/index.html @@ -0,0 +1,67 @@ +--- +title: MediaStreamTrack.muted +slug: Web/API/MediaStreamTrack/muted +tags: + - API + - Media + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference +translation_of: Web/API/MediaStreamTrack/muted +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p>{{domxref("MediaStreamTrack")}} 인터페이스의 <strong><code>muted</code></strong> 읽기 전용 속성은 트랙이 현재 미디어 출력을 제공할 수 없는 상태인지를 나타내는 {{jsxref("Boolean")}}을 반환합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 사용자가 트랙을 음소거할 수 있는 기능을 구현하려면 {{domxref("MediaStreamTrack.enabled", "enabled")}} 속성을 사용하세요. <code>enabled</code>를 <code>false</code>로 바꿔 트랙을 비활성하면 빈 프레임(모든 샘플이 0인 오디오 프레임, 모든 픽셀이 검은색인 비디오 프레임)만 생성합니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>mutedFlag</em> = <em>track.</em>muted</pre> + +<h3 id="값">값</h3> + +<p>트랙이 중단된 상태면 <code>true</code>, 아니면 <code>false</code>.</p> + +<div class="note"> +<p><strong>참고:</strong> 되도록이면 트랙의 중단 상태를 알기 위해 <code>muted</code>를 폴링 하는 것보다는 {{event("mute")}}와 {{event("unmute")}} 이벤트를 수신하세요.</p> +</div> + +<h2 id="예제">예제</h2> + +<p>다음 예제 코드는 {{domxref("MediaStreamTrack")}} 배열에서 중단된 트랙의 수를 셉니다.</p> + +<pre class="brush: js">let mutedCount = 0; + +trackList.forEach((track) => { + if (track.muted) { + mutedCount += 1; + } +});</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-mediastreamtrack-muted', 'muted')}}</td> + <td>{{Spec2('Media Capture')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.muted")}}</p> diff --git a/files/ko/web/api/mediastreamtrack/readystate/index.html b/files/ko/web/api/mediastreamtrack/readystate/index.html new file mode 100644 index 0000000000..97a6b5262d --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/readystate/index.html @@ -0,0 +1,60 @@ +--- +title: MediaStreamTrack.readyState +slug: Web/API/MediaStreamTrack/readyState +tags: + - API + - Media Capture and Streams + - MediaStreamTrack + - Property + - Read-only + - Reference +translation_of: Web/API/MediaStreamTrack/readyState +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><code><strong>MediaStreamTrack.readyState</strong></code> 읽기 전용 속성은 트랙의 상태를 나타내는 열거형 값을 반환합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox">const <em>state</em> = <em>track</em>.readyState</pre> + +<h3 id="값">값</h3> + +<p>다음의 두 값 중 하나입니다.</p> + +<ul> + <li><code>"live"</code>는 입력이 연결됐으며 트랙이 실시간 데이터를 받는 중임을 나타냅니다. 이 때, 데이터 출력은 {{domxref("MediaStreamTrack.enabled")}} 속성을 사용해 켜거나 끌 수 있습니다.</li> + <li><code>"ended"</code>는 입력이 더 이상 데이터를 제공하지 않으며 앞으로도 새로운 데이터를 제공하지 않을 것임을 나타냅니다.</li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-readystate', 'MediaStreamTrack.readyState') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.readyState")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/Web/API/WebRTC_API">WebRTC</a></li> + <li>{{domxref("MediaStreamTrack.onended")}}</li> +</ul> diff --git a/files/ko/web/api/mediastreamtrack/stop/index.html b/files/ko/web/api/mediastreamtrack/stop/index.html new file mode 100644 index 0000000000..e8ee82011e --- /dev/null +++ b/files/ko/web/api/mediastreamtrack/stop/index.html @@ -0,0 +1,82 @@ +--- +title: MediaStreamTrack.stop() +slug: Web/API/MediaStreamTrack/stop +tags: + - API + - Media + - Media Capture and Streams API + - Media Streams API + - MediaStreamTrack + - Method + - Reference + - WebRTC +translation_of: Web/API/MediaStreamTrack/stop +--- +<div>{{APIRef("Media Capture and Streams")}}</div> + +<p><code><strong>MediaStreamTrack.stop()</strong></code> 메서드는 트랙을 정지합니다.</p> + +<h2 id="구문">구문</h2> + +<pre class="syntaxbox"><em>track</em>.stop() +</pre> + +<h2 id="설명">설명</h2> + +<p><code>stop()</code> 메서드를 호출하면 {{glossary("user agent", "사용자 에이전트")}}에게 {{domxref("MediaStreamTrack")}}이 소스(파일, 네트워크 스트림, 장치 카메라와 마이크...)를 더는 필요로 하지 않음을 표현합니다. 두 개의 탭이 장치의 마이크에 접근하고 있는 경우처럼, 다수의 트랙이 하나의 소스를 사용하고 있을 수도 있으므로 소스 자체는 즉시 멈추지 않을 수도 있으며, 대신 트랙과 소스를 즉시 분리합니다. 아무런 미디어 트랙도 소스를 사용하지 않는 상태가 되면 그때 소스가 완전히 정지합니다.</p> + +<p><code>stop()</code>을 호출함과 동시에 {{domxref("MediaStreamTrack.readyState", "readyState")}} 속성은 <code>ended</code>로 바뀝니다.</p> + +<h2 id="예제">예제</h2> + +<h3 id="비디오_스트림_정지">비디오 스트림 정지</h3> + +<p>이번 예제는 주어진 {{HTMLElement("video")}} 요소의 모든 트랙에서 <code>stop()</code>을 호출해 비디오 스트림을 정지하는 함수입니다.</p> + +<pre class="brush: js">function stopStreamedVideo(videoElem) { + const stream = videoElem.srcObject; + const tracks = stream.getTracks(); + + tracks.forEach(function(track) { + track.stop(); + }); + + videoElem.srcObject = null; +}</pre> + +<p>우선 비디오 요소에서 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 속성을 사용해 스트림을 가져오는 것부터 시작합니다. 그다음으로는 {{domxref("MediaStream.getTracks", "getTracks()")}} 메서드를 사용해 스트림의 트랙 목록을 가져오고, 이제 {{jsxref("Array.forEach", "forEach()")}}로 각 트랙의 <code>stop()</code> 메서드를 호출합니다.</p> + +<p>마지막으로, <code>srcObject</code>를 {{jsxref("null")}}로 설정해서 {{domxref("MediaStream")}}과의 연결을 끊어, 객체를 해제할 수 있도록 합니다.</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Media Capture', '#dom-mediastreamtrack-stop', 'MediaStreamTrack.stop()') }}</td> + <td>{{ Spec2('Media Capture') }}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("api.MediaStreamTrack.stop")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>메서드가 속한 {{domxref("MediaStreamTrack")}} 인터페이스</li> + <li>{{domxref("MediaStreamTrack.readyState")}}</li> + <li>{{event("ended")}}</li> +</ul> |