ReactJS 未捕获引用错误worker未定义

Question

我遇到一些问题：

Uncaught reference error worker is not defined

我正在实现一个代码到

record audio

，这是我的代码：

//file records.tsx

import { ReactMediaRecorder } from "react-media-recorder";
import React  from "react";

export default function RecordView(){
    return(
        <div> 
            <ReactMediaRecorder
                audio
                render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
                    <div>
                    <p>{status}</p>
                    <button onClick={startRecording}>Start Recording</button>
                    <button onClick={stopRecording}>Stop Recording</button>
                    <video src={mediaBlobUrl} controls autoPlay loop />
                    </div>
                )}
            /> 
      </div>
    )
};

所以，我遇到了这个问题：

为什么我会遇到这个错误？？？

Answer 1

我无法重现该错误，但我猜测它与 HTTPS 有关，看看 mediaDevices 仅在 HTTPS 中可用。

这个错误在一个

Github问题中也提到过，没有任何回应，并且该项目自2022年5月以来一直没有更新。

尝试将您的开发服务器设置为使用 HTTPS。如果您使用的是 Vite，则可以将

server.https 选项与 vite-plugin-basic-ssl 一起使用。也许也有一种方法可以为 webpack/CRA 做到这一点。

Answer 2

这是我针对与 useReactMediaRecorder 或基于类相关的挂钩的解决方案：

假设我们有一个名为 CustomMediaRecorder 的自定义组件，它使用 useReactMediaRecorder。我们想在当前组件中使用这个组件。

 const CustomMediaRecorder = dynamic(
  () => import('..../CustomMediaRecorder'),
  {
    ssr: false,
  }
);

注意。 CustomMediaRecorder 可以是基于类的组件或功能组件。将其导入到您当前的组件中，如上面的代码片段所示。