SourceBuffer

SourceBuffer는 MediaSource객체에 재생이 가능한 Media Segment를 전달해주는 메소드이다.

const sourceBuffer = mediaSource.addSourceBuffer(mimeType);

와 같이 addSourceBuffer()메소드에 mimeType을 인자로 넣어 생성하며,

해당 mimeType의 정보를 바탕으로 디코딩을 진행한다.

그럼 지금부터 sourceBuffer를 활용하여 Midea Segment를 만드는 방법을 한번 알아보도록 하자.

순전히 나만의 방법이므로 단순 참고만 하는걸 추천한다.

mediaSource.addEventListener('sourceopen', sourceOpen);

      function sourceOpen() {
        const sourceBuffer = mediaSource.addSourceBuffer(mimeType);
        // request(sourceBuffer);
        fetch('url', {})
          .then(res => res.arrayBuffer())
          .then(res => sourceBuffer.appendBuffer(res));

전반적인 흐름은 위와 같은데
media src와 media tag가 연결이 되면 mediaSource는 'sourceopen'이라는 이벤트를 발생시킨다.

mediaSource.addEventListener('sourceopen', sourceOpen);

sourceopen이 발생할 시 실행하는 sourceOpen()함수를 살펴보자면,

  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

sourceOpen()함수에서 가장 먼저 실행되어야 할 것은 바로 sourceBuffer객체를 만드는 것이다.

fetch('url', {})

이 후 fetch 요청을 통해 원하는 segment, 혹은 chunk를 요청한다.

then(res => res.arrayBuffer())

요청을 통해 다운로드 받은 response는 arrayBuffer()메소드를 통해 byte array로 가공한 후

.then(res => sourceBuffer.appendBuffer(res));

appendBuffer()메소드를 통해 arrayBuffer에 있는 Media Segment를 추출하여 SourceBuffer에 제공해준다.

이후 SourceBuffer는 해당 Media Segment를 MediaSource객체에 전달하여 우리의 화면에 Media가 출력되게 된다.

이는 단순히 Media Play를 여러 단계로 쪼갠것 뿐인데, 이를 통해 우리는 각 과정속에 들어가 세세한 컨트롤을 할 수 있게 된다.