DOMException: The user aborted a request

[xtrmbob]

Hello,

I want to implement the opus-recorder package in my project but when i create a new instance i got this error

this.recorder = new Recorder({ encoderPath: '../controllers/waveWorker.min.js', wavBitDepth: 16, numberOfChannels: 1, mediaTrackConstraints: this.audioConstraints });

[chris-rudmin]

recorder.start() returns a promise which you can add error handling. user aborted a request usually means the user has refused to grant permissions to the site to access the microphone.

[philpln]

My site is allowed to access the microphone and I get the same error...
It is weird because if I host it through live server on vs code, everything works fine but when I host is with flask, I get the same error when trying to call recorder.start.
Do you have any idea what yourld cause this?

[chris-rudmin]

@C4rb0ngit It could also be incorrect path to the hosted worker.

[philpln]

sorry to ask probably stupid questions but what is the hosted worker?

[chris-rudmin]

You need to host the encoderWorker.min.js on your web server. Example If you are using webpack: https://github.com/chris-rudmin/opus-recorder#getting-started-with-webpack

…

On Wed, Aug 4, 2021 at 11:24 AM C4rb0ngit ***@***.***> wrote: sorry to ask probably stupid questions but what is the hosted worker? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#240 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAD3XA55GUUY3U3QTVSVX3TT3FLS7ANCNFSM454GDDAQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

[philpln]

sorry but do you know how to do it in flask because I am very new to web dev and have no idea what to do / can't find anything online

[chris-rudmin]

@C4rb0ngit I do not know.

[philpln]

Okay, thanks anyways. So basically I need to host my flask application on a server like ngix or apache and that's is?

[zzph]

Ditto, I'm having the exact same issue here.

Could it be something other than the worker? Is there a way to verify the worker/encoderPath is working?

My webpack config (nextjs):

webpack: (config, options) => {
    config.module.rules.push({
        test: /encoderWorker\.min\.js$/,
        use: [{ loader: 'file-loader' }]
    })
    return config
  }

[ebrahimiaval]

In Next JS the encoder file inject in to the _next directory and encoderPath is like /_next/8bd8ff56898e42df5cb3621787b4e6d1.js and in next js we can not access to the root of _next directory.

how set the worker to change this path to static directory in _next directory?

when i set in in to the /_next/static/.... or /public/ and set the encoderPath its ok but when i want use automatically solution.

[uellenberg]

In Next JS the encoder file inject in to the _next directory and encoderPath is like /_next/8bd8ff56898e42df5cb3621787b4e6d1.js and in next js we can not access to the root of _next directory.

how set the worker to change this path to static directory in _next directory?

when i set in in to the /_next/static/.... or /public/ and set the encoderPath its ok but when i want use automatically solution.

I'm not sure if this is still relevant, but the solution to this is by using webpack asset modules instead of file-loader:

config.module.rules.push({
    test: /encoderWorker\.min\.js$/,
    type: "asset/resource",
});