Issue while using decoder with React application about opus-recorder HOT 11 CLOSED

expected magic word 00 61 73 6d, found 3c 21 44 4f @+0)

Instead of feeding the web assembly, you are presamably feeding an HTML Document <!DO (= 3c 21 44 4f ) to your deocder.

Did you check your web server logs? Is decoderWorker.min.wasm in place and can be XHR-loaded? What happens if you manually request the decoderWorker.min.wasm binary (by opening the according URL in a new tab)?

from opus-recorder.

Thanks @Rillke for the tip.

Webpack was not showing it in the sources along with other .min.js files. So, I had to add a import for the wasm file in the component

import 'opus-recorder/dist/decoderWorker.min.wasm';

Also had to add this in webpack 4 config rules to properly load .wasm file, following direction from the comment zikaari/onigasm#2 (comment)

{
    test: /decoderWorker\.min\.wasm$/,
    loader: 'file-loader',
    type: 'javascript/auto',
}

I can see the wasm file now in sources when opening the webpage but, it still gives me the same error message on function call.

I am not sure if it's possible to make an XHR to a file non-static file which is node_modules with webpack.

from opus-recorder.

Hey @chris-rudmin ,
It would be very helpful if you could please share a working example of using decoder and wasm with webpack project.

from opus-recorder.

@himankpathak Please read the Readme

from opus-recorder.

Hey @chris-rudmin,
I went through the readme it only mentions how to get the encoder working. That's working fine in the app.
I am getting error when passing the encoded typedArray to decoder, not able to get the web assembly working.

Here is the complete source code:
https://gist.github.com/himankpathak/eae910705bc1006a23eb17c7255d793f

from opus-recorder.

@himankpathak wonder if #164 (comment) helps. I have no clue about React and how your App would copy and serve the required decoderWorker.min.wasm. The encoder binary is embedded in the encoder (compiled with SINGLE_FILE=1), that's probably why the encoder works without issues for you. You chose React+Webpack so you'll probably know how to use it and make it serve a static file. https://github.com/dialogs/dialog-web-components appears to use an old version; the wasm hadn't been embedded in the encoder, yet, at this time.

from opus-recorder.

@himankpathak Using webpack file-loader for loading wasm files should be the same for the encoder as well as the decoder. Please look in the examples folder for a sample implementation of how to use the decoder. It is currently not well documented.

from opus-recorder.

Thanks @Rillke @chris-rudmin .

I got it working. After seeing the CopyPlugin implementation I figured it out.
The culprit was the static file name searching used in decoderWorker.js to find decoderWorker.wasm
And webpack's file-loader changes the name of the file after processing.
We can import js files and pass the realtive path for them directly so they weren't causing any issue.

Added following rule in webpack to process .js files

{
    test: /(encoderWorker|waveWorker|decoderWorker)\.min\.js$/,
    loader: 'file-loader',
    options: {
      name: 'lib/opus-recorder/[name].[ext]',
    },
}

WASM file was not being processed correctly, after processing the wasm, webpack will move the original file to different location and replace the desired location in lib/opus-recorder/decoderWorker.min.wasm with :
export default __webpack_public_path__ + "static/media/decoderWorker.min.f920ca7e.wasm";

As a fix I used the CopyPlugin to copy the wasm directly into the desired folder:

plugin: [
    new CopyPlugin({
      patterns: [
        {
          from: 'node_modules/opus-recorder/dist/decoderWorker.min.wasm',
          to: 'lib/opus-recorder/decoderWorker.min.wasm',
        },
      ],
    })
]

And it works now! This is definitely not the most elegant solution.

@chris-rudmin , Can you share more details on why is encoderWorker binary is merged in the same file whereas decoderWorker binary is kept separately? Would it be possible to make it the same for both?
If not then, is there a way we can add an option to pass wasm path from react and remove this absolute path dependency?

from opus-recorder.

@himankpathak encoderWorker is single file because it is loaded in an AudioWorket Node context which does not support async fetching of wasm. Ideally the worker should be loaded seperately from the AudioWorklet, but this would require some additional config.

I'm totally open to suggestions if you can propose a sane way to distribute wasm packages via npm.

from opus-recorder.

@chris-rudmin, I don't have a lot of knowledge on emscripten or Workers. I browsed through some projects to understand how its usually used.
We can override the default Module['locateFile'] method with a custom implementation. ref

This is a gist which has an example on it. I guess we can do the same when using with Workers. We can pass a param at initialization to pass the wasm path and use that in the locateFile function.

from opus-recorder.

@himankpathak Cool. I would totally welcome a PR to have cleaner wasm distribution..

from opus-recorder.