Uncaught DOMException

[BrunoGabrielGodoi]

Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached.
    at n.value (https://cdn.jsdelivr.net/npm/opus-media-recorder@latest/OpusMediaRecorder.umd.js:1:5945)
    at ScriptProcessorNode.processor.onaudioprocess (https://cdn.jsdelivr.net/npm/opus-media-recorder@latest/OpusMediaRecorder.umd.js:1:7389)

Any ideas on why i'm getting this error. I called MediaRecorder.start(1000) , using the timeslice and my onDataAvalible function is not being called. The code works without Opus.

[matheuskuster]

@brulufa9 I'm getting this error too using Chrome 83.0.4103.44 64 bits. Did you find out how to bypass it?

[BrunoGabrielGodoi]

Sadly i did not. But if you do, please give me a heads up!

[sthales]

Same

[iaron]

Exact same error here :(

Google Chrome | 83.0.4103.61 (Official Build) (64-bit)
Revision | 94f915a8d7c408b09cc7352161ad592299f384d2-refs/branch-heads/4103@{#561}
OS | macOS Version 10.14.6 (Build 18G4032)

[herberthobregon]

Same in Chrome 83 and Chrome Canary 85 :(

[asturm0]

I get the same error with Chrome 83

[mkhodary]

Any update regarding this error? I started getting it on chrome.

[maximilianlorent]

I get the same error since today morning for Chrome 83.0.4103.61.

[thiagoamarante]

same problem.
does anyone already know what the problem is?

[mkhodary]

What I did to bypass the problem temporarily is to remove opus media library and used MediaRecorder.

[thiagoamarante]

but, we need convert to ogg :(

[thiagoamarante]

so far I don't know how to fix it.
but during my investigation, the problem is in the OpusMediaRecorder.js -> _enableAudioProcessCallback -> this._postMessageToWorker ('pushInputData', message)
method;

this coincides with this change that was made.
https://v8.dev/blog/v8-release-83

in encoderWorker.js

case 'pushInputData':
const { channelBuffers, length, duration } = e.data; // eslint-disable-line
// On Chrome, Float32Array doesn't recognize its buffer after
// being transferred, making the size of ArrayBuffer 0.
// This bug is found in Chrome 66.0.3359.181 (2018).
// It is fixed since 2019.
// So re-create Float32Array right after a web worker received it.
for (let i = 0; i < channelBuffers.length; i++) {
channelBuffers[i] = new Float32Array(channelBuffers[i].buffer);
}

    encoder.encode(channelBuffers);

I think the problem is here.

[thiagoamarante]

I found the problem :)
OpusMediaRecorder.js -> _postMessageToWorker

this.worker.postMessage({
command, channelBuffers, length, duration
}, channelBuffers.map(a => a.buffer));

remove
channelBuffers.map(a => a.buffer)

final
this.worker.postMessage({
command, channelBuffers, length, duration
});

that worked
enjoy!

[maximilianlorent]

I found the problem :)
OpusMediaRecorder.js -> _postMessageToWorker

this.worker.postMessage({
command, channelBuffers, length, duration
}, channelBuffers.map(a => a.buffer));

remove
channelBuffers.map(a => a.buffer)

final
this.worker.postMessage({
command, channelBuffers, length, duration
});

that worked
enjoy!

@thiagoamarante, thanks a lot for your hint. I can confirm that after applying your changes and rebuilding the opus-media-recorder from the sources, everything also worked fine for me.

I tested with the latest version of Chrome but also Firefox, Opera and Edge under Windows 10, as well as with the latest versions of Chrome and Firefox under Android - and I can tell you that it works like a charme ;-).
I wanted to make sure that the fix does not break any other system.
Unfortunately, I do not have any Apple devices, so that I cannot check for Safari or iOS.

Thus @thiagoamarante do you want to hand in a pull request, so that other people later on hopefully can download the fixed opus-media-recorder via npm?

Update

In the meantime, my team and me also already tested the Apple world and I can confirm that using the latest Safari under Mac and iOS also works with the fix applied.

[borigoto]

I tried compile but have error :(

@thiagoamarante, @maximilianlorent , can u send compiled files here !?

[] s!

[maximilianlorent]

@borigoto, find attached all files that were generated during the build.

As I also had many problems during the build let me summarize what I did to make the build process work properly:

• The sources for the opus, ogg and speexdsp moved to GitHub. Thus the .gitmodules file in the src folder needed to be updated. Find my changed file below
• For me it was really important not to use the latest version of EMSCRIPTEN. I can tell you that with version 1.38.36 I was successfully able to build
• For all Windows users. I recommend to build under Linux or using the Windows Subsystem For Linux if you are runnign a recent Windows 10 version (this was the way how I proceeded using Ubuntu 20.04 LTS as OS)
• You have to install a couple of build packages. As the details will depend on your system configuration I recommend to just google for erros that occour during build and keep your eyes open for missing stuff that needs to be installed on your linux machine.

Hope these hints might help a bit.

Nevertheless, @kbumsik do you have the time to update this Repo here and provide a new NPM package based on the solution of @thiagoamarante ? If you don't have much time at the moment, is it a feasible option for you if I hand in a pull request when I find the time and you just update the NPM?

build.zip
gitmodules.zip

[kbumsik]

Hi guys,
Thanks for reporting the issue and the efforts here.

I haven't take care of this library since I started a new Emscripten project. I was a little bit surprised by that people started using it open this kinds of issue since then. (The download count gets 5 times more since the Coronavirus break. Maybe this package got some attention because this library somewhat related to WFH?)

Alright, it's time to do something here. I will look into this issue and try to resolve the issue until this weekend. Even more, I will set up a CI test & build for more reliable maintenance. The CI setup may take a couple of weeks.

[borigoto]

@maximilianlorent , Hi!

Many thanks!! Tested and all work ok!!! :-)

Yes, i change sources from gitmodules, and, read your "instructions" i think my problem is version of Emscripten.
I am use last version, of then. Not see on readme anything say about this!

[] s

[fidelinkbr]

Attached is the corrected file

OpusMediaRecorder.umd.zip

[fidelinkbr]

I tried compile but have error :(

@thiagoamarante, @maximilianlorent , can u send compiled files here !?

[] s!

#25 (comment)

[kbumsik]

Hi guys,
I published 0.8.0 on NPM with the fix. Please tell me if the new version doesn't work.
Thanks @thiagoamarante for the digging in to the problem, the fix works very well!
@maximilianlorent I also uploaded a Dockerfile for a more reliable build. opus-media-recorder should be able to be compiled in any OS using this Dockerfile. I will upload the Docker image to the public registry and add more instruction in README soon.

[guilleasz]

@kbumsik Still seeing the issue after updating to 0.8.0:

OpusMediaRecorder.js:227 Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached.
    at EventTarget._postMessageToWorker (http://localhost:3000/static/js/24.chunk.js:174036:21)
    at ScriptProcessorNode.processor.onaudioprocess (http://localhost:3000/static/js/24.chunk.js:174175:12)