RTMP Livestream - Javascript

RTMP is a widely used protocol for live streaming video content from VideoSDK to platforms like YouTube, Twitch, Facebook, and others.

To initiate live streaming from VideoSDK to platforms supporting RTMP ingestion, you simply need to provide the platform-specific stream key and stream URL. This enables VideoSDK to connect to the platform's RTMP server and transmit the live video stream.

Furthermore, VideoSDK offers flexibility in configuring livestream layouts. You can achieve this by either selecting different prebuilt layouts in the configuration or by providing your custom template for livestreaming, catering to your specific layout preferences.

This guide will provide an overview of how to implement starting and stopping RTMP livestreaming with VideoSDK.

startLivestream()

The startLivestream() method, is used to initiate the RTMP livestream. This method accepts the following two parameters:

• 1. outputs: This parameter takes an array of objects containing the RTMP url and streamKey specific to the platform where you want to initiate the livestream.

• 2. config (optional): This parameter defines the layout configuration for the livestream.

• 3. transcription (optional): This parameter lets you start post transcription for the livestream.

important

Transcription requires recording to be enabled.

const config = {
  // Layout Configuration
  layout: {
    type: "GRID", // "SPOTLIGHT" | "SIDEBAR",  Default : "GRID"
    priority: "SPEAKER", // "PIN", Default : "SPEAKER"
    gridSize: 4, // MAX : 4
  },

  // Theme of livestream layout
  theme: "DARK", //  "LIGHT" | "DEFAULT"

  // Recording Configuration
  recording = {
    enabled: true, // Enables recording of the livestream.
  };
};

const outputs = [
  {
    url: "<RTMP_URL>",
    streamKey: "<RTMP_STREAM_KEY>",
  },
];

// Post Transcription Configuration (Transcription requires recording to be enabled.)
const transcription = {
  enabled: true, // Enables post transcription
  summary: {
    enabled: true, // Enables summary generation
    // Guides summary generation
    prompt:
      "Write summary in sections like Title, Agenda, Speakers, Action Items, Outlines, Notes and Summary",
  },
};

startLivestream(outputs, config, transcription);

stopLivestream()

The stopLivestream() method, is used to stop the RTMP livestream.

Example

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

const startLivestreamBtn = document.getElementById("startLivestreamBtn");
startLivestreamBtn.addEventListener("click", () => {
  // Start Livestream
  liveStream?.startLivestream(
    [
      {
        url: "rtmp://live-upload.instagram.com:80/rtmp/",
        streamKey: "key",
      },
    ],
    {
      layout: {
        type: "GRID",
        priority: "SPEAKER",
        gridSize: 4,
      },
      theme: "DARK",
    },
    {
      enabled: true,
      summary: {
        enabled: true,
        prompt:
          "Write summary in sections like Title, Agenda, Speakers, Action Items, Outlines, Notes and Summary",
      },
    }
  );
});

const stopLivestreamBtn = document.getElementById("stopLivestreamBtn");
stopLivestreamBtn.addEventListener("click", () => {
  // Stop Livestream
  liveStream?.stopLivestream();
});

Event associated with Livestream

• livestream-state-changed - Whenever RTMP livestream state changes, then livestream-state-changed event will trigger.

let liveStream;

// Initialize liveStream
liveStream = VideoSDK.initMeeting({
  // ...
});

const Constants = VideoSDK.Constants;

liveStream.on("livestream-state-changed", (data) => {
  const { status } = data;

  if (status === Constants.livestreamEvents.LIVESTREAM_STARTING) {
    console.log("RTMP livestream is starting");
  } else if (status === Constants.livestreamEvents.LIVESTREAM_STARTED) {
    console.log("RTMP livestream is started");
  } else if (status === Constants.livestreamEvents.LIVESTREAM_STOPPING) {
    console.log("RTMP livestream is stopping");
  } else if (status === Constants.livestreamEvents.LIVESTREAM_STOPPED) {
    console.log("RTMP livestream is stopped");
  } else {
    //
  }
});

API Reference

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

• startLivestream()
• stopLivestream()
• livestream-state-changed