Transcriptions

Enabling your application to provide a transcript for a call can be beneficial for your users. We understand, though, that this can be a challenging feature to implement/support.

This is why, the Stream React Video SDK comes with out of the box Transcription support that you can easily manage.

The Call object provides a few levels of control. The first one is in the call.state.settings.transcription where you can find settings related to transcription, as they have been configured from the dashboard. The mode property defines the feature’s availability with:

• available: the feature is available for your call and can be enabled.
• disabled: the feature is not available for your call. In this case, it’s a good idea to “hide” any UI element you have related to transcription.
• auto-on: the feature is available, and it will be enabled automatically, once the user is connected on the call.

The second level of control is the call.state.transcribing which allows you to check if the transcription is enabled at any given time.

For both of these, we expose a utility hooks that we recommend you to use:

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>
  );
};