VPE 2.0 React の仕様

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

サポート環境

VPEプレイヤーは、再生環境を区別するために、platform値を設定する必要があります。プラットフォームの値は、以下の2つです。

• pub: 個人/法人向けクラウドプラットフォーム環境
• gov: 公共官公庁向けクラウドプラットフォーム環境

ユースケース

Reactのユースケース

platformは、VpePlayer コンポーネントの propsとして渡します。

"use client";

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

export default function PlayerPage() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            platform="pub"
            hls={Hls}
            dashjs={dashjs}
            options={{
                playlist: [
                    {
                        file: "https://CDN_DOMAIN/example_video_01.mp4",
                        poster: "https://CDN_DOMAIN/example_video_01.png",
                    },
                ],
            }}
        />
    );
}

UMDのユースケース

UMD環境では、platform propsは使用しません。個人/法人向けや公共官公庁向けは、CDNスクリプトのエンドポイントによって区別されます。

個人/法人向け

<script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>

公共官公庁向け

<script src="https://player.vpe.gov-ntruss.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>

<script>
    const player = new ncplayer("player", {
        playlist: [
            { file: "https://CDN_DOMAIN/example_video_01.mp4" },
        ],
    });
</script>

パッケージインストール

React、Next.jsプロジェクトで、npm または pnpmで VPE SDKをインストールします。

npmを使用する場合:

npm i @sgrsoft/vpe-react-sdk

pnpmを使用する場合:

pnpm add @sgrsoft/vpe-react-sdk

peerDependencies

ストリーミングプロトコルに応じて、必要なライブラリを追加でインストールします。バンドルには含まれていないため、必要なプロトコルだけを選択してインストールしてください。

# HLSストリーミング(必須)
npm i hls.js

# DASHストリーミング(オプション)
npm i dashjs

Next.js設定

Next.jsで使用する場合は、"use client" ディレクティブが必要です。VPEコンポーネントはブラウザ APIを使用するため、クライアントコンポーネントとしてレンダリングする必要があります。

"use client";

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

export default function PlayerPage() {
    return (
        <div style={{ maxWidth: "800px", margin: "0 auto" }}>
            <VpePlayer
                hls={Hls}
                accessKey="YOUR_ACCESS_KEY"
                options={{
                    playlist: [{
                        file: "https://example.com/video/master.m3u8",
                    }],
                    autostart: true,
                    muted: true,
                    aspectRatio: "16/9",
                }}
            />
        </div>
    );
}

DASHストリーミングを使用する

DASHプロトコルを使用するには、dashjsを動的 importでロードして渡します。

"use client";

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

export default function PlayerPage() {
    const [dashjs, setDashjs] = useState(null);

    useEffect(() => {
        import("dashjs").then((mod) => {
            setDashjs(mod.default ?? mod);
        });
    }, []);

    return (
        <VpePlayer
            hls={Hls}
            dashjs={dashjs}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/stream.mpd>",
                }],
            }}
        />
    );
}

LLMベースのコード作成

VPEプレイヤーの設定をすぐに始めるためのガイドです。llms.txtをプロンプトとして提供すると、AIが Next.jsベースのサンプルコードを作成します。

概念

llms.txtは、VPEプレイヤーの主な使用ルールをまとめた要約文書です。これをまず LLMに読み込ませることで、コード作成時に必須のオプションや推奨される設定を見落とさないようにするのに役立ちます。

LLM選択

使用中の LLM(例: ChatGPT、Claude、Copilot、Cursorなど)に、以下のプロンプトをそのまま貼り付けます。

プロンプト入力

https://developer.vpe.naverncp.com/llms.txtを読んで、Reactのサンプルコードを作成して

ガイド

• レスポンスコード内の accessKey、playlist URLは、プロジェクト環境に合わせて置き換えます。
• HLSを使用する場合は、hls.jsの組み込みが必要かどうか確認します。
• 結果が長すぎる場合は、「必要な部分だけを要約して」と追加でリクエストできます。