React에서 서버의 동영상을 스트리밍하는 기본 예제

다음은 React에서 서버의 동영상을 스트리밍하는 기본 예제입니다. 서버 측에서 범위 요청(Range Requests)을 지원해야 정상적으로 동작합니다.

// VideoPlayer.jsx
import React from 'react';

const VideoPlayer = () => {
  return (
    <div>
      <video controls width="600" height="400">
        <source
          src="http://your-server.com/api/video/stream"  // 서버 스트리밍 엔드포인트
          type="video/mp4"  // 동영상 포맷에 맞게 변경
        />
        Your browser does not support the video tag.
      </video>
    </div>
  );
};

export default VideoPlayer;

서버 측 예제(Node.js Express 기준):

// server.js
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.get('/api/video/stream', (req, res) => {
  const videoPath = path.resolve('./your-video-file.mp4');
  const videoSize = fs.statSync(videoPath).size;

  // 범위 요청 헤더 파싱
  const range = req.headers.range;
  if (!range) {
    res.status(400).send('Requires Range header');
    return;
  }

  // 스트리밍 설정
  const CHUNK_SIZE = 10 ** 6; // 1MB
  const start = Number(range.replace(/\D/g, ''));
  const end = Math.min(start + CHUNK_SIZE, videoSize - 1);
  const contentLength = end - start + 1;

  // 응답 헤더 설정
  const headers = {
    'Content-Range': `bytes ${start}-${end}/${videoSize}`,
    'Accept-Ranges': 'bytes',
    'Content-Length': contentLength,
    'Content-Type': 'video/mp4',
  };

  // 206 Partial Content 응답
  res.writeHead(206, headers);

  // 비디오 스트림 생성
  const videoStream = fs.createReadStream(videoPath, { start, end });
  videoStream.pipe(res);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

필요한 추가 설정 사항:

1. CORS 설정 (다른 도메인에서 접근 시):

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

2. MIME 타입 설정 확장자에 맞는 타입 사용:

• MP4: video/mp4
• WebM: video/webm
• Ogg: video/ogg

2. 대용량 파일 처리:

• 청크 크기(CHUNK_SIZE) 조절 가능
• 스트리밍 중 연결 종료 처리 추가 필요

2. HLS(HTTP Live Streaming) 사용 시:

// React 측
import Hls from 'hls.js';

const VideoPlayer = () => {
  const videoRef = React.useRef();

  React.useEffect(() => {
    const video = videoRef.current;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('http://your-server.com/playlist.m3u8');
      hls.attachMedia(video);
    }
  }, []);

  return (
    <video ref={videoRef} controls width="600" height="400"/>
  );
};

5. MPEG-DASH 사용 시:

import { MediaPlayer } from 'dashjs';

const VideoPlayer = () => {
  const videoRef = React.useRef();

  React.useEffect(() => {
    const player = MediaPlayer().create();
    player.initialize(videoRef.current);
    player.attachView(videoRef.current);
    player.attachSource('http://your-server.com/manifest.mpd');
  }, []);

  return (
    <video ref={videoRef} controls width="600" height="400"/>
  );
};

주의사항:

• 서버 측에서 반드시 부분 요청(Range 헤더)을 처리해야 함
• CORS 정책 확인
• 적절한 비디오 인코딩 포맷 사용
• 네트워크 대역폭 고려한 비트레이트 설정
• HTTPS 환경에서의 보안 설정 확인

브라우저 개발자 도구의 네트워크 탭에서 206 Partial Content 응답이 오는지 확인하면 스트리밍이 정상적으로 동작하는지 확인할 수 있습니다.