nginx rtmp 모듈로 hls 스트리밍 방송 해보기

리눅스에 대해 어느정도 이해가 필요합니다.

해당 명령은 상황에 따라 간단한 수정이 필요하며, 바로 복사 붙어넣기를 하면 안됩니다.

1. ngnix 컴파일 하기

wget http://nginx.org/download/nginx-1.21.6.tar.gz
tar -xvf nginx-1.21.6.tar.gz
git clone https://github.com/arut/nginx-rtmp-module.git
cd nginx-1.21.6
sudo apt install libpcre3 libpcre3-dev zlib1g-dev libssl-dev
./configure --add-module=/home/hanzo/nginx-rtmp-module
make
sudo make install

2. nginx 설정하기

sudo nano /usr/local/nginx/conf/nginx.conf

(아래의 설정으로 내용을 완전히 갈아엎습니다.)

#user  nobody;
worker_processes  auto;

events {
    worker_connections  1024;
}

rtmp {

    server {

        listen 1935;

        chunk_size 4000;

        application hls {
            live on;
            hls on;
            hls_path /tmp/hls;
            allow publish 127.0.0.1;
            allow publish 172.16.0.0/12;
            deny publish all;
            allow play all;
            hls_fragment 600ms;
            hls_playlist_length 5s;
        }

    }
}

# HTTP can be used for accessing RTMP stats
http {

    server {

        listen      8080;

        location /hls {
            
            # Disable cache
            add_header Cache-Control no-cache;

            # CORS setup
            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length';

            # allow CORS preflight requests
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
	    # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp;
            add_header Cache-Control no-cache;
        }
    }
}

3. nginx 켜고 끄기

sudo /usr/local/nginx/sbin/nginx (켜기)
sudo /usr/local/nginx/sbin/nginx -s stop (끄기)

nginx를 끄거나 컴퓨터를 끈 경우에는 다시 수동으로 켜야합니다.

4. obs 스튜디오 설정

방송열쇠는 원하는 것으로 변경해도 됩니다. 

이때 방송되는 주소는 http://127.0.0.1/hls/test.m3u8 가 됩니다.

6. (공유기 사용시 옵션) 공유기 포트포워드 열기

(공유기에 따라 다릅니다. 기본 세팅은 8080 포트를 열어줘야합니다.)

7. (wsl 사용시 옵션) wsl 포트 열기

먼저 wsl에서 net-tools를 설치합니다.

$remoteport = bash.exe -c "ifconfig eth0 | grep 'inet '"
$found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}';

if( $found ){
  $remoteport = $matches[0];
} else{
  echo "The Script Exited, the ip address of WSL 2 cannot be found";
  exit;
}

#[Ports]

#All the ports you want to forward separated by coma
$ports=@(8080);


#[Static ip]
#You can change the addr to your ip config to listen to a specific address
$addr='0.0.0.0';
$ports_a = $ports -join ",";


#Remove Firewall Exception Rules
iex "Remove-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' ";

#adding Exception Rules for inbound and outbound Rules
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Outbound -LocalPort $ports_a -Action Allow -Protocol TCP";
iex "New-NetFireWallRule -DisplayName 'WSL 2 Firewall Unlock' -Direction Inbound -LocalPort $ports_a -Action Allow -Protocol TCP";

for( $i = 0; $i -lt $ports.length; $i++ ){
  $port = $ports[$i];
  iex "netsh interface portproxy delete v4tov4 listenport=$port listenaddress=$addr";
  iex "netsh interface portproxy add v4tov4 listenport=$port listenaddress=$addr connectport=$port connectaddress=$remoteport";
}

의 파일을 메모장으로 wsl-networks.ps1 으로 저장한 다음 cmd를 관리자 권한으로 이렇게 명령합니다.

PowerShell.exe -ExecutionPolicy Bypass -File .\wsl-networks.ps1

그러면 wsl에서 포트가 열립니다. 포트를 여는것은 컴퓨터를 재부팅한 이후에는 다시 해줘야합니다.

8. (웹페이지 옵션) hls.js 사용하기

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
<video id="video" width="640" controls autoplay></video>
<script>
  var video = document.getElementById('video');
  var videoSrc = 'http://127.0.0.1:8080/hls/test.m3u8';
  //
  // First check for native browser HLS support
  //
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
    //
    // If no native HLS support, check if HLS.js is supported
    //
  } else if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
  }
</script>

적당한 html 웹사이트에 이렇게 넣습니다.