Transcriptions

Enabling your application to provide a transcript for a call can be very useful for you users. We understand though, that this can be a difficult feature to implement/support.

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

The Call object provides 2 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.
  • autoOn: 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.

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.

/**
 * The TranscriptionUiState sealed class is provided as an example to
 * simplify state handling. This class is NOT part of the StreamVideo SDK and
 * should be implemented in your app as needed.
 **/
sealed class TranscriptionUiState()
data object TranscriptionAvailableState : TranscriptionUiState()
data object TranscriptionRunningState : TranscriptionUiState()
data object TranscriptionUnavailableState : TranscriptionUiState()

fun getUiState(isTranscribing: Boolean, settings: CallSettingsResponse?):
        TranscriptionUiState {
    return if (settings != null) {
        val mode = settings.transcription.mode
        when (mode) {
            TranscriptionSettingsResponse.Mode.Available,
            TranscriptionSettingsResponse.Mode.AutoOn -> {
                if (isTranscribing) {
                    TranscriptionRunningState
                } else {
                    TranscriptionAvailableState
                }
            }
            else -> {
                TranscriptionUnavailableState
            }
        }
    } else {
        TranscriptionUnavailableState
    }
}

@Composable
fun TranscriptionsUi(call: Call) {

    val isCurrentlyTranscribing by call.state.transcribing.collectAsStateWithLifecycle()
    val settings by call.state.settings.collectAsStateWithLifecycle()
    val transcriptionUiState = getUiState(isCurrentlyTranscribing, settings)

    when (transcriptionUiState) {
        is TranscriptionAvailableState -> {
            Button(onClick = { call.startTranscription() }) {
                Text(text = "Start transcriptions")
            }
        }
        is TranscriptionRunningState -> {
            Button(onClick = { call.stopTranscription() }) {
                Text(text = "Stop transcriptions" )
            }
        }
        is TranscriptionUnavailableState -> {}
    }
}
© Getstream.io, Inc. All Rights Reserved.