Theta Video API DRM Player

React component for Theta Video API w/ DRM.


npm install --save theta-video-api-drm-player


import React, { Component } from 'react'

import { StudioPlayer } from 'theta-video-api-drm-player'
import 'theta-video-api-drm-player/dist/index.css'

const Example = () => {
  const walletConnectParams = {
    appName: "Your App Name",
    projectId: "Your Project ID"

  const params = {
    signin: signin,
    jwt: jwt,
    autoconnect: true|false,
    useBeta: false|true

  return (
      videoId={"Video ID"}


  • jwt : pass a JWT to automatically allow a user (this is useful for apps that already authenticated the user on their backend. See below on how to generate the JWT)
  • signin : pass a signin JSON to automatically allow a user using sign typed data v4 (disabled if you're already sending a JWT)
  • autoconnect : will automatically try to connect to your wallet

Wallet Connect Parameters

The walletConnectParams object should contain the following properties:

    "projectId": "your_project_id",
    "appName": "your_app_name"

See Wallet Connect documentation for more details

Server-side JWT creation

Get your service account secret from your Theta Video API dashboard.

const jwt = require('jsonwebtoken');

const algorithm = { algorithm: "HS256" };
function createTvaJwt(serviceAccount) {
    let expiration = new Date().getTime() / 1000;
    expiration += 120; // partners can choose how long the JWT can last

    let payload = {
        iss: "auth0",
        exp: expiration,
    return jwt.sign(payload, serviceAccount.secret, algorithm);