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 기반 재생을 모두 가질 수 있어, 브라우저명만으로 재생 방식을 고정하는 데 한계가 있음.

예시)

Chrome

  • Chrome 4~141 버전은 HLS native 지원이 없으며, Chrome 142 이상부터 HLS가 supported로 표시됨.

Safari

  • Safari 17.0부터 iPad와 Mac에 MSE가 적용되었고, Safari 17.1부터는 iPhone에도 추가됨.

→ 즉, 브라우저 이름에 따라 프로토콜을 고정하는 방식은 실제 재생 환경에 따라 달라질 수 있는 가능성을 충분히 반영하지 못함.

→ 따라서 브라우저 종류 판별 방식 대신, 실제 재생 가능 기능을 기준으로 판단하는 방식으로 변경함.

Reference

  • https://caniuse.com/http-live-streaming
  • https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API
  • https://shaka-player-demo.appspot.com/docs/api/shaka.extern.html

그 외 정리

  • 브라우저 Video Player는 Shaka Player로 고정하고, 플레이어는 하나로 유지하되 브라우저 및 재생 환경에 따라 적용할 프로토콜만 달리하는 방향으로 정리함.
  • 즉, Player 자체를 브라우저별로 다르게 가져가는 것이 아니라, 동일한 Player 위에서 HLS 또는 DASH 중 적합한 스트림을 선택하도록 구조를 단순화한 것임.
  • 이를 통해 플레이어 제어 방식의 일관성을 확보하고, 화질 선택 및 적응형 스트리밍 관련 기능을 플레이어 내부 기능 중심으로 처리할 수 있는 방향을 마련함.

댓글

댓글 쓰기

이 블로그의 인기 게시물

[보안] CA인증서, 서버인증서, 클라이언트 인증서와 Openssl

이미지
📌​CA 인증서 ROOT 인증서로부터 시작하는 계층 구조    📍​ Root Certification, Intermediate Certification, Server Ceritification 루트 인증서(Root Certification) 최상위 인증 기관 (DigiCert, GlobalSign, GTS)이 발급하는 인증 운영체제(OS) 및 브라우저에서 기본적으로 신뢰하는 인증서 로 저장됨. 자체 서명(self-Signed) 이 되어있음 중간 인증서(Intermediate Certification) Root CA가 직접 웹사이트에 인증서를 발급하지 않고 중간 CA를 통해 인증서 발급 중간 CA는 루트 CA의 서명을 받은 인증 기관으로 직접적으로 서버 인증서를 발급 브라우저와 OS는 중간 인증서를 직접 신뢰하지 않지만 중간 인증서가 루트 CA에 의해 서명되었기 때문에 신뢰가 가능함 서버 인증서(Server Certification) 최종적으로 웹사이트에서 사용하는 인증서 중간 CA에 의해 서명됨 사용자의 브라우저는 루트 CA까지의 인증서 체인을 검증하여 인증서의 유효성을 확인 ✅​ 정리하면 루트 인증서 ➡️​ 중간 인증서 ➡️​ 서버 인증서 순으로 인증 체인이 이루어짐
자세한 내용 보기

TCP/UDP 통신 방식 (WireShark)

이미지
 📌TCP/UDP?  📍​ TCP TCP(Transmission Control Protocal) 전송 제어 프로토콜 3 - way handshake 를 통해 연결 설정, 4 - way handshake 를 통해 연결 해제 Client 와 Server는 1:1 연결 TCP는 데이터를 전송할 때 오류를 검사하여 전송된 데이터가 목적지에 온전하게 도달하도록 보장 (신뢰성이 높음) TCP는 전송이 실패한 경우 재전송 시도 TCP는 운영체제와 독립적으로 작동하므로 시스템과 디바이스 간 상호 운용성이 높음 전송단위는 Segment                 Segment  ❓ Header 의 구성요소 Source Port / Destination Port Sequence Number  Acknowledgment Number  Flags (SYN, ACK, FIN) Window Size Checksum Urgent Pointer Data 실제로 전송되는 애플리케이션 데이터 ✅ 정리하면 "Header(최소 20바이트)" + "DATA" 로 이루어져 있음   📍​ UDP UDP(User Datagram Protocal) 유저 데이터그램 프로토콜 UDP는 패킷을 더 적은 오버헤드로 전송하여 End to End 지연을 줄임 UDP는 일부 패킷이 누락되더라도 데이터를 전송  브로드캐스트 및 멀티캐스트 기능을 통해 하나의 UDP 전송을 여러 수신자에게 한 번에 전송 전송 단위는 Daragram              Datagram  ❓ Header의 구성요소 Source Port / Destination Port Length Checksum ( IPv6 에선 필수로 Checksum이 들어가야 함) Data 실제로 전송되는 애플리케이션 데이터 ✅ ...
자세한 내용 보기

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