Media Capture and Streams API (미디어 스트림)

Media Streams API, 짧게는 MediaStream API라고 불리는 Media Capture and Streams API는 오디오와 비디오 데이터 스트리밍을 지원하는 WebRTC 관련 API 입니다. 이 API는 미디어 스트림과 스트림을 구성하는 트랙, 데이터 형식과 관련된 제한인자, 데이터를 비동기적으로 사용할 때의 성공과 오류 콜백, 그리고 이 과정에서 발생하는 이벤트에 대한 인터페이스 및 메서드를 제공합니다.

개념 및 사용법

이 API는 오디오 혹은 비디오와 관련된 데이터를 나타내는 MediaStream 객체 조작에 기반합니다.

MediaStream은 0개 혹은 여러 개의 MediaStreamTrack 객체로 구성되며, 각자 다양한 오디오와 비디오 트랙을 나타냅니다. 각각의 MediaStreamTrack은 하나 이상의 채널을 가질 수 있습니다. 채널은, 오디오로 예를 들면 스테레오 오디오 트랙에서의 "왼쪽"과 "오른쪽"처럼, 미디어 스트림의 제일 작은 단위를 나타냅니다.

MediaStream 객체는 하나의 입력과 하나의 출력을 가집니다. getUserMedia()로 생성한 MediaStream 객체는 "로컬" 미디어 스트림이라고 부르며, 사용자의 카메라와 마이크 중 하나를 입력 출처로 사용합니다. 반면 <video>, <audio>와 같은 미디어 요소, 네트워크에서 들어오는 스트림, WebRTC RTCPeerConnection API로 획득한 스트림, Web Audio API MediaStreamAudioSourceNode로 생성한 스트림 등은 비 로컬 MediaStream이라고 합니다.

MediaStream 객체의 출력은 소비자(컨슈머)로 연결됩니다. 소비자는 <video>, <audio>와 같은 미디어 요소, WebRTC RTCPeerConnection API, Web Audio API MediaStreamAudioSourceNode가 가능합니다.

인터페이스

아래의 참고 문서에서는 Media Capture and Streams API를 구성하는 인터페이스에 대한 기초적인 지식을 찾을 수 있습니다.

Media Capture and Streams API의 초기 명세는 MediaStreamTrack에 기반한 별도의 AudioStreamTrackVideoStreamTrack 인터페이스를 포함했으며, 각자 오디오와 비디오 스트림을 따로 나타냈었습니다. 그러나 이런 구분은 더 이상 존재하지 않으며, 두 인터페이스를 사용하는 코드는 MediaStreamTrack을 직접 사용하도록 업데이트해야 합니다.

이벤트

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
MediaStreamChrome Full support 14Edge Full support YesFirefox Full support 15IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 15Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.0
MediaStream() constructorChrome Full support 19Edge Full support YesFirefox Full support 44IE No support NoOpera Full support 42Safari No support NoWebView Android Full support 37Chrome Android Full support 25Firefox Android Full support 42Opera Android No support NoSafari iOS No support NoSamsung Internet Android Full support 6.0
activeChrome Full support 45Edge Full support 12Firefox Full support 52IE No support NoOpera No support NoSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 52Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 5.0
active eventChrome Full support 45Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android Full support 45Chrome Android Full support 45Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android Full support 5.0
addTrackChrome Full support 26Edge Full support 12Firefox Full support 44IE No support NoOpera No support NoSafari Full support YesWebView Android Full support 37Chrome Android Full support 26Firefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.5
addtrack eventChrome Full support YesEdge Full support 12Firefox Full support 50IE No support NoOpera No support NoSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 50Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support Yes
cloneChrome Full support 45Edge Full support 12Firefox Full support 48IE No support NoOpera No support NoSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 48Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 5.0
ended
Deprecated
Chrome No support ? — 54
Notes
No support ? — 54
Notes
Notes Deprecated in Chrome 52.
Edge ? Firefox No support NoIE No support NoOpera No support ? — 39Safari ? WebView Android No support ? — 54
Notes
No support ? — 54
Notes
Notes Deprecated in Chrome 52.
Chrome Android No support ? — 54
Notes
No support ? — 54
Notes
Notes Deprecated in Chrome 52.
Firefox Android No support NoOpera Android No support ? — 41Safari iOS ? Samsung Internet Android No support ? — 6.0
Notes
No support ? — 6.0
Notes
Notes Deprecated in Samsung Internet 6.0.
getAudioTracksChrome Full support 26Edge Full support 12Firefox Full support 22
Notes
Full support 22
Notes
Notes Prior to Firefox 64, this method returned an array of AudioStreamTrack objects. However, MediaStreamTrack has now subsumed that interface's functionality.
IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 37Chrome Android Full support 26Firefox Android Full support 22
Notes
Full support 22
Notes
Notes Prior to Firefox 64, this method returned an array of AudioStreamTrack objects. However, MediaStreamTrack has now subsumed that interface's functionality.
Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.5
getTrackByIdChrome Full support 26Edge Full support 12Firefox Full support 49IE No support NoOpera No support NoSafari Full support YesWebView Android Full support 37Chrome Android Full support 26Firefox Android Full support 49Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.5
getTracks
Experimental
Chrome Full support 45Edge Full support 12Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 45Chrome Android Full support 45Firefox Android Full support YesOpera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 5.0
getVideoTracks
Experimental
Chrome Full support 26Edge Full support 12Firefox Full support 22
Notes
Full support 22
Notes
Notes Prior to Firefox 64, this method returned an array of VideoStreamTrack objects. However, MediaStreamTrack has now subsumed that interface's functionality.
IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 37Chrome Android Full support 26Firefox Android Full support 22
Notes
Full support 22
Notes
Notes Prior to Firefox 64, this method returned an array of VideoStreamTrack objects. However, MediaStreamTrack has now subsumed that interface's functionality.
Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.5
idChrome No support ? — 54Edge Full support 12Firefox Full support 41IE No support NoOpera No support ? — 39Safari Full support YesWebView Android No support ? — 54Chrome Android No support ? — 54Firefox Android Full support 41Opera Android No support ? — 41Safari iOS Full support YesSamsung Internet Android No support ? — 6.0
inactive eventChrome Full support 45Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android Full support 45Chrome Android Full support 45Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android Full support 5.0
label
Deprecated
Chrome No support ? — 54
Notes
No support ? — 54
Notes
Notes Deprecated in Chrome 45.
Edge ? Firefox ? IE No support NoOpera No support NoSafari ? WebView Android No support ? — 54
Notes
No support ? — 54
Notes
Notes Deprecated in Chrome 45.
Chrome Android No support ? — 54
Notes
No support ? — 54
Notes
Notes Deprecated in Chrome 45.
Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android No support ? — 6.0
Notes
No support ? — 6.0
Notes
Notes Deprecated in Samsung Internet 5.0.
onactiveChrome Full support 45Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android Full support 45Chrome Android Full support 45Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android Full support 5.0
onaddtrackChrome Full support 26Edge Full support 12Firefox Full support 50IE No support NoOpera No support NoSafari Full support YesWebView Android Full support 37Chrome Android Full support 26Firefox Android Full support 50Opera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.5
oninactiveChrome Full support 45Edge ? Firefox ? IE No support NoOpera ? Safari ? WebView Android Full support 45Chrome Android Full support 45Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android Full support 5.0
onremovetrackChrome Full support 26Edge Full support 12Firefox No support NoIE No support NoOpera No support NoSafari Full support YesWebView Android Full support 37Chrome Android Full support 26Firefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.5
removeTrackChrome Full support 26Edge Full support 12Firefox Full support YesIE No support NoOpera Full support YesSafari Full support YesWebView Android Full support 37Chrome Android Full support 26Firefox Android Full support YesOpera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support 1.5
removetrack eventChrome Full support YesEdge Full support 12Firefox No support NoIE No support NoOpera No support NoSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android Full support Yes
stop
Deprecated
Chrome No support ? — 47Edge Full support 13Firefox ? IE No support NoOpera No support NoSafari ? WebView Android No support ? — 47Chrome Android No support ? — 47Firefox Android ? Opera Android No support NoSafari iOS ? Samsung Internet Android No support ? — 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

같이 보기