[웹개발] 스트리밍

스트리밍

- 스트리밍: 비디오 또는 오디오 데이터를 구성하는 데이터 패킷을 분해하고 각각을 해석하여 사용자 장치의 블레이어에서 비디오 또는 오디오로 실시간 재생하는 방식

- 스트리밍을 통해 사용자는 콘텐츠를 지속적으로 시청하고 끊김 없는 시청 경험을 가능하게 함

- 스트리밍 종류: 비디오, 오디오, 라이브

- 라이브 스트리밍: 이벤트가 발생하는 시점의 비도오 또는 오디오 방송

- 버퍼링: 연결이 잠시 중단되더라도 사용자가 계속해서 비디오를 보거나 오디오를 들을 수 있도록 미리 스트림의 일부를 로드하는 프로세스

- 버퍼링은 네트워크 속도가 느리거나 연결이 끊어질 가능성이 있는 상황에서 유용

- 대역폭: 매초 네트워크 연결을 통해 전송할 수 있는 최대 데이터 양(Mbps)

- 일반적으로 비디오 스트리밍 사용시 네트워크에 최소 4Mbps의 대역폭이 필요

- 콘텐츠 다운로드 가능 속도와 비디오 스트리밍 속도는 다른 것

- 대기시간(=핑 속도): 정보가 최종 사용자에게 도달하는데 걸리는 시간. 비디오가 로드될 때까지 기다리는 시간

스트리밍 속도 향상 방법

- CDN 구현: 사용자와 가까운 CDN의 엣지 서버를 활용

- 캐시 지우기

- 이더넷 케이블 사용 고려

- 네트워크에 연결된 장치 수 줄이기

스트리밍 프로토콜

- Progressive Download: Youtube

- RTMP(Real-Time Messaging Protocol):

- RTSP(Real-Time Streaming Protocol)

- Adaptive HTTP Streaming

- HLS(HTTP Live Streaming): Apple

- HDS(HTTP Dynamic Streaming): Adobe

- SSS(Silverlight Smooth Streaming): MicrosoftSoft

- MPEG-DASH(Dynamic Adapltive Streaming over HTTP)

- WebRTC

- SRT(Secure Reliable Transport)

동영상 스트리밍 예제

- public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Streaming</title>
</head>
<body>
    <h1>Streaming Video</h1>
    <video controls width="640" controlsList="nodownload">
        <source src="/video" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

- server.js

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;

app.get('/video', (req, res) => {
    // 비디오 파일 경로 읽기
    const videoPath = path.join(__dirname, 'video.mp4');
    // 비디오 파일 읽기: 특정 파일 정보 가져오기
    const stat = fs.statSync(videoPath);
    // 파일 사이즈 기록
    const fileSize = stat.size;
    // req 헤더의 range 기록
    const range = req.headers.range;

    // range 존재시: 헤더 추가 및 파일 데이터 스트리밍
    if (range) {
        const parts = range.replace(/bytes=/, "").split("-");
        const start = parseInt(parts[0], 10);
        const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
        const chunkSize = (end - start) + 1;
        const file = fs.createReadStream(videoPath, { start, end });
        const head = {
            'Content-Range': `bytes ${start}-${end}/${fileSize}`,
            'Accept-Ranges': `bytes`,
            'Content-Length': chunkSize,
            'Content-TYpe': 'video/mp4',
        };
        res.writeHead(206, head);
        file.pipe(res);
    }
    // range가 없는 경우: 헤더 추가 및 파일 내용 스트리밍
    else {
        const head = {
            'Content-Length': fileSize,
            'Content-Type': 'video/mp4',
        };
        res.writeHead(200, head);
        fs.createReadStream(videoPath).pipe(res);
    }
});

// 
app.use(express.static(path.join(__dirname, 'public')));


// 
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PROT}`);
});

오디오 스트리밍 예제

실시간 스트리밍 예제