Genie Player SDKv0.1
SDK React · Disponible

Lisez votre vidéo avec les sous-titres Genie

Process and approve captions in the dashboard, then pair the job ID with the video URL you already host.

Two required values

jobId identifies the approved captions hosted by Genie. src identifies the matching video hosted by you. A WebVTT URL or media ID cannot replace the job ID.

Set up with AI

Open your coding agent in the target repository and paste the canonical setup prompt. It connects to Genie MCP with Clerk OAuth, fetches current guidance, helps select a reviewed job, and asks before creating an exact-origin client key.

See Agent Setup for Codex, Cursor, Claude Code, and VS Code connection examples and troubleshooting.

1. Traiter et réviser dans le tableau de bord

  1. Open Dashboard → Processing and upload a video.
  2. Wait for processing, review the caption tracks, and select Terminer la révision.
  3. Open Links and copy the job ID or generated React example.

Completing review publishes the approved WebVTT files and deletes Genie's temporary video copy.

2. Héberger la vidéo correspondante

Upload the original video to your CDN or video platform. Keep the same timeline as the reviewed source so caption cue times remain synchronized.

Allow anonymous cross-origin media requests from your player origin. For public video, your CDN can return Access-Control-Allow-Origin: *; private delivery should return the exact allowed player origin.

const videoSrc = "https://customer-cdn.example/video.mp4";
const jobId = "translation-job-id";

3. Installer le SDK React

npm install @genie-player/react

4. Créer une clé client React

Open Dashboard → API keys, choose the project containing the reviewed job, create a React client key, and add every exact origin where the player will run. Include the protocol and development port, such as http://localhost:5173. Wildcards are not accepted.

# Safe to expose in a Vite browser bundle
VITE_GENIE_PLAYER_CLIENT_KEY=gpk_your_publishable_key
No backend endpoint required

The client key is publishable. The SDK exchanges it with the reviewed jobId for a ten-minute token limited to that job, media:read, and the requesting origin. It cannot list, upload, edit, or delete.

5. Configurer GenieProvider

import { GenieProvider } from "@genie-player/react";
import "@genie-player/react/styles.css";

<GenieProvider clientKey={import.meta.env.VITE_GENIE_PLAYER_CLIENT_KEY}>
  <YourVideoExperience />
</GenieProvider>

6. Afficher le lecteur

import { GeniePlayer } from "@genie-player/react";

export function YourVideoExperience() {
  return (
    <GeniePlayer
      jobId="translation-job-id"
      src="https://customer-cdn.example/video.mp4"
      defaultLanguage="es"
      controls
    />
  );
}

GeniePlayer retrieves the job, caches and refreshes its job-scoped token, authorizes the hosted WebVTT URLs, and attaches each language to native caption tracks.

CORS est configuré par défaut

The SDK sets crossOrigin="anonymous" on the native video element so Genie-hosted captions can load from a separate origin. Your video host must allow that anonymous cross-origin media request.

For private or per-user video products, use the advanced getClientToken backend flow instead of clientKey. See Authentification.