Live Transcription for Conferencing (Closed Captions)

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?

Each transcript entry has the following structure:


interface HMSTranscript {
    start: number;       // start time in seconds
    end: number;         // end time in seconds
    peer_id: string;     // peer_id of the speaker
    final: boolean;      // true when the transcript segment is finalized
    transcript: string;  // the caption text
}

The transcription engine sends interim results as the speaker talks, then a final result once the segment is complete. Interim results update the same segment in place, while final results indicate that a new segment will follow.

In plain JavaScript, transcript data arrives as NEW_MESSAGE notifications of type hms_transcript. Subscribe via hmsNotifications.onNotification:


import { HMSNotificationTypes } from '@100mslive/hms-video-store';

const unsubscribe = hmsNotifications.onNotification((notification) => {
    const msg = notification.data;
    if (msg && msg.type === 'hms_transcript') {
        const parsed = JSON.parse(msg.message);
        const transcripts = parsed.results; // HMSTranscript[]

        transcripts.forEach((entry) => {
            console.log(
                `${entry.peer_id}: ${entry.transcript} (final: ${entry.final})`
            );
        });
    }
}, HMSNotificationTypes.NEW_MESSAGE);

// call unsubscribe() when you no longer need transcript updates

To resolve the peer_id to a display name, use the store:


import { selectPeerNameByID } from '@100mslive/hms-video-store';

const peerName = hmsStore.getState(selectPeerNameByID(entry.peer_id));

Use the useTranscript hook with the onTranscript callback:


import { useTranscript } from '@100mslive/react-sdk';

function CaptionsViewer() {
    useTranscript({
        onTranscript: (transcripts) => {
            // transcripts is HMSTranscript[]
            transcripts.forEach((entry) => {
                console.log(
                    `${entry.peer_id}: ${entry.transcript} (final: ${entry.final})`
                );
            });
        },
    });

    return null;
}

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


import { selectIsTranscriptionEnabled } from '@100mslive/hms-video-store';

// read once
const isCaptionEnabled = hmsStore.getState(selectIsTranscriptionEnabled);

// or subscribe to changes
hmsStore.subscribe((enabled) => {
    console.log('Captions enabled:', enabled);
}, selectIsTranscriptionEnabled);


import { selectIsTranscriptionEnabled, useHMSStore } from '@100mslive/react-sdk';

function CaptionStatus() {
    const isCaptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
    return <span>{isCaptionEnabled ? 'Captions ON' : 'Captions OFF'}</span>;
}

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

Check permission

Before starting or stopping transcription, verify that the local peer has the required permission:


import {
    HMSTranscriptionMode,
    selectIsTranscriptionAllowedByMode
} from '@100mslive/hms-video-store';

const isTranscriptionAllowed = hmsStore.getState(
    selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION)
);


import {
    HMSTranscriptionMode,
    selectIsTranscriptionAllowedByMode,
    useHMSStore
} from '@100mslive/react-sdk';

const isTranscriptionAllowed = useHMSStore(
    selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION)
);

Start captions

Use hmsActions.startTranscription() to enable closed captions for the room:


try {
    await hmsActions.startTranscription({
        mode: HMSTranscriptionMode.CAPTION,
    });
} catch (err) {
    console.error('Failed to start captions:', err);
}

Stop captions

Use hmsActions.stopTranscription() to disable closed captions:


try {
    await hmsActions.stopTranscription({
        mode: HMSTranscriptionMode.CAPTION,
    });
} catch (err) {
    console.error('Failed to stop captions:', err);
}

Remote Mute/Unmute Remove Peer

Have a suggestion? Recommend changes ->