Live Transcription for Conferencing (Closed Captions - Beta)

100ms real-time transcription engine delivers live transcriptions (closed captions) during conferencing sessions. The SDK includes a callback function that provides a transcript for each participant when they speak. The generated captions are speaker-labelled.

Minimum Requirements

• Minimum 100ms SDK version required is 0.10.12

How to implement closed captioning?

The useTranscript hook is implemented with the onTranscript callback as shown below:

    export interface HMSTranscript {
        // start time in second
        start: number;
        // end time in seconds
        end: number;
        // peer_id of the speaker
        peer_id: string;
        // transcription will continue to update the transcript until you receive final keyword
        final: boolean;
        // closed caption
        transcript: string;
    }

    export interface useHMSTranscriptInput {
        onTranscript?: (data: HMSTranscript[]) => void;
        handleError?: hooksErrHandler;
    }

    export const useTranscript = ({ onTranscript, handleError = logErrorHandler }: useHMSTranscriptInput);

How can you check if closed captions are enabled in a room?

    import { selectIsTranscriptionEnabled, useHMSStore } from '@100mslive/react-sdk';
    // use this to check if caption is enabled for your room.
    const isCaptionPresent: boolean = useHMSStore(selectIsTranscriptionEnabled);

How to toggle closed captions on or off?

Closed captions can be dynamically enabled or disabled at runtime within a given room, depending on user requirements. This capability helps minimize unnecessary usage costs by ensuring that captions are enabled only when explicitly needed by the user(s).

    // Currently 100ms supports closed captions type mode
    export declare enum HMSTranscriptionMode {
        CAPTION = "caption"
    }

    export interface TranscriptionConfig {
        mode: HMSTranscriptionMode;
    }

    // admin/host role need to startTranscription if he had the access, here is how you will check if you had access to start transcription
    const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));

Use hmsActions.startTranscription() method to start the closed captions.

    async startCaption() {
        try {
            await hmsActions.startTranscription({
                mode: HMSTranscriptionMode.CAPTION,
            });
        } catch(err) {
            console.log(err);
        }
    }

Use hmsActions.stopTranscription() method to stop closed captions.

    async stopCaption() {
        try {
            await hmsActions.stopTranscription({
                mode: HMSTranscriptionMode.CAPTION,
            });
        } catch(err) {
            console.log(err);
        }
    }