“ReactJS未捕获的引用错误:worker未定义”

huangapple go评论74阅读模式
英文:

ReactJS uncaught reference error worker is not defined

问题

I'm having some issues:

Uncaught reference error worker is not defined

I'm implementing one code to record audio, this's my code:

// 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>
    )
};

So, I'm getting this issue:

“ReactJS未捕获的引用错误:worker未定义”

Why I'm having this error???

英文:

I'm having some issues:

Uncaught reference error worker is not defined

I'm implementing one code to record audio, this's my code:

//file records.tsx

import { ReactMediaRecorder } from &quot;react-media-recorder&quot;;
import React  from &quot;react&quot;;

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

so, I'm getting this issue:

“ReactJS未捕获的引用错误:worker未定义”

Why I'm having this error???

答案1

得分: 1

这个错误我无法重现,但我猜测可能与HTTPS有关,因为mediaDevices 仅在HTTPS环境下可用

这个错误也在一个GitHub问题中提到,但没有回应,而且该项目自2022年5月以来没有更新。

尝试设置你的开发服务器使用HTTPS。如果你使用的是 Vite,你可以使用 server.https 选项vite-plugin-basic-ssl。对于 webpack/CRA 也可能有相应的方法。

英文:

I wasn't able to reproduce the error, but my guess would be that it's related to HTTPS, seeing how mediaDevices are only availible in HTTPS.

This error is also mentioned in a Github issue, with no response, and the project hasn't been updated since May 2022.

Try setting up your dev server to use HTTPS. If you're using Vite, you can use the server.https option with vite-plugin-basic-ssl. There's probably a way to do this for webpack/CRA too.

答案2

得分: 0

以下是您要翻译的内容:

这是我针对与 useReactMediaRecorder 或基于类的 hooks 相关的解决方案:

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

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

注意:CustomMediaRecorder 可以是一个基于类或函数的组件。按照上面的代码片段将其导入到您的当前组件中。

英文:

Here is my solution for hooks related to useReactMediaRecorder or class-based too:

Assume we have a custom component called CustomMediaRecorder that uses useReactMediaRecorder. We want to use this component in the current component.

 const CustomMediaRecorder = dynamic(
  () =&gt; import(&#39;..../CustomMediaRecorder&#39;),
  {
    ssr: false,
  }
);

NB. CustomMediaRecorder can be a class-based or functional component. Import it into your current component like the code snippet above shows.

huangapple
  • 本文由 发表于 2023年4月13日 21:08:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/76005821.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定