コンテンツ認証

Classic/VPC環境で利用できます。

再生ソースに Secure Tokenを適用し、DRMを設定する方法について説明します。

サポートプラットフォーム: Android iOS

Secure Token

token オプションで再生ソースに Secure Tokenを適用して OneTimeUrlをサポートします。playerRef.current.tokenChange()で動画の再生中に中断することなく Secure Tokenを交換できます。

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=....');

PallyCon DRM連携

PallyConライセンスサーバに直接リクエストを行う 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とライセンス発行をリクエストするためのエンドポイントとリクエストヘッダを確認します。

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;
            },
          },
        },
      ],
    }}
  />
);