Node.js로 HTML5 비디오 플레이어에 비디오 파일 스트리밍하기 – 비디오 컨트롤이 끊기지 않게 하는 방법

HTML5 비디오 플레이어에서 시킹(seeking) 기능과 비디오 컨트롤이 정상적으로 작동하려면, 서버가 클라이언트의 Range 요청에 응답하여 요청된 부분만 전송해 주어야 합니다. 이를 위해 Node.js의 fs.createReadStream을 사용하면 됩니다.

핵심 원리

fs.createReadStream() 함수는 파일의 특정 구간을 읽을 수 있는 읽기 가능한 스트림(readable stream)을 반환합니다. 클라이언트가 보낸 Range 헤더를 파싱하여 시작 위치(begin)와 끝 위치(end)를 계산한 뒤, 해당 구간만 스트림으로 응답에 연결(pipe)하면 됩니다.

예제 코드

다음은 실제 동작하는 코드 예시입니다.

stream = fs.createReadStream(path);
stream.on('open', function () {
    res.writeHead(206, {
        "Content-Range": "bytes " + begin + "-" + end + "/" + total,
        "Accept-Ranges": "bytes",
        "Content-Length": chunksize,
        "Content-Type": "video/mp4"
    });
    stream.pipe(res);
});

코드 설명

• HTTP 상태 코드 206: 'Partial Content'를 의미하며, 전체 파일이 아닌 요청된 일부 구간만 전송했음을 나타냅니다.
• Content-Range 헤더: 전송되는 바이트 범위(예: bytes 0-1023/2048)와 전체 파일 크기를 클라이언트에게 알려줍니다.
• Accept-Ranges 헤더: 서버가 바이트 단위의 범위 요청을 지원함을 명시합니다.
• Content-Type: 원본 코드의 new/mp4는 올바르지 않은 MIME 타입이므로 표준 타입인 video/mp4로 수정했습니다.

주의 사항

스트림 사용 후에는 반드시 적절히 종료(close) 처리를 해주어야 메모리 누수를 방지할 수 있습니다. 또한 브라우저마다 Range 요청 방식이 조금씩 다를 수 있으므로, 실제 서비스에서는 검증된 미들웨어나 정적 파일 서빙 모듈을 활용하는 것도 좋은 선택입니다.