I tried to integrate Mediasoup into a Typescript application built with webpack. Unfortunately the worker binary doesn’t get loaded when I am creating a new worker with the createWorker() method. The following error is produced:
Webpack is not (only) client-side. It’s used as a kind of “Makefile” for the Typescript build process.Among other things it can also be used to create “dynamic imports” (implemented through “code splitting”).
Honestly no idea about the issue. The mediasoup-worker is compiled and properly placed when you do npm install in your Node project that includes mediasoup dependency. And of course it’s placed within node_modules/mediasoup/ folder. I don’t think webpack can change that or expect something different.
This is in mediasoup/src/Worker.ts (which is translated into mediasoup/lib/Worker.js):
// If env MEDIASOUP_WORKER_BIN is given, use it as worker binary.
// Otherwise if env MEDIASOUP_BUILDTYPE is 'Debug' use the Debug binary.
// Otherwise use the Release binary.
const workerBin = process.env.MEDIASOUP_WORKER_BIN
: process.env.MEDIASOUP_BUILDTYPE === 'Debug'
? path.join(__dirname, '..', 'worker', 'out', 'Debug', 'mediasoup-worker')
: path.join(__dirname, '..', 'worker', 'out', 'Release', 'mediasoup-worker');
We don’t set any absolute path, or yes, we do (based on __dirname).
No idea how to help, you should debug what your “npm” installer is doing.
Apologies for reviving a dead thread, I wanted to leave this here for anyone else treading the same path.
So there are a couple of things at play here:
1st we’re using Yarn, which may or may not involve using PnP, if you are using PnP then everything is going to be zipped in your cache, don’t feel down, all is not lost! yarn probably had the good sense to unplug the package because of the post-install compile for the worker.
Next you will need a plugins section in the webpack config:
What we’re doing is copying the file we compiled (I presume we’re in your pipeline so building for your target architecture here).
We don’t know the unpacked folder name in yarn for mediasoup so, we’re using a wildcard, webpack will get confused and think this is a directory because there is no file extension so we’re going to give it the hint toType.
Finally, as mentioned in the above thread, media soup is using some classy logic to figure out the path of the worker.
So we need to add this to the webpack config to change the behaviour of the __dirname, otherwise, the “…” in the path join will kill our hopes and dreams.
So now you’re going to end up with a dist file containing the correct folder structure for the worker, the worker binary, and your code with a modified __dir behaviour that will stop the “…” in the path calculation killing us off.
Sorry, I had more images here but apparently, I’m only allowed 1 embedded image as a new user.
Hopefully, this helps the next yarn + webpacker in their journey