Initialize Live Stream - JavaScript

To configure livestreaming with VideoSDK you require two things, first the token which will be used for Authentication purpose and a streamId which will be used to specify where the hosts and audience will join.

Generating Token

You can generate a token in two ways:

1. Temporary Token : You can visit Dashboard's API Key section and generate a temporary token from there.

2. Server : You can setup JWT in backend and make an API call to get the token from your server.

To learn more about Authentication and token in detail you can follow this guide.

// With Temporary Token
const getToken = async () => {
  // Update the token here from the VideoSDK dashboard
  let token = "YOUR_TOKEN";
};

// Server
const getToken = async () => {
  const response = await fetch(`http://localhost:3000/get-token`, {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  });
  const { token } = await response.json();
  return token;
};

Generating Stream Id

With the token ready, you can now get the streamId from the VideoSDK's rooms API.

const getStreamId = async (token) => {
  try {
    //Use VideoSDK rooms API endpoint to create a streamId
    const VIDEOSDK_API_ENDPOINT = `https://api.videosdk.live/v2/rooms`;
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        // Pass the token in the headers
        Authorization: token,
      },
    };
    const streamId = await fetch(VIDEOSDK_API_ENDPOINT, options)
      .then(async (result) => {
        const { roomId } = await result.json();
        return roomId;
      })
      .catch((error) => console.log("error", error));

    //Return the streamId received from the response of the api
    return streamId;
  } catch (e) {
    console.log(e);
  }
};

Initialization of Live Stream

You can initialize the live stream using the initMeeting method of the VideoSDK class. The initMeeting is responsible for initializing the live stream with the provided configuration, which includes the token, meetingId, participantId and many more.

VideoSDK.config(token);
const liveStream = VideoSDK.initMeeting({
  meetingId: "<streamId>",
  mode: "SEND_AND_RECV", // "SEND_AND_RECV" for hosts/co-hosts, "RECV_ONLY" for audience
  name: "<Participant Name>",
  micEnabled: true, // Ignored for audience
  webcamEnabled: true, // Ignored for audience
  participantId: "<Unique Participant ID>", // Optional
  multistream: true, // Ignored for audience
});

• meetingId :

  • This is a unique identifier that allows participants to join a specific live stream.
  • It will be in the format of xxx-yyy-zzz and will be generated using the VideoSDK's Room API.

• mode :

  • This paramter defines the mode the participant will enter the live stream with.
  • SEND_AND_RECV: For hosts/co-hosts who can send and receive media.
  • RECV_ONLY: For audience members who can only receive media.​

• name:

  • This represents the name of the participant in the live streams.
  • It will accept String type value.

• micEnabled:

  • This is a boolean flag, indicating whether a participant's microphone will be automatically enabled when they join the live stream. This property will be completely ignored for Audience participants, as they are not allowed to publish their audio.

• webcamEnabled:

  • This is a boolean flag, indicating whether a participant's webcam will be automatically enabled when they join the live stream. This property will be completely ignored for Audience participants, as they are not allowed to publish their video.

• metaData:

  • If you want to provide additional details about the participants joining the live stream, such as their profile image, you can pass that information in this parameter.
  • It has to be of Object type.
  • This is an OPTIONAL parameter.

• participantId:

  • This is a unique identifier for the participant's inside the live stream.

    • It can be used to specify the unique identifier which can be linked with your own database service.
    • It has to be of String type.
    • This is an OPTIONAL parameter. By default VideoSDK will generate unique id for each participant.

• multistream:

  • This is a boolean flag, indicating whether the host's media stream should send multiple resolution layers or a single resolution layer.

caution

You must ensure that the participantId is not repeated in the same livestream. This will enable VideoSDK to eliminate any participant associated with that participantId.

To know more about other properties, you can follow our API Reference.

// imports
import { VideoSDK } from "@videosdk.live/js-sdk";

const getToken = async () => {
  ...
};
const getStreamId = async () => {
  ...
};

async function startLiveStream() {
  const token = await getToken();
  const streamId = await getStreamId();

  // Configure authentication token
  VideoSDK.config(token);

  // Initialise meeting
  liveStream = VideoSDK.initMeeting({
    meetingId: meetingId,
    name: "YOUR_NAME",
    micEnabled: true,
    webcamEnabled: true,
  });
}

API Reference

The API references for all the methods utilized in this guide are provided below.

• Meeting Class