Wrong path to encoderWorker.min.js

[gadzhimari]

I've read docs and it's says that encoderPath is optional parameter. If so, why I get the following error when I try to initialize the Record instance:
GET http://localhost:3000/encoderWorker.min.js 404 (Not Found)

I've install version 5.0.0 as dependency in my react project. The question is if this package shipped with all necessary code, why should copy and paste inside my project additional worker file? I thought, if I use third-party library and install it, I don't need copy and paste and create another folder inside project just do it work well.

Let me explain more concrete. Imagine we have core project which depends on other components library. This is just two separate project. Inside components library I have a Recorder component that use this opus-recorder lib. Why should I copy this encoderWorker.min.js and put it inside core project?

Here the screenshot which show that everything already had inside folder /node_module/opus-recorder

[chris-rudmin]

It should probably read that the worker path is optional if the files are hosted in the root. If you are building the project in a node environment, you might be able to specify the absolute path to the worker relative to recorderjs using encoderPath: path.resolve(__dirname, 'encoderWorker.min.js') If you have some suggestions on how we can handle this better, I would be glad to make those changes.

[chris-rudmin]

Even though I have published this in npm, it is a package which is built for the browser, and it will not work in node.

[gadzhimari]

Yes I'm using node project. Is there any way just to get path from node_module folder. I just want the recorder.js get content from encoderWorker.js, because they sits both on the same location.

[gadzhimari]

I've add this line encoderPath: path.resolve(__dirname, 'encoderWorker.min.js') nothing is changed.

[chris-rudmin]

@gadzhimari It's not an easy fix, because the workers are loaded at runtime in the browser, their paths are relative to the page hosting the recorder and not relative to the recorder.js file. I am investigating rolling up the libraries using webpack worker-loader to see if it can help.

[gadzhimari]

Ok. Thanks dude

[gadzhimari]

Any progress?

[chris-rudmin]

I tried, but had no success. I haven't had time to look at it more in depth.

…

On Wed, 14 Nov 2018 at 09:17 Gadzhimari Kachaev ***@***.***> wrote: Any progress? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#164 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAe7g6lL4NjJTM_-UESxLaHUyTgQLNe2ks5uvCXxgaJpZM4XX4dF> .

[gadzhimari]

Could explain me more deeply about the main reason that couldn't be resolved. I don't see the whole picture that caused the problem. I've just don't want specify any path to encoder file and the library by default link to itself inside node_module/opus-recorder/

[chris-rudmin]

opus-recorder depends on statically hosted files to complete its work. 1. recorder.js will try to instantiate a webworker instance using a relative path to encoderWorker.min.js 2. encoderWorker.min.js will do a streaming compile of encoderWorker.min.wasm relative to the worker path. Currently I'm using webpack to rollup the js, and it should support webworkers, however the webpack rollup fails when trying to include the emscripten content as it is trying to support multiple environments (node and web). This is as far as I got. Since webassembly is a bleeding edge feature, there is not really any support for rolling up emscripten and wasm content. I have seen some stackoverflow posts where people have had success, but I was not able to replicate that success.

…

On Wed, 14 Nov 2018 at 10:18 Gadzhimari Kachaev ***@***.***> wrote: Could explain me more deeply about the main reason that couldn't be resolved. I don't see the whole picture that caused the problem. I've just want don't specify any path to encoder file and the library by default link to itself inside node_module/opus-recorder/ — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#164 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAe7g2ozuhptK9RHHKVB9_cY20_nvBV0ks5uvDRAgaJpZM4XX4dF> .

[gadzhimari]

I'm currently solve half a problem, by encoding encoderWorker.min.js as a base64 string in my prod environment using webpack url-loader. But then I try to start recording I got this error:

I tried to convert the wasm file as base64 string, but this is not solve my issue. Maybe I do something wrong. Below my webpack config and couple lines of code, where I take link to the file from node_modules folder

    rules.push({
      test: /encoderWorker\.min\.js$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 50000
        }
      }
    });

and file where I get the encoderPath and pass as props to my react component

const encoderPath = require('opus-recorder/dist/encoderWorker.min.js');

<VoiceRecorder encoderPath={encoderPath} />

[MedElfadhelELHACHEMI]

Hey, is there news about this issue?
i'm having the same problem when loading with react

[chris-rudmin]

@MedElfadhelELHACHEMI I don't have a quick fix for this unfortunately. I have some ideas how it could be done, but it will require a significant change in architecture.

[LavaRiddle]

@MedElfadhelELHACHEMI Are you using webpack with your React application?

You can use 'CopyWebpackPlugin' to move the file to your projects root directory rather than calling from node_modules.

new CopyWebpackPlugin([  {
      from: 
         path.resolve(
            __dirname,
            '../node_modules/opus-recorder/dist/encoderWorker.min.js'
          ),
      to: './'
}])

Hope that helps?