MSE

Media Source Extensions는 HTMLMediaElement에서 외부 plugin의 도움 없이 Media Streaming을 지원해주는 익스텐션이다.

궁극적으로 MediaSource 객체를 활용하여 Media에 보다 세세한 접근이 가능해진다.

MediaSource

몇년 전까지 스트리밍은 Flash의 영역이었지만 이제 MSE를 사용하여 src로 제공되는 단일 트랙 값을 MediaSource객체로 참조할 수 있는데
이를 통해 MediaSource 객체를 활용함으로써 src에 대한 다양한 접근 및 활용이 가능해진다.

물론 스트리밍, 네트워크 대역폭에 따른 최적화 스트리밍, 세그먼트 요청 방식, chunk 가공, 원하는 지점부터의 chunk 요청 등 Media재생에 대한 다양한 접근이 필요하지 않다면

<video>
  <source>src</source>
</video>

의 접근 방식이 보다 효과적일 것이다.

MSE를 사용해 MediaSource를 다루는 방식은 꽤나 복잡하고 힘든 작업...

mediaSource.readyState

readyState 는 mediaSource의 읽기 전용 프로퍼티이며
MediaSource 상태 리스트를 반환한다.

상태는 총 3가지로 나누어진다.

• closed: src가 현재 미디어 요소에 연결되어 있지 않음

  window.URL.createObjectURL(mediaSource);

  src만 준비됨

• open: 소스가 미디어 요소에 연결되어 SourceBuffer객체 를 받을 준비가 됨

   videoRef.current.src =  window.URL.createObjectURL(mediaSource)

  Video tag 와 src가 잘 연결됨

• ended: src가 Video tag에 연결되었지만 스트리밍이 종료됨

MediaSource.endOfStream().

보통 eneded 이벤트에 위와같이 endOfStream() 메소드를 실행함

MediaSource.isTypeSupported()

인자로 들어가는 MIME type이 MediaSource가 지원하는 타입의 MIME type인지 체크하는 메소드이다.
true / false와 같은 boolean typed을 반환한다.

mimeType

MIME media type은 브라우저에서 해당 media를 지원할 수 있는지에 대한 데이터를 뜻한다.

보통 코덱에 대한 세부정보를 제공하는 코덱 파라미터를 포함한다.

WebMIME-Type,Content-Type이란?