뉴스 정보 뉴스 컴퓨터 소프트웨어 및 개발

React의 Dash.js와 함께 적응 형 비디오 스트리밍 – Smashing Magazine

React의 Dash.js와 함께 적응 형 비디오 스트리밍 – Smashing Magazine

나는 최근 느린 네트워크 나 저가형 장치에서 원활하게 재생되어야하는 비디오 릴을 만드는 임무를 맡았습니다. 나는 기본 HTML5로 시작했다 태그이지만 빨리 벽에 부딪칩니다. 연결이 느리거나 장치가 저하 될 때 단지 절단되지 않습니다.

약간의 연구 후에 나는 그것을 발견했다 적응 형 비트 전송률 스트리밍 내가 필요한 해결책이었습니다. 그러나 여기에 실망스러운 부분이 있습니다. 포괄적이고 초보자 친화적 인 가이드를 찾는 것은 너무 어려웠습니다. MDN 및 기타 웹 사이트의 리소스는 도움이되었지만 내가 찾고 있던 엔드 투 엔드 튜토리얼이 부족했습니다.

그렇기 때문에이 기사를 작성하는 이유입니다. 내가 찾은 단계별 가이드를 제공하기 위해. FFMPEG 스크립트 작성, 비디오 파일 인코딩 및 DASH.JS (Dash Compatible Video Player)를 구현하는 것 사이의 간격을 브리지를 연결합니다.

기본 html5를 넘어서 꼬리표

왜 단순히 HTML에 의존 할 수 없는지 궁금 할 것입니다. 요소. 그에 대한 좋은 이유가 있습니다. 네이티브의 차이점을 비교해 봅시다 브라우저에서 요소 및 적응 형 비디오 스트리밍.

진보적 인 다운로드

프로그레시브 다운로드를 통해 브라우저는 HTTP를 통해 서버에서 선형으로 비디오 파일을 다운로드하고 충분한 데이터를 버퍼링 한 한 재생을 시작합니다. 이것이 기본 동작입니다 요소.

비디오를 재생하면 브라우저의 네트워크 탭을 확인하면 206 Partial Content 상태 코드.

HTTP 206 범위 요청
(큰 미리보기)

HTTP 206 범위 요청을 사용하여 비디오 파일을 청크로 가져옵니다. 서버는 비디오의 특정 바이트 범위를 브라우저로 보냅니다. 찾을 때 브라우저는 새로운 바이트 범위를 요구하는 더 많은 범위 요청을 할 것입니다 (예 : “Bytes 1,000,000–2,000,000”).

다시 말해, 전체 파일을 한 번에 가져 오지 않습니다. 대신, 단일 MP4 비디오 파일에서 부분 바이트 범위를 제공합니다. 이것은 여전히 ​​a로 간주됩니다 진보적 인 다운로드 HTTP를 통해 단일 파일 만 가져 오기 때문에 대역폭이나 품질 적응이 없습니다.

서버 나 브라우저가 범위 요청을 지원하지 않으면 전체 비디오 파일이 단일 요청으로 다운로드되어 200 OK 상태 코드. 이 경우 전체 파일이 다운로드를 마친 후에 만 ​​비디오가 재생을 시작할 수 있습니다.

문제? 고해상도 비디오를 보려고 느리게 연결 중이라면 재생이 시작되기 전에 오랫동안 기다릴 것입니다.

적응 형 비트 전송률 스트리밍

하나의 비디오 파일을 제공하는 대신 적응 형 비트 레이트 (ABR) 스트리밍 다른 비트 전송률과 해상도에서 비디오를 여러 세그먼트로 나눕니다. 재생 중에 ABR 알고리즘은 네트워크 연결, 대역폭 및 기타 장치 기능을 기반으로 원활한 재생을 위해 정시에 다운로드 할 수있는 최고 품질 세그먼트를 자동으로 선택합니다. 변화하는 조건에 적응하기 위해 계속 조정합니다.

이 마법은 두 가지 주요 브라우저 기술을 통해 발생합니다.

  • 미디어 소스 확장 (MSE)
    MediaSource 객체를 전달할 수 있습니다 src 속성 비디오 세그먼트를 나타내는 여러 SourceBuffer 객체를 전송 할 수 있습니다.
  • 미디어 기능 API
    장치의 비디오 디코딩 및 인코딩 능력에 대한 정보를 제공하여 ABR이 제공 할 해결책에 대한 정보에 근거한 결정을 내릴 수 있습니다.

이들은 함께 ABR의 핵심 기능을 활성화하여 특정 장치 제한을 실시간으로 최적화 한 비디오 청크를 제공합니다.

스트리밍 프로토콜 : MPEG-DASH VS. HLS

위에서 언급 한 바와 같이, 미디어를 적응 적으로 스트리밍하기 위해, 비디오는 다양한 시점에 걸쳐 다른 품질 수준의 덩어리로 분할된다. 우리는 이러한 세그먼트 사이를 적응 적으로 실시간으로 전환하는 과정을 용이하게해야합니다. 이를 달성하기 위해 ABR 스트리밍은 특정 프로토콜에 의존합니다. 가장 일반적인 ABR 프로토콜은 다음과 같습니다.

  • MPEG-DASH,
  • HTTP 라이브 스트리밍 (HLS).

이 두 프로토콜은 모두 HTTP를 사용하여 비디오 파일을 전송합니다. 따라서 HTTP 웹 서버와 호환됩니다.

이 기사는 MPEG-Dash에 중점을 둡니다. 그러나 MUX의 기사에 언급 된 것처럼 Dash는 Apple 장치 나 브라우저에서 지원되지 않는다는 점에 주목할 가치가 있습니다.

MPEG-DASH

MPEG-DASH는 다음을 통해 적응 형 스트리밍을 가능하게합니다.

  • 미디어 프레젠테이션 설명 (MPD) 파일
    이 XML Manifest 파일에는 적응 규칙을 기반으로 스트림을 선택하고 관리하는 방법에 대한 정보가 포함되어 있습니다.
  • 세분화 된 미디어 파일
    비디오 및 오디오 파일은 MPEG-DASH 호환 코덱 및 형식을 사용하여 다른 해상도 및 기간의 세그먼트로 나뉩니다.

클라이언트 측에서 Dash 호환 비디오 플레이어는 MPD 파일을 읽고 네트워크 대역폭을 지속적으로 모니터링합니다. 사용 가능한 대역폭을 기반으로 플레이어는 적절한 비트 전송률을 선택하고 해당 비디오 청크를 요청합니다. 이 프로세스는 재생 전반에 걸쳐 반복되어 부드럽고 최적의 품질을 보장합니다.

이제 기초를 이해 했으므로 적응 형 비디오 플레이어를 구축합시다!

적응 형 비트 전송선 스트리밍 비디오 플레이어를 구축하는 단계

다음은 계획입니다.

  1. MP4 비디오를 다양한 해상도에서 오디오 및 비디오 표현으로 트랜스 코딩하고 FFMPEG와 비트 전송하십시오.
  2. FFMPEG로 MPD 파일을 생성하십시오.
  3. 서버에서 출력 파일을 제공합니다.
  4. 대시 호환 비디오 플레이어를 구축하여 비디오를 재생하십시오.

FFMPEG를 설치하십시오

MacOS 사용자의 경우 터미널에서 다음 명령을 실행하여 Brew를 사용하여 FFMPEG를 설치하십시오.

brew install ffmpeg

다른 운영 체제는 FFMPEG의 문서를 참조하십시오.

오디오 변환을 생성합니다

다음으로 다음 스크립트를 실행하여 오디오 트랙을 추출하고 Dash 호환성을 위해 Webm 형식으로 인코딩합니다.

ffmpeg -i "input_video.mp4" -vn -acodec libvorbis -ab 128k "audio.webm"
  • -i "input_video.mp4": 입력 비디오 파일을 지정합니다.
  • -vn: 비디오 스트림 (오디오 전용 출력)을 비활성화합니다.
  • -acodec libvorbis: 사용 libvorbis 오디오를 인코딩하는 코덱.
  • -ab 128k: 오디오 비트 전송률을 설정합니다 128kbps.
  • "audio.webm": 출력 오디오 파일을 Webm 형식으로 지정합니다.

비디오 변환을 생성합니다

이 스크립트를 실행하여 다양한 해상도 및 비트 레이트로 세 가지 비디오 변환을 만듭니다. 가장 큰 해상도는 입력 파일 크기와 일치해야합니다. 예를 들어 입력 비디오가있는 경우 576 × 1024 초당 30 프레임 (FPS)으로 스크립트는 수직 비디오 재생에 최적화 된 변형을 생성합니다.

ffmpeg -i "input_video.mp4" -c:v libvpx-vp9 -keyint_min 150 -g 150 \
-tile-columns 4 -frame-parallel 1 -f webm \
-an -vf scale=576:1024 -b:v 1500k "input_video_576x1024_1500k.webm" \
-an -vf scale=480:854 -b:v 1000k "input_video_480x854_1000k.webm" \
-an -vf scale=360:640 -b:v 750k "input_video_360x640_750k.webm"
  • -c:v libvpx-vp9: 사용 libwx-vp9 Webm의 VP9 비디오 인코더로
  • -keyint_min 150 그리고 -g 150: a 150- 프레임 키 프레임 간격 (30fps에서 약 5 초마다). 이렇게하면 5 초마다 비트 전송률이 전환 될 수 있습니다.
  • -tile-columns 4 그리고 -frame-parallel 1: 병렬 처리를 통해 인코딩 성능을 최적화합니다.
  • -f webm: 출력 형식을 Webm으로 지정합니다.

각 변환에서 :

  • -an: 오디오 제외 (비디오 전용 출력).
  • -vf scale=576:1024: 비디오를 해상도로 스케일링합니다 576×1024 픽셀.
  • -b:v 1500k: 비디오 비트 전송률을 설정합니다 1500kbps.

웹은 크기가 작고 최적화되어 있지만 대부분의 웹 브라우저와 널리 호환되므로 출력 형식으로 선택됩니다.

MPD 매니페스트 파일을 생성합니다

다음 스크립트를 실행하여 비디오 변환 및 오디오 트랙을 대시 호환 MPD Manifest 파일로 결합하십시오.

ffmpeg \
  -f webm_dash_manifest -i "input_video_576x1024_1500k.webm" \
  -f webm_dash_manifest -i "input_video_480x854_1000k.webm" \
  -f webm_dash_manifest -i "input_video_360x640_750k.webm" \
  -f webm_dash_manifest -i "audio.webm" \
  -c copy \
  -map 0 -map 1 -map 2 -map 3 \
  -f webm_dash_manifest \
  -adaptation_sets "id=0,streams=0,1,2 id=1,streams=3" \
  "input_video_manifest.mpd"
  • -f webm_dash_manifest -i "…": Ash 비디오 플레이어가 네트워크 조건에 따라 동적으로 전환되도록 입력을 지정합니다.
  • -map 0 -map 1 -map 2 -map 3: 최종 선언에 모든 ​​비디오 (0, 1, 2) 및 오디오 (3)가 포함되어 있습니다.
  • -adaptation_sets: 그룹 스트림을 적응 세트로 스트리밍합니다.
    • id=0,streams=0,1,2: 비디오 변환을 단일 적응 세트로 그룹화합니다.
    • id=1,streams=3: 오디오 트랙을 별도의 적응 세트에 할당합니다.

결과 MPD 파일 (input_video_manifest.mpd)은 스트림을 설명하고 MPEG-Dash에서 적응 형 비트 전송률 스트리밍을 활성화합니다.




  
    
      
      
        input_video_576x1024_1500k.webm
        
          
        
      
      
      
        input_video_480x854_1000k.webm
        
          
        
      
      
      
        input_video_360x640_750k.webm
        
          
        
      
      
    
    
    
      
      
        audio.webm

이 단계를 완료 한 후에는 다음과 같습니다.

  1. 3 개의 비디오 변환 (576x1024,,, 480x854,,, 360x640),)
  2. 하나의 오디오 트랙 및
  3. MPD 매니페스트 파일.
input_video.mp4
audio.webm
input_video_576x1024_1500k.webm
input_video_480x854_1000k.webm
input_video_360x640_750k.webm
input_video_manifest.mpd

오리지널 비디오 input_video.mp4 나중에 폴백 비디오 소스 역할을하도록 유지해야합니다.

출력 파일을 제공하십시오

이 출력 파일은 이제 재생을 위해 클라우드 스토리지 (예 : AWS S3 또는 CloudFlare R2)에 업로드 할 수 있습니다. 로컬 폴더에서 직접 제공 할 수는 있지만 클라우드 스토리지에 저장하고 CDN을 활용하여 자산을 더 나은 성능을 발휘할 수 있습니다. AWS와 CloudFlare는 모두 HTTP 범위 요청이 상자 밖으로 지원됩니다.

React에서 대시 호환 비디오 플레이어 구축

모든 것이 어떻게 작동하는지 이해하는 데 도움이되는 실제 모범과 같은 것은 없습니다. 대시 호환 비디오 플레이어를 구현할 수있는 방법에는 여러 가지가 있지만 React를 사용한 접근 방식에 중점을 둘 것입니다.

먼저 실행하여 Dash.js NPM 패키지를 설치하십시오.

npm i dashjs

다음으로 호출 된 구성 요소를 만듭니다 컴포넌트가 마운트 할 때 MPD 파일을 포적하여 대시 미디어 플레이어 인스턴스를 초기화합니다.

ref 콜백 함수는 구성 요소 장착 및 콜백 함수 내에서 실행됩니다. playerRef 실제 대시 미디어 플레이어 인스턴스를 참조하고 이벤트 리스너와 결합합니다. 우리는 또한 원래 mp4 URL을 포함합니다 브라우저가 MPEG-Dash를 지원하지 않으면 폴백으로 요소.

사용하는 경우 다음 .js 앱 라우터추가해야합니다 ‘use client’ 비디오 플레이어가 클라이언트 측에서만 초기화되므로 클라이언트 측 수화를 가능하게하는 지침.

전체 예는 다음과 같습니다.

import dashjs from 'dashjs'
import { useCallback, useRef } from 'react'

export const DashVideoPlayer = () => {
  const playerRef = useRef()

  const callbackRef = useCallback((node) => {
    if (node !== null) {  
      playerRef.current = dashjs.MediaPlayer().create()

      playerRef.current.initialize(node, " false)
  
      playerRef.current.on('canPlay', () => {
        // upon video is playable
      })
  
      playerRef.current.on('error', (e) => {
        // handle error
      })
  
      playerRef.current.on('playbackStarted', () => {
        // handle playback started
      })
  
      playerRef.current.on('playbackPaused', () => {
        // handle playback paused
      })
  
      playerRef.current.on('playbackWaiting', () => {
        // handle playback buffering
      })
    }
  },[])

  return (
    
  )
}

결과

Chrome Devtools를 사용하여 네트워크 연결이 빠른 4G에서 3G에서 조정되면 비디오 파일의 변경 사항을 관찰하십시오. 480p에서 360p로 전환하여 경험이 사용 가능한 대역폭에 대해 어떻게 최적화되는지 보여줍니다.

ABR 예

결론

그게 다야! 방금 적응 형 비트 전송률 스트리밍이있는 비디오를 설정하기 위해 React에서 작업 대시 호환 비디오 플레이어를 구현했습니다. 다시, 이것의 이점은 뿌리를 둔다 성능. ABR 스트리밍을 채택 할 때 더 작은 청크로 비디오를 요청하여 비디오 파일을 먼저 다운로드 해야하는 경우보다 더 즉각적인 재생을 허용합니다. 또한 동일한 비디오의 여러 버전을 지원하는 방식으로 수행하여 사용자 장치에 가장 적합한 형식을 제공 할 수 있습니다.

참조

스매싱 편집
(GG, YK)

출처 참조

Related Posts

Post Comment

당신은 놓쳤을 수도 있습니다