chrisguttandin / extendable-media-recorder

An extendable drop-in replacement for the native MediaRecorder.
MIT License
258 stars 13 forks source link

DOMException: Failed to execute 'postMessage' on 'Worker': Value at index 0 does not have a transferable type. #667

Open vusirikala opened 2 years ago

vusirikala commented 2 years ago

I tried to add

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

await register(await connect());

It gives me the following error.

module.ts:67 Uncaught (in promise) DOMException: Failed to execute 'postMessage' on 'Worker': Value at index 0 does not have a transferable type.
    at http://localhost:3000/static/js/bundle.js:17017:18
    at new Promise (<anonymous>)
    at call (http://localhost:3000/static/js/bundle.js:17004:14)
    at http://localhost:3000/static/js/bundle.js:26443:14
    at register (http://localhost:3000/static/js/bundle.js:20911:89)
    at reg (http://localhost:3000/static/js/bundle.js:836:76)
    at ./src/index.js (http://localhost:3000/static/js/bundle.js:839:1)
    at options.factory (http://localhost:3000/static/js/bundle.js:91182:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:90627:33)
    at http://localhost:3000/static/js/bundle.js:91764:37

Based on the call stack, the register function in extendable-media-recorder called media-encoder-host-broker/src/module.ts:36, which called broker-factory/src/module.ts:59, which called broker-factory/src/module.ts:57. And this line gave error.

I kindly request you to help me fixing this.

chrisguttandin commented 2 years ago

Hi @vusirikala,

from your description I would guess the error is coming from here: https://github.com/chrisguttandin/media-encoder-host-broker/blob/e92fb44e0cfa4da3b1830b9302559724ce2bf8a2/src/module.ts#L36

It's where postMessage() is used internally to transfer the port to the worker. It looks like port is not a MessagePort for some reason.

Can you try to log the following:

import { register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

const port = await connect();

console.log(port);

await register(port);

I'm curious what port actually is.

It would also be helpful to know which browser you're using? Or is it happening in multiple browser?