opus-media-recorder icon indicating copy to clipboard operation
opus-media-recorder copied to clipboard

Uncaught DOMException

Open BrunoGabrielGodoi opened this issue 4 years ago • 22 comments

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.

BrunoGabrielGodoi avatar Apr 29 '20 21:04 BrunoGabrielGodoi

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

matheuskuster avatar May 07 '20 13:05 matheuskuster

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

BrunoGabrielGodoi avatar May 07 '20 14:05 BrunoGabrielGodoi

Same

sthales avatar May 25 '20 14:05 sthales

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)

iaron avatar May 26 '20 17:05 iaron

Same in Chrome 83 and Chrome Canary 85 :(

herberthobregon avatar May 27 '20 21:05 herberthobregon

I get the same error with Chrome 83

asturm0 avatar May 28 '20 09:05 asturm0

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

mkhodary avatar May 28 '20 14:05 mkhodary

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

maximilianlorent avatar May 28 '20 18:05 maximilianlorent

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

thiagoamarante avatar May 29 '20 17:05 thiagoamarante

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

mkhodary avatar May 29 '20 20:05 mkhodary

but, we need convert to ogg :(

thiagoamarante avatar May 29 '20 21:05 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 avatar May 29 '20 22:05 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!

thiagoamarante avatar May 29 '20 23:05 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!

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

maximilianlorent avatar May 30 '20 19:05 maximilianlorent

I tried compile but have error :(

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

[] s!

borigoto avatar Jun 02 '20 21:06 borigoto

@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

maximilianlorent avatar Jun 03 '20 10:06 maximilianlorent

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.

kbumsik avatar Jun 03 '20 12:06 kbumsik

@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

borigoto avatar Jun 03 '20 14:06 borigoto

Attached is the corrected file

OpusMediaRecorder.umd.zip

fidelinkbr avatar Jun 04 '20 20:06 fidelinkbr

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

fidelinkbr avatar Jun 04 '20 22:06 fidelinkbr

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.

kbumsik avatar Jun 09 '20 04:06 kbumsik

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

guilleasz avatar Jul 30 '20 10:07 guilleasz