Using the react library in the Chrome browser, we implemented a function to read text displayed on the screen using the TTS function and record the screen.
When I run the source below, the screen and microphone voice are recorded, but the voice reading the text through TTS is not included in the recording.
Can you tell me how to include tts audio in the recording?
// Modify voice reading function
const readSelectedTexts = (selectedTexts: string[]) => {
if (selectedTexts.length > 0 && typeof window !== 'undefined' && window.speechSynthesis) {
const textToRead = selectedTexts.join(', ');
const utterance = new SpeechSynthesisUtterance(textToRead);
utterance.lang = 'en-US'; // Set to English
utterance.rate = 1.0;
utterance.pitch = 1.0;
window.speechSynthesis.speak(utterance);
}
};
const startRecording = async () => {
try {
const displayStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
const combinedStream = new MediaStream([
...displayStream.getVideoTracks(),
...audioStream.getAudioTracks()
]);
mediaRecorderRef.current = new MediaRecorder(combinedStream);
const chunks: BlobPart[] = [];
mediaRecorderRef.current.ondataavailable = (event) => {
if (event.data.size > 0) {
chunks.push(event.data);
}
};
mediaRecorderRef.current.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'study_rec.webm';
a.click();
URL.revokeObjectURL(url);
displayStream.getTracks().forEach(track => track.stop());
audioStream.getTracks().forEach(track => track.stop());
setIsRecording(false);
};
mediaRecorderRef.current.start();
setIsRecording(true);
} catch (error) {
console.error('Failed to start screen and audio recording:', error);
}
};
const stopRecording = () => {
if (mediaRecorderRef.current) {
mediaRecorderRef.current.stop();
setIsRecording(false); // Status change when recording ends
}
};