VPE React SDK (초안)

React 19/Vite 기반 VPE 플레이어 UI 라이브러리입니다. hls.js/dashjs는 번들에 포함되지 않으며, 외부 플러그인으로 주입합니다.

설치

pnpm add @sgrsoft/vpe-react-ui
# 선택: 스트리밍 라이브러리
pnpm add hls.js dashjs

• hls.js/dashjs는 선택적 peerDependency입니다. 브라우저/CDN 또는 import Hls from "hls.js", import dashjs from "dashjs"로 주입하세요.

사용법

React (ESM)

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

export function App() {
  return (
    <VpePlayer
      accessKey="..."
      appId="..."
      platform="pub"
      stage="prod"
      aspectRatio="16/9"
      hls={Hls}
      dashjs={dashjs}
      options={{
        playlist: [...],
      }}
    />
  );
}

UMD

<link rel="stylesheet" href="./vpePlayer.css" />
<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<script src="https://cdn.jsdelivr.net/npm/dashjs@4"></script>
<script src="./vpePlayer.js"></script>
<div id="video"></div>
<script>
  const player = vpe.setup("#video", {
    aspectRatio: "16/9",
    hls: window.Hls,
    dashjs: window.dashjs,
  });
  // player.destroy() 로 해제 가능
</script>