react-media-recorder 未停止部署中的录制

Question

我正在使用react-media-recorder 录制音频。它在 localhost 上运行良好，但是当部署到服务器并被访问时，onStop 方法停止工作。它不会被调用。

这是我的文件：

import { useReactMediaRecorder } from "react-media-recorder"

const { status, startRecording, stopRecording, error, mediaBlobUrl, clearBlobUrl } = useReactMediaRecorder({
        audio: true,
        type: "audio/wav",
        onStop: (blobUrl, blob) => {
            console.log("onStop recording")
            const url = URL.createObjectURL(blob)
            let formData = new FormData()

            //person_name-person_id-language_id-sentence.id-date
            const today = new Date()
            // const file_name = `${id}-${language_id}-${sentence.id}-${today.toISOString()}.wav`
            const file_name = `${name}-${id}-${language_id}-${
                sentence.id
            }-${today.toDateString()}-${language_name}.wav`

            console.log("-------------------------------------------------------")
            console.log("file_name :>>", file_name)
            console.log("-------------------------------------------------------")

            formData.append("file", blob, file_name)

            let upload_url
            if (sample) {
                upload_url = "sentence/upload_audio_sample"
            } else {
                upload_url = "sentence/upload_audio"
            }

            console.log(`upload_url`, upload_url)
            axios
                .post(upload_url, formData)
                .then((d) => console.log("after post blob :>>", d))
                .catch((e) => console.log("error in post blob :>>", e))
        },
    })

    const handleStartRecording = () => {
        setRecording(!recording)
        if (!recording) {
            clearBlobUrl()
            startRecording()
        } else {
            stopRecording()
        }
}

非常感谢任何帮助

Answer 1

为此，前端和后端都需要在 https 上运行。 确保您的后端服务器在 https 上运行