NGINX Plus RTMP 모듈을 사용하여 실시간 스트리밍

이번 포스트에서는 NGINX Plus RTMP 모듈을 사용하여 실시간 스트리밍을 안정적이게 구현하는 방법에 대해 설명합니다. 이번 포스트에서는 NGINX Plus를 사용하여 RTMP(Real-Time Messageing Protocol) 모듈을 구성합니다.

NGINX OSS에서 RTMP 모듈을 사용하는 방법은 아래 포스트를 확인하세요.

목차

1. 개요
2. NGINX Plus RTMP 모듈 설치
3. NGINX Plus RTMP 모듈 구성
4. HTML 작성
5. OBS 설정
6. 실시간 스트리밍 테스트
7. 결론

1. 개요

NGINX Plus RTMP 모듈은 NGINX 웹 서버에 실시간 스트리밍 기능을 추가하는 모듈입니다. 이 모듈은 주로 비디오 및 오디오 스트리밍을 위한 RTMP(Real-Meesaging Protocol) 프로토콜을 지원하며, 다음과 같은 주요 기능을 제공합니다.

  • 라이브 스트리밍 – RTMP를 통해 실시간으로 비디오 및 오디오 콘텐츠를 전송할 수 있습니다. 이는 주로 온라인 방송이나 게임 스트리밍 등에서 사용됩니다.
  • VOD(Video On Demand) – 저장된 비디오 파일을 스트리밍할 수 있는 기능을 지원합니다.
  • HTTP Live Streaming(HLS) 지원 – RTMP 모듈은 HLS를 통해 모바일 기기 및 HTML5 플레이어에서의 재생을 지원합니다.

2. NGINX Plus RTMP 모듈 설치

Debian 및 Ubuntu의 경우:

$ apt-get install nginx-plus-module-rtmp

이 외의 운영 체제에서 다운로드 방법은 아래 포스트를 참조하세요.

3. NGINX Plus RTMP 모듈 구성

NGINX Plus RTMP 모듈을 사용하여 HLS 방식 또는 DASH 방식으로 구성할 수 있습니다. 이 포스트에서는 HLS 방식으로 진행하며, 두 프로토콜에 대해 익숙하지 않은 경우 vidbeo 블로그의 “HLS vs DASH“를 참조하세요.

NGINX Plus RTMP 모듈의 HLS를 사용한 실시간 스트리밍 구성 방법은 다음과 같습니다.

Main context에 rtmp { } 를 사용하여 RTMP 프로토콜을 사용한 실시간 미디어 스트리밍 서버를 설정합니다.

rtmp {
    server {
    listen 1935;
    chunk_size 4096;
    
    application live {
            live on;
            record off;
    
            hls on;
            hls_path /tmp/hls;
            hls_fragment 5s;
        }
    }
}

위 구성 사항에 대한 내용은 아래와 같습니다.

  • listen 1935 – RTMP의 표준 포트인 1935 포트에서 수신하도록 설정합니다.
  • chunk_size 4096 – 스트림 멀티플렉싱을 위한 최대 청크 크기입니다. 이 값이 클수록 CPU 오버헤드가 낮아집니다. 기본값은 4096이며 128보다 작을 수 없습니다.
  • application live { } – live라는 이름의 RTMP 애플리케이션을 정의합니다. 해당 블록에서 애플리케이션과 관련된 추가 설정을 제공합니다.
  • live on – RTMP 라이브 스트리밍을 활성화합니다.
  • record off – 스트리밍 데이터를 기록하지 않습니다.
  • hls on – HLS(HTTP live Streaming)를 활성화합니다. RTMP 스트림을 HLS로 변환하여 제공할 수 있습니다.
  • hls_path /tmp/hls – HLS 세그먼트 파일(.ts)과 재생 목록(.m3u8)을 /tmp/hls 디렉토리를 사용합니다.
  • hls_fragment 5s – HLS 세그먼트의 길이를 5초로 설정합니다.

Main context에 HTTP context 구성:

 http { 
    default_type application/octet-stream;
    include      /etc/nginx/mime.types;

    server {
        listen 80;
        
        location / {
            root       /usr/share/nginx/html;
            index      streaming.html;
        }
        
        location /tmp/hls/ {
            root /;
            add_header Cache-Control no-cache;
            add_header 'Access-Control-Allow-Origin' 'http://example.com';
        }
    }
}

위 구성 사항에 대한 내용은 아래와 같습니다.

  • listen 80 – HTTP 80 포트에서 요청을 수신합니다.
  • location / { } – 루트 경로(/)에 대한 요청을 처리합니다.
    • root – /usr/share/nginx/html 디렉토리를 루트 디렉토리로 지정합니다.
    • index streaming.html – 기본 파일을 streaming.html로 설정하여 이 파일을 응답합니다.
  • location /tmp/hls { } – HLS 파일(/tmp/hls 경로)의 HTTP 요청을 처리합니다.
    • root / – 루트 디렉토리를 /로 설정하여 HLS 콘텐츠를 HTTP로 제공할 수 있도록 합니다.
    • add_header Cache-Controle no-cache – 실시간 스트리밍의 최신 데이터를 보장하기 위해 HTTP 헤더를 설정합니다.
    • add_header ‘Access-Control-Allow-Origin’ ‘http://example.com’ – http://example.com 도메인에서만 /tmp/hls/ 경로의 리소스에 접근할 수 있습니다.

4. HTML 작성

실시간 스트리밍 비디오를 웹에서 확인하기 위한 간단한 HTML을 작성합니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live HLS Streaming</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        .container {
            display: flex;
            width: 100%;
            height: 100%;
        }
        .left {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 20px;
        }
        .right {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        .video-container {
            position: relative;
            width: 100%; 
            max-width: 1000px;
            height: auto;
        }
        video::-webkit-media-controls-timeline,
        video::-webkit-media-controls-current-time-display,
        video::-webkit-media-controls-time-remaining-display {
            display: none;
        }
        video {
            width: 100%;
            height: auto;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: black;
        }
        .live-overlay {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            align-items: center;
            background: rgba(217, 83, 79, 0.9);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .live-overlay .dot {
            width: 8px;
            height: 8px;
            margin-right: 8px;
            background-color: white;
            border-radius: 50%;
            animation: blink 1s infinite;
        }
        @keyframes blink {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
        }
        .video-container:hover .live-overlay {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <h1>NGINX STORE Streaming</h1>
        </div>
        <div class="right">
            <div class="video-container">
                <video id="video" controls autoplay></video>
                <div class="live-overlay">
                    <div class="dot"></div>
                    LIVE
                </div>
            </div>
        </div>
    </div>
    <div id="error" class="error"></div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const video = document.getElementById('video');
            const errorDiv = document.getElementById('error');
            const hlsUrl = "http://example.com/tmp/hls/teststream.m3u8"; // HLS URL

            video.muted = true;

            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(hlsUrl);
                hls.attachMedia(video);
                hls.on(Hls.Events.MANIFEST_PARSED, () => {
                    video.play().catch((error) => {
                        console.error("Autoplay failed:", error);
                        errorDiv.textContent = "Autoplay failed. Please click play.";
                    });
                });
                hls.on(Hls.Events.ERROR, (event, data) => {
                    console.error("HLS.js error:", data);
                    errorDiv.textContent = "Error loading the stream. Please check the console for more details.";
                });
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = hlsUrl;
                video.addEventListener('loadedmetadata', () => {
                    video.play().catch((error) => {
                        console.error("Autoplay failed:", error);
                        errorDiv.textContent = "Autoplay failed. Please click play.";
                    });
                });
            } else {
                errorDiv.textContent = "Your browser does not support HLS.";
            }
        });
    </script>
</body>
</html>

5. OBS 설정

이번 포스트에서는 OBS 소프트웨어를 사용하여 RTMP 서버로 스트림을 전송합니다.

OBS를 다운로드 하는 방법은 공식 사이트를 확인하세요.

OBS 설치 및 실행 후, 설정에서 방송 탭을 클릭합니다.

nginx plus rtmp

상단 서비스에서 사용자 지정을 선택한 뒤, NGINX에서 설정한 내용을 입력합니다. 서버 입력란에 rtmp://<NGINX 서버>:1935/live 와 스트림 키는 4섹션의 html에서 test.m3u8로 고정되어 있기 때문에 test로 입력 후 하단의 적용 및 확인을 클릭합니다.

nginx plus rtmp

6. 실시간 스트리밍 테스트

이제 NGINX Plus RTMP 를 통해 실시간 스트리밍이 되는지 확인합니다.

OBS의 방송 시작을 클릭하여 실시간 스트리밍을 시작합니다.

nginx plus rtmp

/tmp/hls 디렉토리를 확인해보면 HLS 방식으로 제공되는 .ts 파일과 .m3u8 파일이 생성된 것을 확인할 수 있습니다.

http://example.com 으로 요청하면 실시간 스트리밍을 확인할 수 있습니다.

7. 결론

NGINX Plus RTMP 모듈은 강력하고 유연한 실시간 스트리밍 솔루션을 제공하는 도구로, 다양한 비디오 및 오디오 스트리밍 요구를 충족합니다. 이 모듈을 통해 사용자는 라이브 방송, VOD, HLS와 같은 다양한 스트리밍 기능을 손쉽게 구현할 수 있습니다.

특히, 오픈 소스 기반의 NGINX와 결합된 RTMP 모듈은 높은 성능과 확장성을 제공하며, 많은 사용자가 필요로 하는 안정성과 보안성 또한 갖추고 있습니다.

결론적으로, NGINX RTMP 모듈은 실시간 콘텐츠 전송을 필요로 하는 기업이나 개인에게 매우 유용한 솔루션으로, 다양한 환경에서의 활용 가능성을 가지고 있습니다. 따라서, 실시간 스트리밍 서비스를 구축하려는 경우 이 모듈은 매우 적합한 선택이 될 것입니다.

NGINX 상업용 버전을 직접 사용해 보시려면 30일 무료 평가판을 신청하거나 NGINX STORE에 연락하여 논의하십시오.

NGINX STORE를 통한 솔루션 도입 및 기술지원 무료 상담 신청

* indicates required