feat: Add an option to render speaker ID for transcriptions. (#17390)

* feat: Add an option to render speaker ID for transcriptions.

* feat(subtitles): add renderTranscriptDetails config option

When transcription.renderTranscriptDetails is enabled, prepend
[Speaker N, lang] to rendered subtitles when the backend provides
diarization speaker and/or language fields.

Author: bgrozev

config.js

@@ -531,6 +531,10 @@ var config = {
     //     // subtitles on stage and the "Show subtitles on stage" checkbox in the settings.
     //     // Note: Starting transcriptions from the recording dialog will still work.
     //     disableClosedCaptions: false,
+    //
+    //     // When the backend provides diarization by setting a "speaker" field, append [Speaker N] for transcription
+    //     // events from non-0 speakers.
+    //     renderTranscriptDetails: false
 
     // },
 

react/features/base/config/configType.ts

@@ -700,6 +700,7 @@ export interface IConfig {
         disableClosedCaptions?: boolean;
         enabled?: boolean;
         preferredLanguage?: string;
+        renderTranscriptDetails?: boolean;
         translationLanguages?: Array<string>;
         translationLanguagesHead?: Array<string>;
         useAppLanguage?: boolean;

react/features/subtitles/middleware.ts

@@ -156,6 +156,23 @@ function _endpointMessageReceived(store: IStore, next: Function, action: AnyActi
     };
     const { timestamp } = json;
     const participantId = participant.id;
+    const speaker = json.speaker;
+    const renderTranscriptDetails = state['features/base/config'].transcription?.renderTranscriptDetails;
+    let detailsPrefix = '';
+
+    if (renderTranscriptDetails) {
+        const parts = [];
+
+        if (speaker != null) {
+            parts.push(`Speaker ${speaker}`);
+        }
+        if (json.language) {
+            parts.push(json.language);
+        }
+        if (parts.length > 0) {
+            detailsPrefix = `[${parts.join(', ')}] `;
+        }
+    }
 
     // Handle transcript messages
     const language = state['features/base/conference'].conference
@@ -170,7 +187,8 @@ function _endpointMessageReceived(store: IStore, next: Function, action: AnyActi
             return next(action);
         }
 
-        const translation = json.text?.trim();
+        const translationText = json.text?.trim();
+        const translation = translationText ? `${detailsPrefix}${translationText}` : translationText;
 
         if (isCCTabEnabled(state)) {
             dispatch(storeSubtitle({
@@ -191,7 +209,7 @@ function _endpointMessageReceived(store: IStore, next: Function, action: AnyActi
             // enabled.
             newTranscriptMessage = {
                 clearTimeOut: undefined,
-                final: json.text?.trim(),
+                final: translation,
                 participant
             };
         }
@@ -202,6 +220,7 @@ function _endpointMessageReceived(store: IStore, next: Function, action: AnyActi
         // translations are disabled.
 
         const { text } = json.transcript[0];
+        const displayText = `${detailsPrefix}${text}`;
 
         // First, notify the external API.
         if (!(isInterim && skipInterimTranscriptions)) {
@@ -253,7 +272,7 @@ function _endpointMessageReceived(store: IStore, next: Function, action: AnyActi
             id: transcriptMessageID,
             participantId,
             language: json.language,
-            text,
+            text: displayText,
             interim: isInterim,
             timestamp,
             isTranscription: true
@@ -290,17 +309,17 @@ function _endpointMessageReceived(store: IStore, next: Function, action: AnyActi
         // If this is final result, update the state as a final result
         // and start a count down to remove the subtitle from the state
         if (!json.is_interim) {
-            newTranscriptMessage.final = text;
+            newTranscriptMessage.final = displayText;
         } else if (json.stability > STABLE_TRANSCRIPTION_FACTOR) {
             // If the message has a high stability, we can update the
             // stable field of the state and remove the previously
             // unstable results
-            newTranscriptMessage.stable = text;
+            newTranscriptMessage.stable = displayText;
         } else {
             // Otherwise, this result has an unstable result, which we
             // add to the state. The unstable result will be appended
             // after the stable part.
-            newTranscriptMessage.unstable = text;
+            newTranscriptMessage.unstable = displayText;
         }
     }