AWS EC2 Ubuntu 22.04 환경에서
Nginx RTMP 서버 구축하고,
HLS로 웹 상에서 실시간 비디오 스트리밍하기
우선 저는 위와 같은 구조로 실시간 영상 스트리밍 서버를 만들고 있습니다.
* 이 글에선 Spring이나 S3를 통한 영상 저장은 다루지 않습니다.
제가 요청 받은 것은
1. 웹 상에 실시간 영상 송출
2. 클라이언트가 요청 시, 영상 저장
이었습니다.
RTMP, HLS에 대한 간단한 설명은 아래 첨부하겠습니다.
이번 글의 실습은
이 글을 참고하여 진행하였습니다.
How to Set Up a Video Streaming Server using Nginx-RTMP on Ubuntu 22.04
RTMP also called “real-time messaging protocol” is a data transmission technology that supports live online video streaming. It is used to transmit video files from an encoder to an online video…
computingpost.medium.com
저는 AWS EC2 Ubntu 22.04 환경에서 진행했습니다.
1. Nginx 설치
sudo apt install nginx -y- Nginx 시작하기
systemctl start nginx- 시스템 부팅될 때 Nginx 자동 시작 설정
systemctl enable nginx- Nginx 상태 확인
systemctl status nginx
2. Nginx RTMP 모듈 설치
sudo apt install libnginx-mod-rtmp -y
3. Nginx 설정파일 nginx.conf 수정
sudo nano /etc/nginx/nginx.conf
nginx.conf 파일에 아래 코드들을 추가해주세요
rtmp {
server {
listen 1935;
chunk_size 4096;
application live {
live on;
hls on;
hls_path /tmp/hls;
hls_fragment 15s;
}
}
}
chunk_size {size}: chunk 사이즈 설정 (default 4096) *chunk 사이즈 클수록 CPU overhead 감소hls_path {path}: HLS playlist와 fragment 디렉토리 (없을 시 생성됨)hls_fragment {time}: HLS fragment 길이 (default 5s)
http {
...
server {
...
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
}
root /tmp;
add_header Cache-Control no-cache;
# To avoid issues with cross-domain HTTP requests (e.g. during development)
add_header Access-Control-Allow-Origin *;
}
}
}
설정에 대한 자세한 설명은 이 글을 참고하세요
- nginx 설정 파일 문제 없는지 확인
nginx -t- 문제 없으면 restart
systemctl restart nginx
4. 방화벽 열어주기
sudo ufw allow 1935/tcp
sudo ufw allow 22/tcp- 열린 포트 확인
ss -antpl | grep 1935
ss -antpl | grep 22* EC2 인스턴스 상에서 인바운드 규칙도 설정해주세요.
5. index.html 파일에 hls 스트리밍 스크립트 추가
<body>
<h1>HLS Streaming</h1>
<video id="video" controls autoplay></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://{내 주소}/hls/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
</script>
</body>
이제 실시간으로 전송하는 비디오들이 웹 상에서 스트리밍 되는 것을 확인해봅시다.
저는 OBS를 통해 전송해줬습니다.
rtmp://{내 주소}/live/stream로 전송하면 되고,
OBS는 아래와 같이 설정해주세요.
왼쪽이 제 웹 화면이고, 실시간 영상이 보이고 있습니다.
⚠️ 혹시나 영상이 안보이시는 분들.
영상 송출 시, RTMP 서버 상 /tmp/hls에 파일이 생겼는가?
-> ❌: RTMP 서버로 영상 보내지는 과정에 문제 확인
-> 🅾️: RTMP 서버까지는 영상이 잘 보내진 것이므로, HLS를 통해 웹 상에 보내는 것에 문제
확인해보십쇼.
nginx access log는 아래 명령어로 확인할 수 있습니다.
sudo tail -f /var/log/nginx/access.log
이상한 점이나 피드백한 것 있다면 알려주세요~
완전 환영합니다🐨
'Server' 카테고리의 다른 글
| Web Server & Web Application Server 그리고 Reverse Proxy (0) | 2024.08.24 |
|---|
