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 fo 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.

struct TranscriptionButtonView: View {

    @ObservedObject var viewModel: CallViewModel
    @State private var isTranscriptionAvailable = false
    @State private var isTranscribing = false

    init(viewModel: CallViewModel) {
        self.viewModel = viewModel
        if let mode = viewModel.call?.state.settings?.transcription.mode {
            self.isTranscriptionAvailable = mode != .disabled
        } else {
            self.isTranscriptionAvailable = false    
        }
        self.isTranscribing = viewModel.call?.state.transcribing == true
    }

    var body: some View {
        if let call = viewModel.call {
            Group {
                if isTranscriptionAvailable {
                    Button {
                        Task {
                            do {
                                if isTranscribing {
                                    try await call.stopTranscription()
                                } else {
                                    try await call.startTranscription()
                                }
                            } catch {
                                log.error(error)
                            }
                        }
                    } label: {
                        Label {
                            Text(isTranscribing ? "Disable Transcription" : "Transcription")
                        } icon: {
                            Image(
                                systemName: isTranscribing
                                ? "captions.bubble.fill"
                                : "captions.bubble"
                            )
                        }
                    }
                    .onReceive(call.state.$transcribing) { isTranscribing = $0 }
                }
            }
            .onReceive(call.state.$settings) {
                guard let mode = $0?.transcription.mode else {
                    isTranscriptionAvailable = false
                    return
                }
                isTranscriptionAvailable = mode != .disabled
            }
        }
    }
}