node.js로 스트리밍 서버 구축하기

 

node.js를 이용하여 간단한 비디오 스트리밍 서버를 코딩하는 방법입니다.

 

상용 비디오 스트리밍 서버의 모습은 아니지만, 큰 그림에서 스트리밍 서버가 어떻게 동작하는지 기초 구조에 대한 이해를 돕는데 도움이 됩니다.

 

 

어떻게 동작하나?

서버에서 헤더 정보에 Content-Range 를 넘겨주면 웹 브라우저의 video 태그를 다운로드를 다 받은 후에 동작하는 것이 아니라, 넘겨 받는 대로 바로 재생시켜 주는 스트리밍 모드로 동작을 시키는군요.

HTTP range requests - HTTP | MDN

 

아, 그리고 서버에서 status 코드를 206으로 보내야 합니다.

http 표준에 206 은 Partial Content 로 정의되어 있습니다.

 

샘플 소스에서는 1Mb 씩 읽어서 보내줍니다.

 

기본 원리는 이렇고, 이걸 여러 클라이언트에 성능 좋게 동시에 잘 전달하면 스트리밍 서버가 됩니다.

 

Build a video streaming server with Node.js - LogRocket Blog

 

 

소스코드 살펴보기

뭐, 이젠 github 다들 사용할 줄 아시지요? 소스공개는 언제나 github.

 

소스는 엄청 간단합니다.

클라이언트는 html 파일 하나. 

서버는 자바스크립트 파일 하나.

 

npm install 해서 필요한 모듈들 설치하고, 실행하면 끝

 

GitHub - thesmartcoder7/video_streaming_server: This is a simple implementation of a video streaming server in Node.js

 

 

클라이언트 소스코드

클라이언트는 소스가 뭐 볼게 없습니다.

video 태그에서 스트리밍을 지원하는 웹 브라우저라면 헤더에 Range를 추가해서 보내는가 봅니다.

 

 

서버 소스코드

app.get("/video", function (req, res) {
    const range = req.headers.range;
    if (!range) {
        res.status(400).send("Requires Range header");
    }
});

헤더에 Range가 넘어오는지 체크하고, 넘어 온다면 스트리밍으로 동작합니다.

 

const videoStream = fs.createReadStream(videoPath, { start, end });

videoStream.pipe(res);

node.js에서 제공하는 파일시스템 함수 중 createReadStream 를 사용하면 스트림으로 읽어낼 수 있고, pipe 함수를 이용해서 response 로 보낼 수 있습니다.

 

const headers = {
    "Content-Range": `bytes ${start}-${end}/${videoSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": contentLength,
    "Content-Type": "video/mp4",
};

// HTTP Status 206 for Partial Content
res.writeHead(206, headers);

그리고 헤더를 구성해서 웹브라우저로 보냅니다.

그리고 상태값은 206으로 보냅니다.

 

언제나 기본 컨셉은 간단 명료하며, 어렵지 않습니다.

오늘도 하나 배웠습니다.

 

 

망했어요, 그래도 M1 Pro 맥북 프로 좋긴 좋네요 - 눈물 나는 한달 사용기

플러터 앱 개발 초보 기본 입문 - 구글플레이, 앱스토어 배포, 애드몹 - dear abby, kdrama

리액트 네이티브, 간단한 예제 만들며 기본 개념 잡아 보기 - React Native

언리얼 5 - 매트릭스 어웨이큰스, 오픈월드 현실 묘사 넘 멋지네 얼른 출시되길

스타벅스에는 왜 가나요? 스벅은 가장 현명한 공간 임대업자