# 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:

```ts
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.

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

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

  const { transcription } = useCallSettings() || {};
  if (transcription?.mode === TranscriptionSettingsResponseModeEnum.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>
  );
};
```

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-cookbook/transcriptions/](https://getstream.io/video/docs/react/v2/ui-cookbook/transcriptions/).