글

RTMP으로 Video Streaming 구현하기 (DASH, HLS) - 2 트러블 슈팅 및 정리

트러블 슈팅 1. Video.js에서 Shaka Player로 전환한 이유 ● 초기에는 Video.js를 사용하여 플레이어를 구성 하고자 하였음. ● 그러나 화질 선택 기능 을 원하는 방식으로 구현하는 데 한계가 있어, JavaScript로 화질 선택 버튼을 직접 구현하는 방향으로 변경함. → 이 방식은 기능적으로 대응 가능했으나, 브라우저 창 크기에 따라 화질 선택 버튼의 위치가 비정상적으로 표시되는 UI 문제 가 발생함. ● 이후 Video.js의 기본 화질 선택 기능을 활용하는 방향도 검토하였으나, HLS의 manifest.m3u8 정보를 정상적으로 읽어 화질 정보를 표시하지 못하는 문제 가 확인됨. ● 이에 따라 JavaScript에서 manifest 정보를 직접 파싱하여 화면에 출력하는 방식으로 다시 변경함. → 다만 이 과정에서 JavaScript 코드가 점차 복잡하고 비대해지면서, 유지보수가 어려운 스파게티 코드 형태 로 작성되는 문제가 발생함. → 즉, 초기에는 Video.js 기반으로 기능을 해결 하고자 하였으나, 화질 선택 기능과 UI 제어 측면에서 한계가 있었음. → 이후 직접 구현 방식으로 전환하면서 기능적 대응은 가능해졌지만, 코드 복잡도 증가와 유지보수성 저하 라는 새로운 문제가 발생함. → 따라서 단순한 기능 구현을 넘어, 플레이어 구조 자체를 보다 일관되고 유지보수 가능한 방향으로 재정비할 필요 가 있었음. 2. HLS / DASH 프로토콜 구분 논리 ● 처음에는 브라우저명을 기준으로 HLS / DASH 프로토콜을 구분 하고자 하였음. Safari - HLS iOS Safari - HLS iPadOS Safari - HLS Chrome - DASH Edge Chromium - DASH Firefox - DASH Opera - DASH ● 그러나 실제 브라우저 환경에서는 native HLS와 MediaSource 기반 재생을 모두 가질 수 있어 , 브...
댓글 쓰기
자세한 내용 보기

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 패키징(...
댓글 쓰기
자세한 내용 보기