DRM の適用

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

One Click Multi DRMと PallyCon DRMの2つの連携方法について説明します。

One Click Multi DRM連携

NAVERクラウドプラットフォームの One Click Multi DRMを使用することで、Widevine、PlayReady、FairPlayを一度に構成できます。以下のユースケースは、DRMテスト APIを呼び出してオプションを組み込む方法です。

DRMテスト API連携

https://vpe-api.sgrsoft.com/api/drmTest エンドポイントを呼び出して DRM情報を取得した後、プレイヤーのオプションに渡します。

"use client";

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import { useEffect, useState } from "react";

export default function OneClickMultiDrmExample() {
  const [options, setOptions] = useState<any>(null);

  useEffect(() => {
    fetch("https://vpe-api.sgrsoft.com/api/drmTest")
      .then((res) => res.json())
      .then((data) => setOptions(data));
  }, []);

  if (!options) {
    return <div className="text-sm text-neutral-500">DRMオプションをロード中...</div>;
  }

  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      options={options}
    />
  );
}

Ncloud DRM Helperのインストール

npm i vpe-drm-helper

• Ncloud DRM Helperは、DRM再生ソースを作成するために使用されます。
• Ncloud APIキーが使用されます。
• Ncloud Sub Accountを使用して、DRM専用 APIキーを作成・使用します。
• 再生ソースの作成タスクは、必ずバックエンドで行う必要があります。

Ncloud DRM Serverの実装

import express from 'express';
import vpeDrmHelper from 'vpe-drm-helper';

const app = express();
const port = 3000;

// DRM Helper設定
const NDRM = new vpeDrmHelper();
NDRM.isGov = false; // 公共官公庁向けクラウドプラットフォームの使用有無を設定(デフォルト値: false)

NDRM.setUserId('test-user');                                        // 視聴者 ID
NDRM.setSiteId('{SITEID}');                                         // One Click Multi DRM Site IDを設定
NDRM.setApiKey('{Ncloud API accessKey}', '{Ncloud API secretKey}'); // ACCESS KEY、SECRET KEYを設定

// DRMソースを作成する APIエンドポイント
app.get('/drm-source', (req, res) => {
  const drmSource = NDRM.drmSourceHelper({
    dash: '{DASH再生ソース}',
    hls: '{HLS再生ソース}',
  }, '{contentId}'); // contentIdが必須、VOD Station / LIVE Stationで確認・設定可能

  res.json(drmSource);
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

• このコードは、Express.jsを使用して簡単なサーバを設定し、/drm-source パスから DRMソースを作成して返す APIを提供します。
• accessKey, secretKey, SITEID, DASH再生ソース、HLS再生ソース、contentIdは、実際の値に置き換える必要があります。
• このサーバを実行するには、Node.jsと npmがインストールされている必要があり、vpe-drm-helper パッケージをインストールする必要があります。

レスポンスの JSON構造

{
  "playlist": [
    {
      "drm": {
        "com.widevine.alpha": {
          "src": "https://8kmgeiox5271.edge.naverncp.com/dash/~Mm2B8LV1K~dMoZUnpjc4g__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_FHD_2Pass_30fps.mp4/manifest.mpd",
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "ow6caa/GO5/39BVtec1cnh3px0PFUX1OJWHi8D+/nNA=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiV0lERVZJTkUiLCJyZXNwb25zZUZvcm1hdCI6Im9yaWdpbmFsIiwidXNlcklkIjoidGVzdC11c2VyIn0="
          }
        },
        "com.microsoft.playready": {
          "src": "https://8kmgeiox5271.edge.naverncp.com/dash/~Mm2B8LV1K~dMoZUnpjc4g__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_FHD_2Pass_30fps.mp4/manifest.mpd",
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "ow6caa/GO5/39BVtec1cnh3px0PFUX1OJWHi8D+/nNA=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiUExBWVJFQURZIiwicmVzcG9uc2VGb3JtYXQiOiJvcmlnaW5hbCIsInVzZXJJZCI6InRlc3QtdXNlciJ9"
          }
        },
        "com.apple.fps": {
          "src": "https://8kmgeiox5271.edge.naverncp.com/hls/~Mm2B8LV1K~dMoZUnpjc4g__/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_AVC_FHD_2Pass_30fps.mp4/index.m3u8",
          "certificateUri": "https://multi-drm.apigw.ntruss.com/api/v1/license/fairPlay",
          "certificateRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "PT8KABJiB0YAzIwfbVyDmJYloQfeCCQ8l51MkmB+9t0=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiRkFJUlBMQVkiLCJyZXNwb25zZUZvcm1hdCI6Im9yaWdpbmFsIiwidXNlcklkIjoidGVzdC11c2VyIn0=",
            "accept": "application/json"
          },
          "licenseUri": "https://multi-drm.apigw.ntruss.com/api/v1/license",
          "licenseRequestHeader": {
            "x-ncp-region_code": "KR",
            "x-ncp-iam-access-key": "ncp_iam_BPASKRX9k5Z9dX3VryI4",
            "x-ncp-apigw-timestamp": 1770471614859,
            "x-ncp-apigw-signature-v2": "ow6caa/GO5/39BVtec1cnh3px0PFUX1OJWHi8D+/nNA=",
            "x-drm-token": "eyJzaXRlSWQiOiJkcm0tMjAyNDA4MjYxMzE1MjgtVmpWeXIiLCJjb250ZW50SWQiOiJ2cGUtc2FtcGxlLXZvZC1kcm0iLCJkcm1UeXBlIjoiRkFJUlBMQVkiLCJyZXNwb25zZUZvcm1hdCI6Im9yaWdpbmFsIiwidXNlcklkIjoidGVzdC11c2VyIn0="
          }
        }
      },
      "poster": "https://2ardrvaj2252.edge.naverncp.com/endpoint/sample/221027_NAVER_Cloud_intro_Long_ver_01.jpg",
      "description": {
        "title": "NAVERクラウドテスト動画",
        "created_at": "2024.07.13",
        "profile_name":"NAVERクラウド",
        "profile_image": "https://player.vpe.naverncp.com/images/d127c8db642716d84b3201f1d152e52a.png"
      }
    }
  ],
  "aspectRatio": "16/9",
  "autostart": true,
  "muted": true
}

PallyCon DRM連携

PallyCon DRMとの連携を迅速に検証できるテストエンドポイントを提供します。別途の DRMライセンスを発行することなく、Widevine、FairPlay、PlayReadyをすぐにテストできます。

テストエンドポイント

以下の APIを呼び出すと、Widevine、FairPlay、PlayReady DRMが設定されたプレイヤーオプションの JSONをレスポンスします。

GET https://vpe-api.sgrsoft.com/api/drmTestPallycon

レスポンス例

{
  "playlist": [
    {
      "drm": {
        "com.apple.fps": {
          "src": "https://contents.pallycon.com/bunny/hls/master.m3u8",
          "certificateUri": "https://license-global.pallycon.com/ri/fpsKeyManager.do?siteId=DEMO",
          "licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
          "licenseRequestHeader": { }
        },
        "com.widevine.alpha": {
          "src": "https://contents.pallycon.com/bunny/stream.mpd",
          "licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
          "licenseRequestHeader": { }
        },
        "com.microsoft.playready": {
          "src": "https://contents.pallycon.com/bunny/stream.mpd",
          "licenseUri": "https://license-global.pallycon.com/ri/licenseManager.do",
          "licenseRequestHeader": { }
        }
      },
      "description": {
        "title": "Pallyconテスト動画",
        "created_at": "2024.07.13"
      }
    }
  ],
  "aspectRatio": "16/9",
  "autostart": true,
  "muted": true
}

プレイヤー連携

エンドポイントから受け取ったレスポンスをそのままプレイヤーのオプションに渡すと、DRM再生が開始されます。ブラウザに応じて、Widevine(Chrome、Firefox)、FairPlay(Safari)、PlayReady(Edge)の中から適切な DRMが自動的に選択されます。

import { useEffect, useState } from "react";
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

const DRM_API = "https://vpe-api.sgrsoft.com/api/drmTestPallycon";

export function App() {
  const [options, setOptions] = useState(null);

  useEffect(() => {
    fetch(DRM_API)
      .then((res) => res.json())
      .then((data) => setOptions(data));
  }, []);

  if (!options) return <div>DRM設定をロード中...</div>;

  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={options}
    />
  );
}

静的オプションで直接設定

APIを呼び出さずに、コードに DRMオプションを直接作成することもできます。

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        playlist: [
          {
            drm: {
              "com.apple.fps": {
                src: "https://contents.pallycon.com/bunny/hls/master.m3u8",
                certificateUri: "https://license-global.pallycon.com/ri/fpsKeyManager.do?siteId=DEMO",
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "Content-type": "application/x-www-form-urlencoded",
                  "pallycon-customdata-v2": "{FairPlay Token}",
                },
              },
              "com.widevine.alpha": {
                src: "https://contents.pallycon.com/bunny/stream.mpd",
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{Widevine Token}",
                },
              },
              "com.microsoft.playready": {
                src: "https://contents.pallycon.com/bunny/stream.mpd",
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{PlayReady Token}",
                },
              },
            },
            description: {
              title: "Pallyconテスト動画",
              created_at: "2024.07.13",
            },
          },
        ],
        aspectRatio: "16/9",
        autostart: true,
        muted: true,
      }}
    />
  );
}

DRMタイプ別ブラウザのサポート