글

RTMP으로 Video Streaming 구현하기 (DASH, HLS) - 2

먼저 알아야 될 사실 기존에는 브라우저 비디오 라이브러리 video.js 를 사용했으나, 화질 선택 기능 구현에 어려움이 있었다. 이에 따라 JavaScript로 화질 선택 버튼을 직접 구현하였다. 그러나 브라우저 창 크기에 따라 화질 선택 버튼의 위치가 비정상적으로 표시되는 문제가 발생하였다. 이후  video.js  라이브러리의 기본 화질 선택 기능을 활용하려고 하였으나, HLS의 manifest.m3u8 정보를 읽고 화질에 대한 정보를 브라우저에 나타내도록 시도했지만 실패하였다.  그래서 JavaScript로 manifest 정보를 직접 파싱하여 화면에 출력하는 방식으로 방향을 변경하였다. 다만 이 과정에서 JavaScript 코드가 과도하게 비대해졌고 유지보수가 어려운 스파게티 코드 형태로 작성되는 문제가 생겼다. 결론 : Shaka Player 로 교체함. 추가된 기능 및 변경된 기능 DASH와 HLS분기 처리 기능 추가. (MPEG-DASH 추가) 화질 선택 기능 추가. Live 버튼 기능 추가. video.js 라이브러리에서 Shaka Player 라이브러리로 교체 업데이트 될 기능 광고기능 추가. 채팅기능 추가. Stream Key 동적 기능 추가. index.html <! doctype html > < html lang = "ko" > < head >   < meta charset = "utf-8" />   < meta name = "viewport" content = "width=device-width, initial-scale=1" />   < title >Shaka Live Check</ title >   < link     rel = "stylesheet"     href = "https://cdn.jsdelivr.net/npm/shaka-playe...
댓글 쓰기
자세한 내용 보기

HLS과 DASH의 개념과 차이점

이미지
HLS와 DASH의 개념과 차이점 참고: https://edgeone.ai/learning/hls-vs-dash 1) HLS (HTTP Live Streaming) 1-1. 정의 Apple이 개발한 HTTP 기반 적응형 스트리밍(ABR) 프로토콜 1-2. 특징 ABR(Adaptive Bitrate) 지원 전송은 HTTP/TCP 기반 1-3. 작동 방식 (Master Playlist → Media Playlist → Segment) 플레이어는 Master Playlist(.m3u8) 를 가져온다. Master에 있는 Variant Stream(품질 후보) 중 하나를 선택한다. 선택된 Variant가 가리키는 Media Playlist(.m3u8) 를 가져온다. Media Playlist에 나열된 Segment 를 순서대로 다운로드하여 재생한다. LIVE일 경우 playlist를 주기적으로 재요청(reload)해서 새 세그먼트를 따라간다. 1-4. 구성 요소 (핵심 구조: .m3u8 과 Segment의 관계) (A) Playlist: .m3u8 Master Playlist (Variant 선택) 여러 품질(예: 360p/480p/720p …)의 Variant 목록 포함 각 Variant는 “해당 품질의 Media Playlist URL”을 가리킴 Media Playlist (Segment 목록) 각 Segment의 재생 길이와 Segment URI가 순서대로 나열됨 LIVE일 경우 계속 갱신되며, 플레이어는 이를 재요청해서 따라감 비유: Master Playlist = 메뉴판(품질별 코스), Media Playlist = 선택한 코스의 요리 순서표(세그먼트 목록) (B) Media Segment .t...
댓글 쓰기
자세한 내용 보기

RTMP으로 Video Streaming 구현하기 (DASH, HLS) - 1

이미지
구현 전 사전 간단한 개념. 1. RTMP(Real-Time Messaging Protocol)      1-1. 역할          - 실시간 오디오/비디오 데이터를 Client -> Server 로 전달 하기 위한 전송 프로토콜     1-2. 네트워크 특성          - 기본 포트 : 1935          - TCP 기반 연결 (지속 연결과 신뢰성 우선)     1-3. 전송 방식          - Push 방식          - Client(OBS-RTMP )가 Server로 밀어 넣음     1-4. 한계          - 일부  브라우저 에선 직접 재생 불가 Safari에선 가능하지만 다른 브라우저는 hls.js로 화면을 송출 해야함. 2. NGINX-RTMP-MODULE     2-1. 역할          - RTMP Stream을 받아들이는 ingest Server     2-2. 기능          - RTMP 연결 수신 (listen 1935)          - Stream Session 관리(Application, Stream Key)          - Stream Life Cycle 관리 (on_publish, on_done, on_pley)          -  RTMP -> HLS 패키징(...
댓글 쓰기
자세한 내용 보기