Live Captioning for Livestreams - JavaScript

Live captioning enhances your livestreams by converting hosts' speech into text in real-time, boosting accessibility and engagement. Using the startTranscription() and stopTranscription() functions you can enable or disable captions on the fly, and display captions dynamically in your UI for all viewers.

Video SDK offers flexible configuration and event-driven updates to help you integrate captions seamlessly into your broadcast layout.

startTranscription()

The startTranscription() method, is used to initiate live captions in a live stream. This method accepts the following two parameters:

• 1. webhookUrl (optional): This is the webhook URL where you can listen to events related to the recording, such as the start and stop of recording. It triggers when the recording is completed and stored on the server. You can learn more about webhooks here

• 2. summary (optional):

  • enabled: Indicates whether realtime transcription summary generation is enabled. Summary will be available after realtime transcription stopped. Default: false.
  • prompt: provides guidelines or instructions for generating a custom summary based on the realtime transcription content.

stopTranscription()

The stopTranscription() method, is used to stop the live captions in a live stream.

Example

// LiveStream object
let liveStream;

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

// Get start button element
const startRealtimeTranscriptionBtn = document.getElementById(
  "startRealtimeTranscriptionBtn"
);

// Get stop button element
const stopRealtimeTranscriptionBtn = document.getElementById(
  "stopRealtimeTranscriptionBtn"
);

// Listen for click event
startRealtimeTranscriptionBtn.addEventListener("click", () => {
  // Configuration for realtime transcription
  let config = {
    webhookUrl: "https://example.com",
  };

  // Start realtime transcription
  liveStream?.startTranscription(config);
});

// Listen for click event
stopRealtimeTranscriptionBtn.addEventListener("click", () => {
  // Stop  realtime transcription
  liveStream?.stopTranscription();
});

Events associated with live captioning

• All participants-including all the hosts and audience members will receive a callback on the transcription-state-changed event with the current state of the captioning.
• All participants-including all the hosts and audience members will receive a callback on the transcription-text event with the latest captions whenever a host speaks.

// LiveStream object
let liveStream;

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

// Listen for transcription state changed event
liveStream?.on("transcription-state-changed", (data) => {
  const { status, id } = data;

  // Check for starting event
  if (status === Constants.transcriptionEvents.TRANSCRIPTION_STARTING) {
    console.log("Realtime Transcription is starting", id);
  }
  // Check for started event
  else if (status === Constants.transcriptionEvents.TRANSCRIPTION_STARTED) {
    console.log("Realtime Transcription is started", id);
  }
  // Check for stopping event
  else if (status === Constants.transcriptionEvents.TRANSCRIPTION_STOPPING) {
    console.log("Realtime Transcription is stopping", id);
  }
  // Check for stopped event
  else if (status === Constants.transcriptionEvents.TRANSCRIPTION_STOPPED) {
    console.log("Realtime Transcription is stopped", id);
  }
});

// Listen for transcription text event
liveStream?.on("transcription-text", (data) => {
  // Destructuring data
  let { participantId, participantName, text, timestamp, type } = data;
  console.log(`${participantName}: ${text} ${timestamp}`);
});

API Reference

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

• startTranscription()
• stopTranscription()
• transcription-state-changed
• transcription-text