Classic/VPC 환경에서 이용 가능합니다.
콘텐츠 인증에서는 스크립트 코드를 수정하여 재생 소스에 Secure Token을 적용하는 방법과 MultiDRM을 설정하는 방법을 설명합니다.
주의
현재 기능은 실제 기기에서만 동작합니다. 시뮬레이터에서는 동작하지 않습니다.
참고
Android, iOS에 공통으로 적용되는 사항입니다.
Secure Token
token 속성으로 재생 소스에 Secure Token을 적용하여 OneTimeUrl을 지원할 수 있습니다.
player.tokenChange 속성으로 동영상 재생 중 중단 없이 Secure Token을 교체할 수 있습니다.
Secure Token에 관한 자세한 내용은 Global Edge 사용 가이드를 참고해 주십시오.
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [ //재생소스
{
file: 'https://CDN도메인/example_video_01.mp4'
},
],
token: 'token=st=1675320871~exp=1675320901~acl=....', // Secure Token
}}
...
/>
)
//토큰 업데이트
playerRef.current.tokenChange('token=st=1675320871~exp=1675320901~acl=....') // 재생 중 신규 토큰으로 교체
MultiDRM
playlist.drm 속성으로 MultiDRM을 설정할 수 있습니다. 예제는 다음과 같습니다.
주의
해당 예제는 Doverunner (PallyCon) DRM 예제 입니다.
FairPlay
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [ //재생소스
{
file: 'https://CDN도메인/example_video_01.m3u8',
drm: {
type: 'fairplay',
licenseServer: 'https://license-global.pallycon.com/ri/licenseManager.do',
certificateUrl: '{Certificate URL}',
base64Certificate: true,
getLicense: async (spc) => {
const res = await fetch('https://license-global.pallycon.com/ri/licenseManager.do', {
method: 'POST',
headers: {
'pallycon-customdata-v2':'{FairPlay용 Token}'
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)
Widevine
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [ //재생소스
{
file: 'https://CDN도메인/example_video_01.mpd',
drm: {
type: 'widevine',
licenseServer: 'https://license-global.pallycon.com/ri/licenseManager.do',
getLicense: async (spc) => {
const res = await fetch('https://license-global.pallycon.com/ri/licenseManager.do', {
method: 'POST',
headers: {
'Content-type': 'application/x-www-form-urlencoded',
'pallycon-customdata-v2':'{Widevine용 Token}'
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)
One Click Multi DRM
Video Player Enhancement 서비스와 One Click Multi DRM 서비스를 연동하여 DRM을 적용할 수 있습니다.
FPS Certificate 및 라이선스 발급을 요청하기 위한 Endpoint(엔드포인트) 및 요청 헤더를 확인해 주십시오.
FPS Certificate 요청(Apple FairPlay 전용)
라이선스 발급 요청(FairPlay, Widevine,PlayReady 공용)
FairPlay
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.m3u8',
drm: {
type: 'fairplay',
licenseServer: '{License URL}',
certificateUrl: '{Certificate URL}',
certificateRequestHeader: {
"x-ncp-region_code": "KR",
"x-ncp-iam-access-key": accessKey,
"x-ncp-apigw-timestamp": timestamp,
"x-ncp-apigw-signature-v2": signature,
"accept": "application/json"
},
base64Certificate: true,
getLicense: async (spc) => {
const res = await fetch('{License URL}', {
method: 'POST',
headers: {
"x-ncp-region_code": "KR",
"x-ncp-iam-access-key": accessKey,
"x-ncp-apigw-timestamp": timestamp,
"x-ncp-apigw-signature-v2": signature,
"x-drm-token": "{One Click Multi DRM FPS TOKEN}"
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)
Widevine
const playerRef = useRef(null);
return (
<VpePlayer
...
ref={playerRef}
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.m3u8',
drm: {
type: 'widevine',
licenseServer: '{License URL}',
getLicense: async (spc) => {
const res = await fetch('{License URL}', {
method: 'POST',
headers: {
"x-ncp-region_code": "KR",
"x-ncp-iam-access-key": accessKey,
"x-ncp-apigw-timestamp": timestamp,
"x-ncp-apigw-signature-v2": signature,
"x-drm-token": "{One Click Multi DRM FPS TOKEN}"
},
body: spc,
});
const ckcBase64 = await res.text();
return ckcBase64;
},
},
]
}}
...
/>
)