SDKs

JavaScript Player SDK

Drop-in web integration. Lists streams and joins users into a HotMic-hosted player via JWT — no HLS plumbing required. Want raw API access without HotMic UI? Use the JavaScript Headless SDK instead.

The HotMic Javascript SDK allows you to integrate live streams and video-on-demand content into your web application.

Key Capabilities

  1. Get a list of streams (live, scheduled, and VOD).
  2. Get details about a specific stream.
  3. Direct a user to join a stream using your own authentication, without requiring a separate HotMic login.

Requirements

  • API Key and JWT Secret — Provided by HotMic.
  • Browser — Chromium-based browsers recommended (Chrome or Edge).

Authentication with JWT Token

Your application controls authentication by creating a JWT token and passing it to HotMic. HotMic will provide you with an API Secret to sign the token.

Token Format

javascript
// Node.js example
const jwt = require('jsonwebtoken');

const accessToken = jwt.sign({
  identity: {
    user_id: user.id,             // Consistent UUID for the user
    display_name: user.display_name, // Name displayed in chat/profiles
    profile_pic: user.profile_pic,   // Image URL for avatar
  }
}, API_SECRET, { expiresIn: '7d' });

The user_id field must be consistent across sessions for the same user.

Quick Steps to Generate a JWT Token Online

For testing, you can generate tokens at jwt.io:

  1. Add a payload in the "Payload" section with your identity fields.
  2. Paste your API Secret in the "Verify Signature" section.
  3. Copy the encoded token from the "Encoded" section.

Sample payload:

json
{
  "identity": {
    "user_id": "3d5567c2-603c-4b08-b917-7e9f05c8ebb5",
    "display_name": "tester1",
    "profile_pic": "https://ui-avatars.com/api/?name=test&background=0DCAD6&color=fff"
  },
  "iat": 1657658555,
  "exp": 1821724014
}

Initialization

Initialize the SDK with your API key and access token before calling any other functions:

javascript
HMMediaPlayer.initialize(apiKey: "YOUR_KEY", accessToken: token);

Available Functions

Get Streams

Retrieve one or more streams in reverse chronological order with optional filters:

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | live | Boolean | true | Include live streams | | scheduled | Boolean | true | Include scheduled streams | | vod | Boolean | true | Include video-on-demand replays | | userID | String | null | Filter by creator user ID | | limit | Integer | 30 | Max number of streams to return | | skip | Integer | 0 | Number of results to skip (pagination) |

javascript
HMMediaPlayer.getStreams({
  live: true,
  scheduled: true,
  vod: true,
  userID: null,
  limit: 30,
  skip: 0
}, function(result) {
  // Handle the list of streams
});

Join Stream

Each stream has a URL hosted by HotMic. The typical flow is:

  1. Display one or more streams to the user.
  2. When the user selects a stream, authenticate and create a JWT token.
  3. Redirect the user to the stream URL.

Stream URLs can be themed and branded to match your application. Contact HotMic for branding options.

Linking Followers/Following

To support following and unfollowing users from within the HotMic experience, contact HotMic.

Linking In-App Purchases

To support tipping hosts and purchasing access to join streams, you can integrate with your payment provider. Contact HotMic for integration details.

PreviousJavaScriptNextHeadless SDK