Shaka Player는 적응형 미디어를 위한 오픈 소스 JavaScript 라이브러리입니다. 플러그인이나 플래시를 사용하지 않고 브라우저에서 적응형 미디어 형식(예: DASH, HLS 및 MSS)을 재생합니다. 대신 Shaka Player는 개방형 웹 표준 MediaSource Extensions 및 Encrypted Media Extensions를 사용합니다.
Shaka Player는 IndexedDB를 사용하여 오프라인 저장 및 미디어 재생도 지원합니다. 콘텐츠는 모든 브라우저에 저장될 수 있습니다. 라이센스 저장은 브라우저 지원에 따라 다릅니다.
우리의 주요 목표는 최신 브라우저 기술을 사용하여 적응형 비트 전송률 비디오 및 오디오를 최대한 쉽게 스트리밍할 수 있도록 하는 것입니다. 우리는 라이브러리를 가볍고 단순하게 유지하며 타사 종속성이 없도록 노력합니다. 빌드하고 배포하는 데 필요한 모든 것이 소스에 있습니다.
향후 계획에 대한 자세한 내용은 개발 로드맵을 참조하세요.
유지되는 지점
Shaka Player의 유지 관리 브랜치에 대한 최신 목록은maintained-branches.md를 참조하세요.
플랫폼 및 브라우저 지원 매트릭스
| 브라우저 | 윈도우 | 스코틀랜드 사람 | 리눅스 | 기계적 인조 인간 | iOS >= 9 | iOS >= 17.1 | iPadOS >= 13 | 크롬 OS | 다른 |
|---|
| 크롬¹ | 와이 | 와이 | 와이 | 와이 | 토종의 | 토종의 | 토종의 | 와이 | - |
| 파이어폭스² | 와이 | 와이 | 와이 | 테스트되지 않음⁵ | 토종의 | 토종의 | 토종의 | - | - |
| 엣지¹ | 와이 | - | - | - | - | - | - | - | - |
| 엣지 크롬 | 와이 | 와이 | 와이 | 테스트되지 않음⁵ | 토종의 | 토종의 | 토종의 | - | - |
| 즉 | N | - | - | - | - | - | - | - | - |
| 사파리 ¹ | - | 와이 | - | - | 토종의 | 와이 | 와이 | - | - |
| 오페라¹ | 와이 | 와이 | 와이 | 테스트되지 않음⁵ | 토종의 | - | - | - | - |
| Chromecast². | - | - | - | - | - | - | - | - | 와이 |
| 타이젠 TV³ | - | - | - | - | - | - | - | - | 와이 |
| 웹OS⁶ | - | - | - | - | - | - | - | - | 와이 |
| Hisense7 | - | - | - | - | - | - | - | - | 와이 |
| 엑스박스 원 | - | - | - | - | - | - | - | - | 와이 |
| 플레이스테이션 47 | - | - | - | - | - | - | - | - | 와이 |
| 플레이스테이션 57 | - | - | - | - | - | - | - | - | 와이 |
참고:
- ¹: macOS에서는 Safari 9+만 지원됩니다. iOS에서는 iOS 9+만 지원됩니다. 이전 버전은 거부됩니다.
- ²: 안정적인 최신 Chromecast 펌웨어가 테스트되었습니다. 송신자와 수신자 모두 Shaka Player로 구현할 수 있습니다.
- 3: Tizen 2017 모델은 Shaka Player 팀에서 적극적으로 테스트하고 지원합니다. Tizen 2016 모델은 커뮤니티에서 지원되며 우리가 테스트하지 않았습니다.
- ⁵: 이는 작동할 것으로 예상되지만 Shaka Player 팀에서는 적극적으로 테스트하지 않습니다.
- ⁶: 이는 작동할 것으로 예상되지만 커뮤니티에서 지원되며 우리가 테스트하지 않았습니다.
- 7: 이는 작동할 것으로 예상되지만 커뮤니티에서 지원되며 우리가 테스트하지 않았습니다.
iOS 및 iPadOS에 대한 참고 사항:
- Apple의 기본 HLS 플레이어를 통해 iOS 9+를 지원합니다. 동일한 최상위 API를 제공하지만 비디오의
src 요소를 매니페스트/미디어로 설정했습니다. 따라서 우리는 매니페스트를 지원하는 브라우저에 의존합니다. - iPadOS 13 MediaSource 확장이 지원되므로
- iPadOS 17 및 iOS 17.1부터 ManagedMediaSource 확장이 지원됩니다.
매니페스트 형식 지원 매트릭스
| 체재 | 주문형 비디오 | 살다 | 이벤트 | 진행 중인 녹화 |
|---|
| 대시 | 와이 | 와이 | - | 와이 |
| HLS | 와이 | 와이 | 와이 | - |
| MSS | 와이 | - | - | - |
사용자 정의 매니페스트 형식을 지원하는 매니페스트 파서 플러그인을 생성할 수도 있습니다.
대시 기능
지원되는 DASH 기능:
- VOD, 라이브 및 진행 중인 녹화(동적 VOD 콘텐츠)
- 라이브 스트림에서 뒤로 탐색하기 위한 MPD@timeShiftBufferDepth
- 다중 기간 콘텐츠(정적 및 동적)
- Xlink 요소(actuate=onLoad 전용, 0으로 해결, 대체 콘텐츠)
- 모든 형태의 세그먼트 인덱스 정보: SegmentBase@indexRange, SegmentTimeline, SegmentTemplate@duration, SegmentTemplate@index, SegmentList
- 다중 코덱/다중 컨테이너 매니페스트(브라우저와 지원을 협상하고 가장 적합한 것을 선택합니다)
- 암호화된 콘텐츠(사용자 정의 ContentProtection 스키마, 매니페스트의 PSSH 포함)
- 키 순환
- 트릭 모드 트랙
- WebVTT 및 TTML
- CEA-608/708 캡션
- 다중 코덱 변형(changeType을 지원하는 플랫폼)
- MPD 체인
- SegmentTemplate에 대한 MPD 패치 업데이트 $번호$ , 세그먼트타임라인 $번호$ 및 SegmentTimeline $시간$
지원되지 않는 DASH 기능:
- actactate=onRequest를 사용하는 Xlink
- 세그먼트 정보 없이 매니페스트: #1088
- 다양한 프레임 속도 또는 비트 전송률에서 동일한 해상도를 위한 다중 트릭 모드 트랙
- 시간 척도가 너무 커서 JavaScript에서 타임스탬프를 정수로 표시할 수 없습니다(2^53): #1667
- MPD 패치를 통해 @schemeIdUri 속성으로 요소 수정
- MPD 패치를 사용한 Xlink 역참조
HLS 기능
지원되는 HLS 기능:
- VOD, 라이브, 이벤트 종류
- 부분 세그먼트, 사전 로드 힌트, 델타 업데이트 및 재생 목록 다시 로드 차단을 통한 저지연 스트리밍
- 불연속
- ISO-BMFF/MP4/CMAF 지원
- MPEG-2 TS 지원
- WebVTT 및 TTML
- CEA-608/708 캡션
- PlayReady 및 Widevine으로 암호화된 콘텐츠
- FairPlay로 암호화된 콘텐츠(macOS 및 iOS 9+의 Safari에만 해당)
- Web Crypto API를 지원하는 브라우저에서 AES-128, AES-256 및 AES-256-CTR 지원
- ClearKey를 지원하는 브라우저에서 SAMPLE-AES 및 SAMPLE-AES-CTR(ID) 지원
- 키 순환
- Raw AAC, MP3, AC-3 및 EC-3(MP4 컨테이너 없음)
- I-프레임 전용 재생 목록(트릭 플레이 및 썸네일용)
- 썸네일의 경우 #EXT-X-IMAGE-STREAM-INF
- 전면 광고
- 재생 중 컨테이너 변경(예: MP4에서 TS로 또는 AAC에서 TS로)
HLS 기능은 지원되지 않습니다 :
지원되는 HLS 태그
HLS 형식과 이러한 태그의 의미에 대한 자세한 내용은 https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis를 참조하세요.
Multivariant 재생목록 태그
-
#EXT-X-STREAM-INF:<attribute-list> <URI> -
#EXT-X-MEDIA:<attribute-list> -
#EXT-X-IMAGE-STREAM-INF:<attribute-list> -
#EXT-XI-FRAME-STREAM-INF:<attribute-list> -
#EXT-X-SESSION-DATA:<attribute-list> -
#EXT-X-SESSION-KEY:<attribute-list> EME 키 시스템 선택 및 사전 로드 -
#EXT-X-START:TIME-OFFSET=<n> -
#EXT-X-CONTENT-STEERING:<attribute-list> 콘텐츠 조정 -
#EXT-X-DEFINE:<attribute-list> 변수 대체( NAME,VALUE,QUERYPARAM 속성)
미디어 재생 목록 태그
-
#EXTM3U -
#EXTINF:<duration>,[<title>] -
#EXT-X-PLAYLIST-TYPE:<type -
#EXT-X-ENDLIST -
#EXT-X-MEDIA-SEQUENCE=<n> -
#EXT-X-TARGETDURATION=<n> -
#EXT-X-DISCONTINUITY -
#EXT-X-DISCONTINUITY-SEQUENCE=<n> -
#EXT-X-BYTERANGE=<n>[@<o>] -
#EXT-X-MAP:<attribute-list> -
#EXT-X-KEY:<attribute-list> ( KEYFORMAT="identity",METHOD=SAMPLE-AES 는 MP4 세그먼트에서만 지원됩니다) -
#EXT-X-PROGRAM-DATE-TIME:<attribute-list> -
#EXT-X-START:TIME-OFFSET=<n> -
#EXT-X-SERVER-CONTROL:<attribute-list> -
#EXT-X-PART-INF:PART-TARGET=<n> -
#EXT-X-PART:<attribute-list> -
#EXT-X-SKIP:<attribute-list> 델타 재생 목록 -
#EXT-X-DATERANGE:<attribute-list> 메타데이터 -
#EXT-X-DEFINE:<attribute-list> 변수 가져오기 및 대체( NAME,VALUE,IMPORT,QUERYPARAM 속성) -
#EXT-X-GAP -
#EXT-X-PRELOAD-HINT:<attribute-list> -
#EXT-X-BITRATE
MPEG-5 Part2 LCEVC 지원
미디어 소스 확장 SourceBuffer를 지원하는 브라우저에서만 지원됩니다.
MSS 기능
지원되는 MSS 기능:
- VOD
- AAC 및 H.264
- 암호화된 콘텐츠(PlayReady)
- TTML/DFXP
- codem-isoboxer에서만 지원됩니다.
지원되지 않는 MSS 기능:
DRM 지원 매트릭스
| 브라우저 | 와이드바인 | 플레이레디 | 페어플레이 | 클리어키⁶ |
|---|
| 크롬² | 와이 | - | - | 와이 |
| 파이어폭스² | 와이 | - | - | 와이 |
| 엣지³ | - | 와이 | - | - |
| 엣지 크롬 | 와이 | 와이 | - | 와이 |
| 원정 여행 | - | - | 와이 | - |
| 오페라 | 와이 | - | - | 와이 |
| 크롬캐스트 | 와이 | 와이 | - | 와이 |
| 타이젠TV | 와이 | 와이 | - | 와이 |
| WebOS 7 | 테스트되지 않음 | 테스트되지 않음 | - | 테스트되지 않음 |
| Hisense7 | 테스트되지 않음 | 테스트되지 않음 | - | 테스트되지 않음 |
| 엑스박스 원 | - | 와이 | - | - |
| 플레이스테이션 47 | - | 테스트되지 않음 | - | 테스트되지 않음 |
| 플레이스테이션 57 | - | 테스트되지 않음 | - | 테스트되지 않음 |
다른 DRM 시스템은 상호 운용이 가능하고 EME 사양을 준수하는 경우 즉시 작동해야 합니다.
참고:
- ¹: 공식 Chrome 빌드에만 Widevine CDM이 포함되어 있습니다. 소스에서 빌드된 Chromium은 DRM을 지원하지 않습니다.
- ²: 사용자가 DRM을 활성화해야 합니다. Firefox 사용자가 암호화된 미디어가 있는 사이트를 처음 방문하면 DRM을 활성화하라는 메시지가 표시됩니다.
- 3: Edge의 PlayReady는 VM이나 원격 데스크톱에서 작동하지 않는 것 같습니다.
- ⁶: ClearKey는 디버깅에 유용한 도구이며 실제 콘텐츠 보안을 제공하지 않습니다.
- 7: 이는 작동할 것으로 예상되지만 커뮤니티에서 지원되며 우리가 테스트하지 않았습니다.
| 명백한 | 와이드바인 | 플레이레디 | 페어플레이 | 클리어키 |
|---|
| 대시 | 와이 | 와이 | - | 와이 |
| HLS | 와이 | 와이 | 예 ¹ | - |
| MSS | - | 와이 | - | - |
참고:
- ¹: 기본적으로 FairPlay는 Safari에서 Apple의 기본 HLS 플레이어를 사용하여 처리됩니다. 그러나 우리는 MSE/EME를 통해 FairPlay를 지원합니다.
streaming.useNativeHlsForFairPlay 구성 값을 참조하세요.
미디어 컨테이너 및 자막 지원
샤카 플레이어는 다음을 지원합니다:
- ISO-BMFF/CMAF/MP4
- MediaSource를 통한 컨테이너에 대한 브라우저 지원에 따라 다름
- DASH의 SegmentBase@indexRange 및 SegmentTemplate@index에 대한 "sidx" 상자를 구문 분석할 수 있습니다.
- HLS에서 세그먼트 시작 시간을 찾기 위해 "tfdt" 상자를 찾아 구문 분석할 수 있습니다.
- MSS의 경우 codem-isoboxer v0.3.7+가 필요합니다.
- 웹M
- MediaSource를 통한 컨테이너에 대한 브라우저 지원에 따라 다름
- DASH의 SegmentBase@indexRange 및 SegmentTemplate@index에 대한 신호 데이터 요소를 구문 분석할 수 있습니다.
- HLS에서는 지원되지 않습니다.
- MPEG-2 TS
- MP4를 지원하는 모든 브라우저에서 재생할 수 있습니다.
- HLS에서 세그먼트 시작 시간을 찾기 위해 타임스탬프를 찾고 구문 분석할 수 있습니다.
- WebVTT
- 텍스트 형식과 MP4에 포함되어 모두 지원됩니다.
- TTML
- CEA-608
- CEA-708
- 원시 AAC
- 원시 AAC 컨테이너에서 지원되며 MP4 컨테이너의 AAC로 트랜스먹싱됩니다(MediaSource를 통한 브라우저 지원에 따라 다름).
- 원시 MP3
- 원시 MP3 컨테이너에서 지원되며 MP4 컨테이너에서 MP3로 변환됩니다(MediaSource를 통한 브라우저 지원에 따라 다름).
- 원시 AC-3
- 원시 AC-3 컨테이너에서 지원되고 MP4 컨테이너에서 AC-3으로 트랜스먹싱됩니다(MediaSource를 통한 브라우저 지원에 따라 다름).
- 원시 EC-3
- 원시 EC-3 컨테이너에서 지원되고 MP4 컨테이너에서 EC-3으로 트랜스먹싱됩니다(MediaSource를 통한 브라우저 지원에 따라 다름).
- 서브립(SRT)
- 가사(LRC)
- 변전소 알파(SSA, ASS)
- 서브뷰어(SBV)
자막은 기본적으로 브라우저에서 렌더링됩니다. 애플리케이션은 브라우저 지원 속성 이상으로 고객 렌더링을 위한 텍스트 표시 플러그인을 생성할 수 있습니다.
트랜스먹서 지원
샤카 플레이어는 다음을 지원합니다:
- 원시 AAC를 MP4의 AAC로 변환
- 원시 MP3를 MP4의 MP3로 변환
- MP4의 원시 AC-3에서 AC-3으로
- MP4의 원시 EC-3에서 EC-3으로
- MPEG-2 TS의 AAC를 MP4의 AAC로
- MPEG-2 TS의 AC-3에서 MP4의 AC-3으로
- MPEG-2 TS의 EC-3에서 MP4의 EC-3으로
- MPEG-2 TS의 MP3를 MP4의 MP3로
- MPEG-2 TS의 MP3를 원시 MP3로 변환
- MPEG-2 TS의 Opus를 MP4의 MP3로 변환
- MPEG-2 TS의 H.264에서 MP4의 H.264로
- MPEG-2 TS의 H.265에서 MP4의 H.265로
- 이전 코덱을 사용하여 MPEG-2 TS의 다중화된 콘텐츠
썸네일 지원
샤카 플레이어는 다음을 지원합니다:
- 내부 DASH 썸네일. DASH-IF IOP 이미지 적응 세트 사용
- 내부 HLS 썸네일. HLS 이미지 미디어 재생 목록 사용
- 내부 HLS 썸네일. mjpg 코덱과 함께 I-프레임 전용 재생 목록 사용
- 이미지/스프라이트가 포함된 외부 WebVTT(VoD에만 해당)
광고를 통한 수익 창출
샤카 플레이어는 다음을 지원합니다:
- 클라이언트 측 광고 삽입을 위한 IMA SDK
- 서버 측 광고 삽입을 위한 IMA DAI SDK
- 클라이언트 측용 AWS MediaTailor
- 서버 측용 AWS MediaTailor
- AWS MediaTailor 오버레이
- HLS 전면 광고
- DASH 미디어 프리젠테이션 삽입(MPD 대체)
- 맞춤 전면 광고
- IMA 없이 VAST 및 VMAP 기본 지원(추적 없이 재생)
콘텐츠 조정 지원
Shaka Player는 DASH 및 HLS에서 콘텐츠 조정(v1)을 지원합니다.
지원되는 콘텐츠 조정 기능:
- TTL(누락된 경우) 기본값은 300초입니다.
- RELOAD-URI가 누락된 경우 매니페스트에 제공된 URL을 대체용으로 사용합니다.
- PATHWAY 우선순위 전용 호스트 교체
지원되지 않는 콘텐츠 조정 기능:
- PATHWAY-CLONES는 HOST 이외의 다른 대체 항목입니다.
VR 지원
Shaka Player는 다음과 같은 경우 VR을 지원합니다.
- 다음 기준에 맞는 콘텐츠는 자동으로 VR로 처리됩니다.
- HLS 또는 DASH 매니페스트
- fMP4 세그먼트
- Init 세그먼트에는
prji 및 hfov 상자가 포함되어 있습니다.
- 또는 UI 구성을 통해 수동으로 활성화된 경우입니다.
지원되는 VR 모드:
- 360도 수평 시야를 갖춘 정방형 투영입니다.
- 360도 수평 시야각을 갖춘 큐브맵 투영입니다.
참고:
- VR은 클리어 스트림 또는 HLS-AES 스트림에만 지원됩니다. DRM은 변환을 위한 비디오 픽셀에 대한 액세스를 방지합니다.
문서 및 중요 링크
- 데모(출처)
- 야간 데모
- 데모 인덱스
- API 문서
- 튜토리얼
- Google 호스팅 라이브러리에 호스팅된 빌드
- jsDelivr에 호스팅된 빌드
- 개발 로드맵
- 공지사항 목록(간헐적인 공지사항 및 설문조사에 참여)
- 이 블로그의 지침에 따라 릴리스를 구독하세요.
FAQ
일반적인 도움이 필요하거나 버그를 신고하기 전에 FAQ를 읽어보세요.
기여
개선 사항이나 수정 사항이 있는 경우 귀하의 기여를 환영합니다. 기여자가 따라야 할 프로세스에 대한 자세한 내용은 CONTRIBUTING.md를 읽어보세요.
프레임워크 통합
Shaka 팀은 Shaka Player를 특정 프레임워크와 통합하기 위한 지침과 지원을 제공할 수 있는 대역폭과 경험이 없지만 일부 사용자는 이를 성공적으로 수행했으며 다른 초보자를 돕기 위한 튜토리얼을 만들었습니다.
Shaka + ReactJS 라이브러리
- https://github.com/winoffrg/limeplay
Shaka + ReactJS 통합:
- https://github.com/matvp91/shaka-player-react
- https://github.com/amit08255/shaka-player-react-with-ui-config
Shaka + Next.js 통합:
- https://github.com/amit08255/shaka-player-react-with-ui-config/tree/master/nextjs-shaka-player
Shaka + Vue.js 통합:
- https://github.com/davidjamesherzog/shaka-player-vuejs
Shaka + Nuxt.js 통합:
- https://github.com/davidjamesherzog/shaka-player-nuxtjs
Shaka + video.js 통합:
- https://github.com/davidjamesherzog/videojs-shaka
Shaka + Angular 통합:
- https://github.com/PatrickKalkman/shaka-player-angular
Shaka 통합 코드/튜토리얼을 게시한 경우 자유롭게 PR을 제출하여 이 목록에 추가해 주시면 기꺼이 승인해 드리겠습니다.
