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
|
---
title: Media Capture and Streams API (미디어 스트림)
slug: Web/API/Media_Streams_API
tags:
- API
- Media
- Media Capture and Streams
- Media Capture and Streams API
- Media Streams API
- Overview
translation_of: Web/API/Media_Streams_API
---
<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>
<p><strong>Media Streams API</strong>, 짧게는 <strong>MediaStream API</strong>라고 불리는 <strong>Media Capture and Streams API</strong>는 오디오와 비디오 데이터 스트리밍을 지원하는 <a href="/ko/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a> 관련 API 입니다. 이 API는 미디어 스트림과 스트림을 구성하는 트랙, 데이터 형식과 관련된 제한인자, 데이터를 비동기적으로 사용할 때의 성공과 오류 콜백, 그리고 이 과정에서 발생하는 이벤트에 대한 인터페이스 및 메서드를 제공합니다.</p>
<h2 id="개념_및_사용법">개념 및 사용법</h2>
<p>이 API는 오디오 혹은 비디오와 관련된 데이터를 나타내는 {{domxref("MediaStream")}} 객체 조작에 기반합니다.</p>
<p><code>MediaStream</code>은 0개 이상의 {{domxref("MediaStreamTrack")}} 객체로 구성되며, 각자 다양한 오디오와 비디오 <strong>트랙</strong>을 나타냅니다. 각각의 <code>MediaStreamTrack</code>은 하나 이상의 <strong>채널</strong>을 가질 수 있습니다. 채널은, 오디오로 예를 들면 스테레오 오디오 트랙에서의 "왼쪽"과 "오른쪽"처럼, 미디어 스트림의 제일 작은 단위를 나타냅니다.</p>
<p><code>MediaStream</code> 객체는 하나의 <strong>입력</strong>과 하나의 <strong>출력</strong>을 가집니다. {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}로 생성한 <code>MediaStream</code> 객체는 "로컬" 미디어 스트림이라고 부르며, 사용자의 카메라와 마이크 중 하나를 입력 출처로 사용합니다. 반면 {{htmlelement("video")}}, {{htmlelement("audio")}}와 같은 미디어 요소, 네트워크에서 들어오는 스트림, WebRTC {{domxref("RTCPeerConnection")}} API로 획득한 스트림, <a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}로 생성한 스트림 등은 비 로컬 <code>MediaStream</code>이라고 합니다.</p>
<p><code>MediaStream</code> 객체의 출력은 <strong>소비자</strong>(컨슈머)로 연결됩니다. 소비자는 {{htmlelement("video")}}, {{htmlelement("audio")}}와 같은 미디어 요소, WebRTC {{domxref("RTCPeerConnection")}} API, <a href="/ko/docs/Web/API/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}가 가능합니다.</p>
<h2 id="인터페이스">인터페이스</h2>
<p>아래의 참고 문서에서는 Media Capture and Streams API를 구성하는 인터페이스에 대한 기초적인 지식을 찾을 수 있습니다.</p>
<div class="index">
<ul>
<li>{{domxref("BlobEvent")}}</li>
<li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li>
<li>{{domxref("InputDeviceInfo")}}</li>
<li>{{domxref("MediaDeviceKind")}}</li>
<li>{{domxref("MediaDeviceInfo")}}</li>
<li>{{domxref("MediaDevices")}}</li>
<li>{{domxref("MediaStream")}}</li>
<li>{{domxref("MediaStreamConstraints")}}</li>
<li>{{domxref("MediaStreamEvent")}}</li>
<li>{{domxref("MediaStreamTrack")}}</li>
<li>{{domxref("MediaStreamTrackEvent")}}</li>
<li>{{domxref("MediaTrackCapabilities")}}</li>
<li>{{domxref("MediaTrackConstraints")}}</li>
<li>{{domxref("MediaTrackSettings")}}</li>
<li>{{domxref("MediaTrackSupportedConstraints")}}</li>
<li>{{domxref("NavigatorUserMedia")}}</li>
<li>{{domxref("NavigatorUserMediaError")}}</li>
<li>{{domxref("OverconstrainedError")}}</li>
<li>{{domxref("URL")}}</li>
</ul>
</div>
<p>Media Capture and Streams API의 초기 명세는 {{domxref("MediaStreamTrack")}}에 기반한 별도의 <code>AudioStreamTrack</code>과 <code>VideoStreamTrack</code> 인터페이스를 포함했으며, 각자 오디오와 비디오 스트림을 따로 나타냈었습니다. 그러나 이런 구분은 더 이상 존재하지 않으며, 두 인터페이스를 사용하는 코드는 <code>MediaStreamTrack</code>을 직접 사용하도록 업데이트해야 합니다.</p>
<h2 id="이벤트">이벤트</h2>
<div class="index">
<ul>
<li>{{event("addtrack")}}</li>
<li>{{event("ended")}}</li>
<li>{{event("muted")}}</li>
<li>{{event("overconstrained")}}</li>
<li>{{event("removetrack")}}</li>
<li>{{event("started")}}</li>
<li>{{event("unmuted")}}</li>
</ul>
</div>
<div class="hidden">
<h2 id="안내서와_자습서">안내서와 자습서</h2>
<p>하위 문서 하나라도 완료 후 hidden 해제</p>
<p>아래의 문서에서 API는 이 API를 잘 사용 할 수 있도록 도와주고,원하는 업무를 어떻게 처리하는지에 대한 추가적인 가이드 및 정보를 제공합니다.</p>
<p>{{LandingPageListSubpages}}</p>
</div>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("api.MediaStream")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/API/WebRTC_API" title="/en-US/docs/WebRTC">WebRTC</a></li>
<li>{{domxref("mediaDevices.getUserMedia()")}}</li>
</ul>
|
