설치 (npm)

React / Next.js 프로젝트에서 npm 또는 pnpm으로 VPE SDK를 설치합니다.

패키지 설치

npm i @sgrsoft/vpe-react-sdk

또는 pnpm을 사용하는 경우:

pnpm add @sgrsoft/vpe-react-sdk

피어 디펜던시

스트리밍 프로토콜에 따라 필요한 라이브러리를 추가로 설치합니다. 번들에 포함되지 않으므로 필요한 프로토콜만 선택적으로 설치하면 됩니다.

프로토콜	패키지	설명
HLS	hls.js	HLS 스트리밍 재생 (필수)
DASH	dashjs	DASH 스트리밍 재생 (선택)

# HLS 스트리밍 (필수)
npm i hls.js

# DASH 스트리밍 (선택)
npm i dashjs

Next.js 설정

Next.js에서 사용할 때는 "use client" 지시어가 필요합니다. VPE 컴포넌트는 브라우저 API를 사용하므로 클라이언트 컴포넌트로 렌더링해야 합니다.

app/player/page.tsx

"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로 로드하여 전달합니다.

app/player/page.tsx

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