Webpack minimize troubles

mediasoup libraries
1

I apologize in advance if this problem is caused by my own stupidity. But I have a problem with the mediasoup client and webpack minimize=true.

Exactly that - minimize = true or minimize = false - in my webpack.config makes the difference between “crashes” and “runs”.

The command that worries about this and ends with this error message

undefined is not an object, evaluating e.kind

is this:

const producer = await this.producerTransport.produce(params)

after having obtained a media stream track from iOS or macOS. To make matters worse, it only occurs with Safari and with all browsers in iOS.

In the non-minimized version, this immediately ends up in the “produce” callback of my producerTransport. In the minimized version, there is the error and the function does not return.

I could hunt down the problem up to the “debug” line in the screenshot below. Executing this crashes. In fact, “e” is undefined at this point (validated by console.log)

image
image2728×926 292 KB

I am now wondering if there is any way to further isolate the problem.

I need to mention, that I put the track “as-is” into the params structure for produce

  const track = audio ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0]
  const params = {
      track
  }
2

That given track is undefined for whatever reason. That’s all. Why does it happen in your app code? No idea.

3

No, at least I don’t see an issue here:

I put a trace before calling producerTransport.produce(params) and logged my parameters:

This is for the version, which has been produced with minimize: false in webpack.config:

image
image2740×840 228 KB

That works fine.

And the same here with minimize: true. In addition I re-enabled the obfuscation, so the error message is now completely unreadable too :slight_smile: s

image
image2914×892 256 KB

I cannot see that I’m providing a missing track.

4

Definitely no idea how it can happen

5

The track in this case is ended i.e it’s readyState=‘ended’ so it might be causing the problem.

Intentionally provide a ended track to see if the issue occurs in minimized false as well.

6

Transport.produce calls this.handler_.send({ track, ...}). Check what minimize makes out of this call. Unless it does not place the track as ‘track’ in this object, it’s difficult to think of anything else.

7

I stopped the track immediately after creation and the state is the same now “ended”.

The reaction of mediasoup-client is (in all browsers) seemingly correct: InvalidStateError, track ended

So I suppose the state is not the problem here

EDIT: This has been done with the non-minimized version

8

I was stopping right before the call of await this._handler.send({...})

n is undefined :frowning:

image
image1920×618 130 KB

9

Well, what is ‘n’? How does it relate to the track field of the argument object that Transport.produce receives?

10

I suppose it is the result of webpack minimize. I don’t munge names here :slight_smile:

11

Somewhere at the entry of the function “n” is the track

12

I’m trying to reproduce with one of the sample apps.

13

Just beautify the minimized code of Transport.produce. It not that hard to read it.

14

I could reproduce out of the box using this project, a recommended sample (a really nice one, IMHO):

Note: You need to have a MacBook or something and Safari installed. Maybe an iPad/iPhone as test device does it too (not tested).

If you like you could easily reproduce the issue by doing this:

openssl req -nodes -new -x509  -keyout cert.pem -out key.pem -days 10000 -subj "/C=US/ST=FL/L=Miami/O=MyCompany LLC/OU=dev/CN=myCompany.com/emailAddress=info@mycompany"
  • Open config.js and change the certificate entry to:
 sslCrt: "cert.pem",
 sslKey: "key.pem",
  • Create a webpack.min.config.js in the root directory with the following content (I disabled obfuscation for now in order to let you see the error clearly):
const path = require('path')
const TerserPlugin = require("terser-webpack-plugin")
const JavaScriptObfuscator = require('webpack-obfuscator');

// Production webpack config

module.exports = {
    entry: path.resolve(__dirname, 'client.js'),
    mode: "production",
    output: {
        path: path.resolve(__dirname, './'),
        filename: 'client-bundle.js',
        library: 'Client',
        libraryTarget: 'umd',
    },
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    performance: {
        hints: false,
        maxEntrypointSize: 512000,
        maxAssetSize: 512000
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                minify: (file, sourceMap) => {
                    // https://github.com/mishoo/UglifyJS2#minify-options
                    const uglifyJsOptions = {
                        mangle: true,
                        compress: {
                            drop_debugger: true,
                            drop_console: false
                        }
                    }

                    if (sourceMap) {
                        uglifyJsOptions.sourceMap = {
                            content: sourceMap,
                        }
                    }

                    return require("uglify-js").minify(file, uglifyJsOptions)
                },
            }),
        ],
    },
    // plugins: [
    //     new JavaScriptObfuscator({
    //         rotateStringArray: true
    //     }, ['client-bundle.js'])
    // ]
}
  • Finally add this entry to the scripts section of your package.json:
 "scripts": {
    "release": "webpack --config=webpack.min.config.js && DEBUG=mediasoup* node server.js"
 }

Everything is setup now. Run the server with

npm run release

This should webpack the client.js script to client-bundle.js w/o obfuscation and launch the server at port 3000.

Open your browser at localhost:3000.

Click join room and send camera streams. Allow camera access.

That shouldn’t have any problem in Chrome.

Do the same in Safari. The error described should pop up.

15

Can you try with mangle: false? I believe it is mangling the names and turning it off might work for you.

16

I already tried that. Doesn’t solve the problem.

Thanks

17

Ok, Have you tried any other minimizer?

18

No not yet. I was happy to have this one running.

BTW: Did one try this litte test project? Is the problem confirmed? Should I open an issue for it?

19

No I haven’t tried it, it is something related to minimization and not directly related with mediasoup. You can ping them on github. I will give it a try

20

Minimisation is something you can’t go live without?