오랜만에 다시 글을 쓰게 되었다. 회사 업무가 잘 풀리지 않아 글쓰기의 겨를이 없었다는 핑계는 핑계일 뿐…

클라이언트의 접속 요청이 왔을 때 초기화 프레그먼트를 전달해 주는 작업은 이미 구현을 했다. 이후에는 세그먼트가 생성될 때마다 넘겨주는 작업이 필요하다. index.js를 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
io.on('connection', socket => {
    console.log("connection");

    function start() {
        if (mp4frag.initialization) {
            socket.emit('segment', mp4frag.initialization);
            mp4frag.on('segment', emitSegment);
        } else {
            socket.emit('message', 'init segment not ready yet, reload page');
        }
    }

    function emitSegment(data) {
        console.log("emitSegment");
        console.dir(data);
        socket.emit('segment', data.segment);
    }

mp4frag에 대해 segment 이벤트에 대한 처리가 추가된 것이 주요한 내용이다. 이벤트에 대한 처리 함수는 emitSegment이며 소켓을 통해 segement라는 이름으로 세그먼트 데이터를 보내게 된다.

클라이언트에서는 이 segment 이벤트가 발생할 때마다 세그먼트 데이터를 수신할 수 있으며, 이것을 바로 소스 버퍼에 추가해 주면 된다. main.js를 수정한다.

1
2
3
4
5
6
7
socket.on("segment", function (data) {
  console.dir(data.segment);
  const segData = new Uint8Array(data);
  // console.dir(segData);
  // buffer.appendBuffer(segData);
  buffer.appendBuffer(segData);
});

마지막으로 지난번 글에서 누락한 부분이 있어서 설명을 추가하고자 한다. main.js에서 MediaSource 인스턴스를 통해서 소스 버퍼를 추가해 주는 부분이 있었는데 이때 인자에 넣어줘야 하는 mime의 값을 정의해 주지 않아서 오류가 발생했을 것이다.

다시 index.js로 돌아가 보자.

1
2
3
4
5
6
const mime = 'video/mp4; codecs="avc1.4D0029"';

mediaSource.addEventListener('sourceopen', function (e) {
    console.log('sourceopen: ' + mediaSource.readyState);
    buffer = mediaSource.addSourceBuffer(mime);
...

mime은 말 그대로 MIME 타입의 문자열 데이터가 들어간다. MIME 타입은 브라우저가 지원하는 미디어 형식과 코덱을 지정하는 데 사용된다.

예를 들어,

  • video/mp4; codecs=”avc1.42E01E, mp4a.40.2”: H.264 비디오 코덱과 AAC 오디오 코덱을 사용하는 MP4 비디오.
  • video/webm; codecs=”vp8, vorbis”: VP8 비디오 코덱과 Vorbis 오디오 코덱을 사용하는 WebM 비디오.

예제에서는 비디오만 처리하고 있으므로, 오디오 코덱 설정은 들어가지 않았다. H264 코덱 정보로 avc1.4D0029라는 값이 사용되었는데 좀 더 풀어서 정리를 해보면,

  • avc1: H.264/AVC 코덱
  • 4D0029: 프로파일 인디케이터, 호환성, 레벨을 나타내는 16진수 값

다시, 프로파일 인디케이터, 호환성, 레벨을 나눠보면,

  • 프로파일 인디케이터(Profile Indicator): 앞의 두 자리(4D), 4D는 Main 프로파일에 해당
  • 호환성(Compatibility): 중간의 두 자리(00), 00는 Main 프로파일과 호환됨을 표시.
  • 레벨(Level): 마지막 두 자리(29), 29는 Level 4.1을 의미

이제 재생을 할 수 있는 작업은 완료가 되었다. 다음과 같이 프로그램을 실행하고, 웹 브라우저에서 접속해 보자.

1
node index

웹브라우저에서는 주소창에 http://localhost:3000으로 입력하면 된다.