Блог

Я могу получить аудио в консоли, но я не могу его отобразить, и я не могу остановить запись, я не знаю, что происходит, и я делаю что-то не так в сокете.IO может кто-нибудь, пожалуйста, помочь мне с этим. Я использую vs code для этого, я использую сокет React Js.Ввод-вывод и запись RTC

 useEffect(() => {
    if (!socket) return;

    socket.on("sttResponse", () => {
        setSocketConnected(socket.connected);
        subscribeToGetStream();
    });
    socket.on("disconnect", () => {
        setSocketConnected(socket.connected);
    });

    socket.on("getDate", (data) => {
        setDt(data.lang[1].network.code);
    });
}, [socket]);

// manage socket connection
const handleSocketConnection = () => {
    if (socketConnected) socket.disconnect();
    else {
        socket.connect();
    }
};

// subscribe to socket date event
const subscribeToGetStream = (stream = 1000) => {
    socket.emit("getStream", stream);
};
// start and stop function

const startRecording = (e) => {
    e.preventDefault();
    if (langCode) {
        setrecording(true);
        getUserMedia();
    } else {  
        return false;
    }
};

const stopRecording = (e) => {
    e.preventDefault();
    setrecording(false);
    socket.disconnect();
};

//record RTC
function getUserMedia() {
    // socket.setSocketConnected();
    navigator.mediaDevices
        .getUserMedia({
            video: false,
            audio: true,
        })
        .then(async function (stream) {
            var StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
            recorder.current = new RecordRTC(stream, {
                recorderType: StereoAudioRecorder,
                type: "audio",
                mimeType: "audio/wav",
                sampleRate: 44100,
                bufferSize: 2048,
                desiredSampRate: 8000,
                numberOfAudioChannels: 1,
                timeSlice: 400,
                ondataavailable: function (blob) {
                    console.log(blob);
                    // self.audioStream.next(blob);
                    // var streamObj = { "audioStream": blob, "lang": setlangInfo };
                },
            });

            recorder.current.startRecording();
        });
}

return (
    <div>
        <ReactBootStrap.Navbar bg='light' variant='light'>
            <ReactBootStrap.Navbar.Brand href='#home'>
                <img
                    alt=''
                    src='https://dev.kwantics.ai/apps/angularApps/rtd-app/assets/images/logo.png'
                    width='150'
                    height='38'
                    className='d-inline-block align-top'
                />{" "}
                <a className={Styles.navbarHeader}>Real Time Speech Decoder</a>
            </ReactBootStrap.Navbar.Brand>
        </ReactBootStrap.Navbar>

        <section className='container-fluids'>
            <section className='col-12 col-sm-6 col-md-3'>
                <form className='form-container'>
                    <div className='mb-3'>
                        <div id='text-field' className='form-text'>
                            SPEECH - TO - TEXT
          </div>
                    </div>
                    <div>
                        <Dropdown onSelect={handleSelect}>
                            <Dropdown.Toggle variant='success' id='dropdown-basic'>
                                Select Language
            </Dropdown.Toggle>

                            <Dropdown.Menu>
                                {langInfo
                                    ? Object.entries(langInfo).map((lang) => {
                                        return (
                                            <Dropdown.Item
                                                key={lang[0]}
                                                eventKey={lang[1].network.port}
                                            >
                                                {lang[1].general.name}
                                            </Dropdown.Item>
                                        );
                                    })
                                    : null}
                            </Dropdown.Menu>
                        </Dropdown>
                    </div>

                    {/* <button type="submit" className="btn btn-primary  ">Create audio</button> */}
                    <button onClick={(e) => startRecording(e)}
                        disabled={disabled}
                        type='submit'>
                        <img
                            type='submit'
                            alt='record'
                            src='https://img.icons8.com/ios/452/microphone.png'
                            width='40'
                        />
                    </button>
                    <div>
                        <button onClick={(e) => stopRecording(e)}
                            disabled={disabled}>

                            <img
                                type='image'
                                alt='stop'
                                src='https://www.freeiconspng.com/uploads/-button-stop-stop-playing-video-player-icon-29.png'
                                width='40'
                            />
                        </button>
                        {/* <img src="https://wpamelia.com/wp-content/uploads/2018/11/ezgif-2-6d0b072c3d3f.gif" width="150" alt='loading' /> */}
                    </div>
                </form>
            </section>
        </section>
    </div>
);
 

}

экспортировать SocketRecordRtc по умолчанию;