Uncaught DOMException - Githubissues

BrunoGabrielGodoi commented 4 years ago

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 commented 4 years ago

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

BrunoGabrielGodoi commented 4 years ago

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

sthales commented 4 years ago

Same

iaron commented 4 years ago

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 commented 4 years ago

Same in Chrome 83 and Chrome Canary 85 :(

asturm0 commented 4 years ago

I get the same error with Chrome 83

mkhodary commented 4 years ago

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

maximilianlorent commented 4 years ago

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

thiagoamarante commented 4 years ago

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

mkhodary commented 4 years ago

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

thiagoamarante commented 4 years ago

but, we need convert to ogg :(

thiagoamarante commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

I tried compile but have error :(

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

[] s!

maximilianlorent commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

Attached is the corrected file

OpusMediaRecorder.umd.zip

fidelinkbr commented 4 years ago

I tried compile but have error :(

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

[] s!

https://github.com/kbumsik/opus-media-recorder/issues/25#issuecomment-639090122

kbumsik commented 4 years ago

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 commented 4 years ago

@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)

kbumsik / opus-media-recorder

Uncaught DOMException #25

Update