converting text to speech and adding to video

[athishsreeram]

import React, { useRef, useState } from 'react';

const ScreenRecorder = () => {
    const screenRecording = useRef(null);
    const [Recorder, setRecorder] = useState(null);
    const [displayMedia, setDisplayMedia] = useState(null);
    const [audioStream, setAudioStream] = useState(null);

    const startScreenRecording = async () => {
        const stream = await navigator.mediaDevices.getDisplayMedia({
            audio: true,
            video: true
        });

        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const textToConvert = "Your text to be converted to speech";  // Add your text here
        const utterance = new SpeechSynthesisUtterance(textToConvert);
        utterance.onend = async () => {
            const audioTracks = audioStream ? [audioStream.getTracks()[0]] : [];
            const combinedStream = new MediaStream([...stream.getTracks(), ...audioTracks]);

            const recorder = new MediaRecorder(combinedStream);
            setRecorder(recorder);
            setDisplayMedia(stream.getVideoTracks()[0]);

            const screenRecordingChunks = [];
            recorder.ondataavailable = (e) => {
                if (e.data.size > 0) {
                    screenRecordingChunks.push(e.data);
                }
            };

            recorder.onstop = () => {
                const blob = new Blob(screenRecordingChunks, { type: 'video/webm' });
                const url = URL.createObjectURL(blob);
                screenRecording.current.src = url;
                if (displayMedia) {
                    displayMedia.stop();
                }
            };

            recorder.start();
        };

        window.speechSynthesis.speak(utterance);
    };

    const ButtonStyle = {
        backgroundColor: 'green',
        color: 'white',
        fontSize: '2em',
    };

    const downloadVideo = () => {
        const video = screenRecording.current;
        const url = video.src;
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'recording.webm';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    };

    return (
        <>
            <button style={ButtonStyle} onClick={startScreenRecording}>
                Start Recording
            </button>
            <button style={ButtonStyle} onClick={() => { Recorder && Recorder.stop(); }}>
                Stop Recording
            </button>
            <button style={ButtonStyle} onClick={downloadVideo}>
                Download Video
            </button>
            <br /><br /><br />
            <video ref={screenRecording} height={300} width={600} controls />
        </>
    );
};

export default ScreenRecorder;

Explanation:

1. Text-to-Speech Conversion:

   • The text "Your text to be converted to speech" is converted to speech using the SpeechSynthesisUtterance API.
   • Once the speech synthesis ends, the screen recording starts.

2. Combining Audio and Video Streams:

   • The audio from the text-to-speech conversion and the video from the screen capture are combined into a single MediaStream.

3. Downloading the Video:

   • A button allows the user to download the recorded video with the embedded audio as a .webm file.

Make sure to adjust the textToConvert variable with the text you want to convert to speech.

[athishsreeram]

In public diaryblog post page