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을 직접 사용하도록 업데이트해야 합니다.

이벤트

브라우저 호환성

api.MediaStream

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaStream
MediaStream() constructor
active
active event
Non-standard
addTrack
addtrack event
clone
getAudioTracks
getTrackById
getTracks
getVideoTracks
id
inactive event
Non-standard
removeTrack
removetrack event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Non-standard. Check cross-browser support before using.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

api.MediaStreamTrack

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaStreamTrack
applyConstraints
aspectRatio constraint
autoGainControl constraint
channelCount constraint
deviceId constraint
displaySurface constraint
echoCancellation constraint
facingMode constraint
frameRate constraint
groupId constraint
height constraint
latency constraint
logicalSurface constraint
noiseSuppression constraint
resizeMode constraint
sampleRate constraint
sampleSize constraint
suppressLocalAudioPlayback constraint
Experimental
volume constraint
DeprecatedNon-standard
width constraint
capturehandlechange event
Experimental
clone
contentHint
enabled
ended event
getCapabilities
getCaptureHandle
Experimental
getConstraints
getSettings
id
kind
label
mute event
muted
readyState
stop
unmute event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

api.MediaDevices

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaDevices
devicechange event
enumerateDevices
getDisplayMedia()
Audio capture support
controller option
Experimental
monitorTypeSurfaces option
Experimental
preferCurrentTab option
ExperimentalNon-standard
selfBrowserSurface option
Experimental
surfaceSwitching option
Experimental
systemAudio option
Experimental
getSupportedConstraints
getUserMedia
Secure context required
selectAudioOutput
Experimental
setCaptureHandleConfig
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

api.MediaDeviceInfo

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
MediaDeviceInfo
deviceId
groupId
kind
label
toJSON()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

api.InputDeviceInfo

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
InputDeviceInfo
getCapabilities

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

api.CanvasCaptureMediaStreamTrack

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CanvasCaptureMediaStreamTrack
canvas
requestFrame

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

같이 보기