Transcriptions

Stream Video SDK provides built-in transcription support. Control transcription via dashboard settings and runtime APIs.

Best Practices

Check transcription.mode before showing UI: available, disabled, or auto-on.
Hide transcription controls when mode is disabled.
Use useIsCallTranscribingInProgress to track active transcription state.
Handle errors from startTranscription()/stopTranscription() gracefully.

Transcription settings

The mode property from useCallSettings defines availability:

available: can be enabled manually
disabled: hide transcription UI
auto-on: enabled automatically when user connects

Use these hooks to access transcription state:

import { useCallStateHooks } from "@stream-io/video-react-sdk";

const { useCallSettings, useIsCallTranscribingInProgress } =
  useCallStateHooks();

// access to the transcription settings
const { transcription } = useCallSettings();

// whether transcription is on or off
const isTranscribing = useIsCallTranscribingInProgress();

With that in mind, we can build a simple UI element that will allow the user to toggle on/off the Transcription feature. The element will also take care of showing/hiding depending on the feature's availability.

import {
  useCall,
  useCallStateHooks,
  TranscriptionSettingsModeEnum,
} from "@stream-io/video-react-sdk";

export const MyToggleTranscriptionButton = () => {
  const call = useCall();
  const { useCallSettings, useIsCallTranscribingInProgress } =
    useCallStateHooks();

  const { transcription } = useCallSettings() || {};
  if (transcription?.mode === TranscriptionSettingsModeEnum.DISABLED) {
    // transcriptions are not available, render nothing
    return null;
  }

  const isTranscribing = useIsCallTranscribingInProgress();
  return (
    <button
      onClick={() => {
        if (isTranscribing) {
          call?.stopTranscription().catch((err) => {
            console.log("Failed to stop transcriptions", err);
          });
        } else {
          call?.startTranscription().catch((err) => {
            console.error("Failed to start transcription", err);
          });
        }
      }}
    >
      {isTranscribing ? "Stop transcription" : "Start transcription"}
    </button>
  );
};

Permission Requests

Closed Captions