I want to know how to connect aws transcribe stream with react application. because I want to get Realtime translation. I’m using the microphone-stream library to capture audio from the user’s microphone and the AWS SDK to send this audio to the Transcribe Streaming service. Here i tried with aws-sdk and added WebSocket. but it not getting any output
I have tried following the instructions.
<code>import React, { useState, useRef, useEffect } from 'react';
import { TranscribeStreamingClient, StartStreamTranscriptionCommand } from '@aws-sdk/client-transcribe-streaming';
interface TranscriptResult {
Alternatives: { Items: { Content: string }[] }[];
}
const TranscriptionComponent: React.FC = () => {
const [transcript, setTranscript] = useState<string>('');
const [isRecording, setIsRecording] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const clientRef = useRef<TranscribeStreamingClient | null>(null);
useEffect(() => {
clientRef.current = new TranscribeStreamingClient({
region: AWS region',
credentials: {
accessKeyId: 'IAM access Key',
secretAccessKey: 'IAM secret key',
},
});
return () => {
stopRecording();
};
}, []);
const startRecording = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
mediaRecorderRef.current = mediaRecorder;
const audioChunks: Blob[] = [];
mediaRecorder.ondataavailable = (event) => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = async () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/pcm' });
const arrayBuffer = await audioBlob.arrayBuffer();
const audioChunk = new Uint8Array(arrayBuffer);
// Prepare the audioStream as required by AWS Transcribe
const audioStream = (async function* () {
yield { AudioEvent: { AudioChunk: audioChunk } };
})();
const command = new StartStreamTranscriptionCommand({
LanguageCode: 'en-US',
MediaEncoding: 'pcm',
MediaSampleRateHertz: 44100,
AudioStream: audioStream,
});
const client = clientRef.current;
if (client) {
setIsRecording(true);
setError(null);
try {
const response = await client.send(command);
console.log('Transcription response:', response);
handleResponse(response);
} catch (err) {
console.error('Error sending transcription request:', err);
setError('Error sending transcription request.');
}
}
};
mediaRecorder.start();
setIsRecording(true);
} catch (err) {
console.error('Error accessing microphone:', err);
setError('Failed to access the microphone. Please check your permissions.');
}
};
const handleResponse = async (response: any) => {
console.log("im")
try {
for await (const event of response.TranscriptResultStream) {
if (event.TranscriptEvent) {
const results: TranscriptResult[] = event.TranscriptEvent.Transcript.Results;
results.forEach((result) => {
result.Alternatives.forEach((alternative) => {
const transcript = alternative.Items.map((item) => item.Content).join(' ');
setTranscript((prev) => `${prev} ${transcript}`);
});
});
}
}
} catch (err) {
console.error('Error handling transcription response:', err);
setError('Error processing transcription response.');
} finally {
stopRecording();
}
};
const stopRecording = () => {
if (mediaRecorderRef.current) {
mediaRecorderRef.current.stop();
mediaRecorderRef.current = null;
}
setIsRecording(false);
};
return (
<div className="container">
<h1>AWS Transcribe</h1>
<hr />
{error && <div id="error" className="isa_error">{error}</div>}
<textarea
id="transcript"
placeholder="Press Start and speak into your mic"
rows={5}
readOnly
value={transcript}
></textarea>
<div className="row">
<div className="col">
<button
id="start-button"
className="button-xl"
title="Start Transcription"
onClick={startRecording}
disabled={isRecording}
>
<i className="fa fa-microphone"></i> Start
</button>
<button
id="stop-button"
className="button-xl"
title="Stop Transcription"
onClick={stopRecording}
disabled={!isRecording}
>
<i className="fa fa-stop-circle"></i> Stop
</button>
</div>
</div>
</div>
);
};
export default TranscriptionComponent;
</code>
<code>import React, { useState, useRef, useEffect } from 'react';
import { TranscribeStreamingClient, StartStreamTranscriptionCommand } from '@aws-sdk/client-transcribe-streaming';
interface TranscriptResult {
Alternatives: { Items: { Content: string }[] }[];
}
const TranscriptionComponent: React.FC = () => {
const [transcript, setTranscript] = useState<string>('');
const [isRecording, setIsRecording] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const clientRef = useRef<TranscribeStreamingClient | null>(null);
useEffect(() => {
clientRef.current = new TranscribeStreamingClient({
region: AWS region',
credentials: {
accessKeyId: 'IAM access Key',
secretAccessKey: 'IAM secret key',
},
});
return () => {
stopRecording();
};
}, []);
const startRecording = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
mediaRecorderRef.current = mediaRecorder;
const audioChunks: Blob[] = [];
mediaRecorder.ondataavailable = (event) => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = async () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/pcm' });
const arrayBuffer = await audioBlob.arrayBuffer();
const audioChunk = new Uint8Array(arrayBuffer);
// Prepare the audioStream as required by AWS Transcribe
const audioStream = (async function* () {
yield { AudioEvent: { AudioChunk: audioChunk } };
})();
const command = new StartStreamTranscriptionCommand({
LanguageCode: 'en-US',
MediaEncoding: 'pcm',
MediaSampleRateHertz: 44100,
AudioStream: audioStream,
});
const client = clientRef.current;
if (client) {
setIsRecording(true);
setError(null);
try {
const response = await client.send(command);
console.log('Transcription response:', response);
handleResponse(response);
} catch (err) {
console.error('Error sending transcription request:', err);
setError('Error sending transcription request.');
}
}
};
mediaRecorder.start();
setIsRecording(true);
} catch (err) {
console.error('Error accessing microphone:', err);
setError('Failed to access the microphone. Please check your permissions.');
}
};
const handleResponse = async (response: any) => {
console.log("im")
try {
for await (const event of response.TranscriptResultStream) {
if (event.TranscriptEvent) {
const results: TranscriptResult[] = event.TranscriptEvent.Transcript.Results;
results.forEach((result) => {
result.Alternatives.forEach((alternative) => {
const transcript = alternative.Items.map((item) => item.Content).join(' ');
setTranscript((prev) => `${prev} ${transcript}`);
});
});
}
}
} catch (err) {
console.error('Error handling transcription response:', err);
setError('Error processing transcription response.');
} finally {
stopRecording();
}
};
const stopRecording = () => {
if (mediaRecorderRef.current) {
mediaRecorderRef.current.stop();
mediaRecorderRef.current = null;
}
setIsRecording(false);
};
return (
<div className="container">
<h1>AWS Transcribe</h1>
<hr />
{error && <div id="error" className="isa_error">{error}</div>}
<textarea
id="transcript"
placeholder="Press Start and speak into your mic"
rows={5}
readOnly
value={transcript}
></textarea>
<div className="row">
<div className="col">
<button
id="start-button"
className="button-xl"
title="Start Transcription"
onClick={startRecording}
disabled={isRecording}
>
<i className="fa fa-microphone"></i> Start
</button>
<button
id="stop-button"
className="button-xl"
title="Stop Transcription"
onClick={stopRecording}
disabled={!isRecording}
>
<i className="fa fa-stop-circle"></i> Stop
</button>
</div>
</div>
</div>
);
};
export default TranscriptionComponent;
</code>
import React, { useState, useRef, useEffect } from 'react';
import { TranscribeStreamingClient, StartStreamTranscriptionCommand } from '@aws-sdk/client-transcribe-streaming';
interface TranscriptResult {
Alternatives: { Items: { Content: string }[] }[];
}
const TranscriptionComponent: React.FC = () => {
const [transcript, setTranscript] = useState<string>('');
const [isRecording, setIsRecording] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
const mediaRecorderRef = useRef<MediaRecorder | null>(null);
const clientRef = useRef<TranscribeStreamingClient | null>(null);
useEffect(() => {
clientRef.current = new TranscribeStreamingClient({
region: AWS region',
credentials: {
accessKeyId: 'IAM access Key',
secretAccessKey: 'IAM secret key',
},
});
return () => {
stopRecording();
};
}, []);
const startRecording = async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
mediaRecorderRef.current = mediaRecorder;
const audioChunks: Blob[] = [];
mediaRecorder.ondataavailable = (event) => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = async () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/pcm' });
const arrayBuffer = await audioBlob.arrayBuffer();
const audioChunk = new Uint8Array(arrayBuffer);
// Prepare the audioStream as required by AWS Transcribe
const audioStream = (async function* () {
yield { AudioEvent: { AudioChunk: audioChunk } };
})();
const command = new StartStreamTranscriptionCommand({
LanguageCode: 'en-US',
MediaEncoding: 'pcm',
MediaSampleRateHertz: 44100,
AudioStream: audioStream,
});
const client = clientRef.current;
if (client) {
setIsRecording(true);
setError(null);
try {
const response = await client.send(command);
console.log('Transcription response:', response);
handleResponse(response);
} catch (err) {
console.error('Error sending transcription request:', err);
setError('Error sending transcription request.');
}
}
};
mediaRecorder.start();
setIsRecording(true);
} catch (err) {
console.error('Error accessing microphone:', err);
setError('Failed to access the microphone. Please check your permissions.');
}
};
const handleResponse = async (response: any) => {
console.log("im")
try {
for await (const event of response.TranscriptResultStream) {
if (event.TranscriptEvent) {
const results: TranscriptResult[] = event.TranscriptEvent.Transcript.Results;
results.forEach((result) => {
result.Alternatives.forEach((alternative) => {
const transcript = alternative.Items.map((item) => item.Content).join(' ');
setTranscript((prev) => `${prev} ${transcript}`);
});
});
}
}
} catch (err) {
console.error('Error handling transcription response:', err);
setError('Error processing transcription response.');
} finally {
stopRecording();
}
};
const stopRecording = () => {
if (mediaRecorderRef.current) {
mediaRecorderRef.current.stop();
mediaRecorderRef.current = null;
}
setIsRecording(false);
};
return (
<div className="container">
<h1>AWS Transcribe</h1>
<hr />
{error && <div id="error" className="isa_error">{error}</div>}
<textarea
id="transcript"
placeholder="Press Start and speak into your mic"
rows={5}
readOnly
value={transcript}
></textarea>
<div className="row">
<div className="col">
<button
id="start-button"
className="button-xl"
title="Start Transcription"
onClick={startRecording}
disabled={isRecording}
>
<i className="fa fa-microphone"></i> Start
</button>
<button
id="stop-button"
className="button-xl"
title="Stop Transcription"
onClick={stopRecording}
disabled={!isRecording}
>
<i className="fa fa-stop-circle"></i> Stop
</button>
</div>
</div>
</div>
);
};
export default TranscriptionComponent;