Real-time react package

examples/nextjs/.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "npm run dev",
+      "name": "Run npm run dev",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}"
+    },
+    {
+      "command": "npm run test",
+      "name": "Run npm run test",
+      "request": "launch",
+      "type": "node-terminal",
+      "cwd": "${workspaceFolder}"
+    },
+    {
+      "name": "Attach by Process ID",
+      "processId": "${command:PickProcess}",
+      "request": "attach",
+      "skipFiles": ["<node_internals>/**"],
+      "type": "node"
+    }
+  ]
+}

examples/nextjs/package.json

@@ -15,6 +15,7 @@
     "@speechmatics/browser-audio-input": "workspace:*",
     "@speechmatics/browser-audio-input-react": "workspace:*",
     "@speechmatics/flow-client-react": "workspace:*",
+    "@speechmatics/real-time-client-react": "workspace:*",
     "next": "15.0.1",
     "react": "19.0.0-rc-69d4b800-20241021",
     "react-dom": "19.0.0-rc-69d4b800-20241021",

examples/nextjs/src/app/layout.tsx

@@ -2,11 +2,6 @@ import type { Metadata } from 'next';
 import './globals.css';
 import '@picocss/pico';
 
-export const metadata: Metadata = {
-  title: 'Speechmatics Flow example',
-  description: 'Generated by create next app',
-};
-
 export default function RootLayout({
   children,
 }: Readonly<{

examples/nextjs/src/app/real-time/Controls.tsx

@@ -0,0 +1,98 @@
+'use client';
+import { type FormEvent, useCallback, useEffect } from 'react';
+import {
+  usePcmAudioListener,
+  usePcmAudioRecorder,
+} from '@speechmatics/browser-audio-input-react';
+import {
+  type RealtimeTranscriptionConfig,
+  useRealtimeTranscription,
+} from '@speechmatics/real-time-client-react';
+import { getJWT } from '../actions';
+import { configFromFormData } from '@/lib/real-time/config-from-form-data';
+import { RECORDING_SAMPLE_RATE } from '@/lib/constants';
+import { MicrophoneSelect } from '@/lib/components/MicrophoneSelect';
+import { LanguageSelect } from './LanguageSelect';
+
+export function Controls({
+  languages,
+}: { languages: (readonly [code: string, displayName: string])[] }) {
+  const { startTranscription, stopTranscription, sendAudio } =
+    useRealtimeTranscription();
+
+  const { isRecording, startRecording, stopRecording } = usePcmAudioRecorder();
+
+  usePcmAudioListener(sendAudio);
+
+  const startSession = useCallback(
+    async ({
+      deviceId,
+      ...config
+    }: RealtimeTranscriptionConfig & { deviceId?: string }) => {
+      const jwt = await getJWT('rt');
+      await startTranscription(jwt, config);
+      await startRecording({ deviceId, sampleRate: RECORDING_SAMPLE_RATE });
+    },
+    [startTranscription, startRecording],
+  );
+
+  const handleSubmit = useCallback(
+    (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      const config = configFromFormData(formData);
+      const deviceId = formData.get('deviceId')?.toString();
+      config.audio_format = {
+        type: 'raw',
+        encoding: 'pcm_f32le',
+        sample_rate: RECORDING_SAMPLE_RATE,
+      };
+      startSession({ deviceId, ...config });
+    },
+    [startSession],
+  );
+
+  // Cleanup
+  useEffect(() => {
+    return () => {
+      stopTranscription();
+      stopRecording();
+    };
+  }, [stopTranscription, stopRecording]);
+
+  return (
+    <article>
+      <form onSubmit={handleSubmit}>
+        <div className="grid">
+          <MicrophoneSelect disabled={isRecording} />
+          <LanguageSelect languages={languages} disabled={isRecording} />
+        </div>
+        <div className="grid">
+          <StartStopButton />
+        </div>
+      </form>
+    </article>
+  );
+}
+
+function StartStopButton() {
+  const { stopRecording } = usePcmAudioRecorder();
+  const { stopTranscription } = useRealtimeTranscription();
+
+  const stopSession = useCallback(() => {
+    stopTranscription();
+    stopRecording();
+  }, [stopRecording, stopTranscription]);
+
+  const connected = useRealtimeTranscription().socketState === 'open';
+
+  if (connected) {
+    return (
+      <button type="button" onClick={stopSession}>
+        Stop transcription
+      </button>
+    );
+  }
+
+  return <button type="submit">Transcribe audio</button>;
+}

examples/nextjs/src/app/real-time/LanguageSelect.tsx

@@ -0,0 +1,18 @@
+export function LanguageSelect({
+  languages,
+  disabled,
+}: {
+  languages: (readonly [code: string, displayName: string])[];
+  disabled?: boolean;
+}) {
+  return (
+    <label>
+      Select language
+      <select defaultValue="en" name="language" disabled={disabled}>
+        {languages.map(([code, displayName]) => (
+          <option key={code} value={code} label={displayName} />
+        ))}
+      </select>
+    </label>
+  );
+}

examples/nextjs/src/app/real-time/Output.tsx

@@ -0,0 +1,76 @@
+'use client';
+import { useReducer } from 'react';
+import {
+  type RealtimeServerMessage,
+  useRealtimeEventListener,
+} from '@speechmatics/real-time-client-react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '@/lib/components/ErrorFallback';
+
+export function Output() {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <Component />
+    </ErrorBoundary>
+  );
+}
+
+export function Component() {
+  const [transcription, dispatch] = useReducer(transcriptReducer, []);
+
+  useRealtimeEventListener('receiveMessage', (e) => dispatch(e.data));
+
+  return (
+    <article>
+      <header>Output</header>
+      <p>
+        {transcription.map(({ text, startTime, endTime, punctuation }) => (
+          <span key={`${text}-${startTime}-${endTime}`}>
+            {!punctuation && ' '}
+            {text}
+          </span>
+        ))}
+      </p>
+    </article>
+  );
+}
+
+interface Word {
+  text: string;
+  startTime: number;
+  endTime: number;
+  punctuation: boolean;
+  partial?: boolean;
+}
+
+function transcriptReducer(
+  words: readonly Word[],
+  event: RealtimeServerMessage,
+): readonly Word[] {
+  if (event.message === 'AddTranscript') {
+    return [
+      ...words.filter((w) => !w.partial),
+      ...event.results.map((result) => ({
+        text: result.alternatives?.[0].content ?? '',
+        startTime: result.start_time ?? 0,
+        endTime: result.end_time ?? 0,
+        punctuation: result.type === 'punctuation',
+      })),
+    ];
+  }
+
+  if (event.message === 'AddPartialTranscript') {
+    return [
+      ...words.filter((w) => !w.partial),
+      ...event.results.map((result) => ({
+        text: result.alternatives?.[0].content ?? '',
+        startTime: result.start_time ?? 0,
+        endTime: result.end_time ?? 0,
+        punctuation: result.type === 'punctuation',
+        partial: true,
+      })),
+    ];
+  }
+
+  return words;
+}

examples/nextjs/src/app/real-time/Status.tsx

@@ -0,0 +1,22 @@
+'use client';
+import { usePcmAudioRecorder } from '@speechmatics/browser-audio-input-react';
+import { useRealtimeTranscription } from '@speechmatics/real-time-client-react';
+
+export function Status() {
+  const { socketState, sessionId } = useRealtimeTranscription();
+  const { isRecording } = usePcmAudioRecorder();
+
+  return (
+    <article>
+      <header>Status</header>
+      <dl>
+        <dt>🔌 Socket is</dt>
+        <dd>{socketState ?? '(uninitialized)'}</dd>
+        <dt>💬 Session ID</dt>
+        <dd>{sessionId ?? '(none)'}</dd>
+        <dt>🎤 Microphone is</dt>
+        <dd>{isRecording ? 'recording' : 'not recording'}</dd>
+      </dl>
+    </article>
+  );
+}

examples/nextjs/src/app/real-time/page.tsx

@@ -1,3 +1,39 @@
-export default function Page() {
-  return <h1>Coming soon!</h1>;
+import {
+  getFeatures,
+  RealtimeTranscriptionProvider,
+} from '@speechmatics/real-time-client-react';
+import { PcmAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
+import { Controls } from './Controls';
+import { Status } from './Status';
+import { Output } from './Output';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Speechmatics Real-time example',
+  description: 'Generated by create next app',
+};
+
+export default async function Page() {
+  const features = await getFeatures();
+  const displayNames = new Intl.DisplayNames(['en'], { type: 'language' });
+  const languages = features.realtime.transcription[0].languages.map(
+    (code) => [code, displayNames.of(code) ?? code] as const,
+  );
+
+  return (
+    <PcmAudioRecorderProvider workletScriptURL="/js/pcm-audio-worklet.min.js">
+      <RealtimeTranscriptionProvider appId="nextjs-rt-example">
+        <section>
+          <h3>Real-time Example</h3>
+          <section className="grid">
+            <Controls languages={languages} />
+            <Status />
+          </section>
+          <section>
+            <Output />
+          </section>
+        </section>
+      </RealtimeTranscriptionProvider>
+    </PcmAudioRecorderProvider>
+  );
 }

examples/nextjs/src/lib/real-time/config-from-form-data.ts

@@ -0,0 +1,20 @@
+import type { RealtimeTranscriptionConfig } from '@speechmatics/real-time-client-react';
+
+// TODO could have zod schemas here
+export function configFromFormData(
+  formData: FormData,
+): RealtimeTranscriptionConfig {
+  const language = formData.get('language')?.toString();
+
+  if (!language) {
+    throw new Error('Language is required');
+  }
+
+  return {
+    transcription_config: {
+      language,
+      max_delay: 1,
+      enable_partials: true,
+    },
+  };
+}