Loading...
Searching...
No Matches
Using janus.js as JavaScript module

To facilitate integration of `janus.js` within modular JavaScript code bases, you can instruct the build system(s) to generate a modular variants of `janus.js`. Generated modules may then be copied to your own JavaScript projects and seamlessly integrated with your own project's build system.

Building the modules can be done in two ways:

1. As part of a regular build of the Janus WebRTC Server, using `make`, by enabling the integrated support via `configure`
2. By running NPM commands manually. This may be useful if you are looking to build just the JavaScript modules without incurring the overhead of a full build of Janus.

As an alternative to generating the module and copying it to your project, you can also tweak your module bundler to use `janus.js` directly from the official Janus repository. See more details (including concrete instructions for Webpack): Using janus.js directly with Webpack and other bundlers

# Building modules using make

Each supported variant may be enabled by passing a corresponding `--enable-javascript-*-module` flag (with or without a `=yes` directive) to `configure` before invoking `make` to build Janus. Please note: if you do not pass any such flag, by default no modules will be built.

The following table provides a summary of available module formats and their corresponding `configure` options:

Module format (syntax) | File name | configure flag to pass
--- | --- | ---
ECMAScript | janus.es.js | `--enable-javascript-es-module`
Universal Module Definition (UMD) | janus.umd.js | `--enable-javascript-umd-module`
CommonJS | janus.cjs.js | `--enable-javascript-common-js-module`
Immediately Invoked Function Expression (IIFE) | janus.iife.js | `--enable-javascript-iffe-module`

The `--enable-all-js-modules` shortcut is available, in case you want to enable and build them all.

When built and installed, these module variants may be found in the `$PREFIX/share/janus/javascript` folder, alongside the `janus.js` file itself (assuming `$PREFIX` the installation directory passed to `configure`).

Note
  Building the JavaScript modules still requires NPM and may involve an `install` which means `npm` must be able to download dependencies. By default `configure` will attempt to auto-detect available `npm` on your PATH, but if you have installed NPM outside the PATH you can override this by passing the (full) path to your `npm` executable, e.g.:

    ./configure NPM=/path/to/my/custom/npm --enable-javascript-es-module=yes

# Building modules manually with NPM

You can also opt to build modules by invoking `npm` manually. The `npm` subdirectory contains the necessary configuration files to get you started:

    cd ./npm
    npm install
    npm run rollup -- --o /path/to/desired/output/file-name.js --f cjs # or es, iffe, umd, amd, ...

Using `npm` directly is useful if you want to build the JavaScript modules only, without building Janus itself or if you are looking for advanced customisation options or alternative formats which are not integrated in `configure` yet. As you may have surmised from the example command, the actual build consists mostly of invoking `rollup` with the correct parameters. For more information on available parameters, please refer to the `rollup` documentation:

1. https://rollupjs.org/#command-line-flags
2. https://rollupjs.org/#configuration-files

# Using janus.js directly with Webpack and other bundlers

Generating a converted version of `janus.js` and copying it to your project is not always the best solution. In many situations it may be prefered to let your JavaScript module bundler (e.g. Webpack) grab the file directly from the official Janus repository. Doing that you can manage `janus.js` just like any other dependency coming from Github or the npm Registry, getting rid of the manual copy step and letting the bundler take care of version management, updates and downloads.

Of course, the first step is to include the official Janus repository as a dependency in your project by adding it to your `packages.json` file.

    {
      "dependencies": {
        "janus-gateway": "git://github.com/meetecho/janus-gateway.git"
      }
    }

That will automatically drag in the dependency on the appropriate version of the WebRTC Adapter from the npm Registry. But `janus.js` expects such adapter to be available as a global variable. So we have to make that happen for it to work properly. In the case of Webpack, is as easy as adding this to your `webpack.config.js` file.

    const webpack = require('webpack');

    module.exports = {
      plugins: [
        // janus.js does not use 'import' to access to the functionality of webrtc-adapter,
        // instead it expects a global object called 'adapter' for that.
        // Let's make that object available.
        new webpack.ProvidePlugin({ adapter: ['webrtc-adapter', 'default'] })
      ]
    };

On the other hand, `janus.js` defines the `Janus` object globally. So a small tweak is also needed to serve such object via `export`. That can be done using exports-loader and adding this to `webpack.config.js`

    module.exports = {
      module: {
        rules: [
          // janus.js does not use 'export' to provide its functionality to others, instead
          // it creates a global variable called 'Janus' and expects consumers to use it.
          // Let's use 'exports-loader' to simulate it uses 'export'.
          {
            test: require.resolve('janus-gateway'),
            loader: 'exports-loader',
             options: {
               exports: 'Janus',
             },
          }
        ]
      }
    };

With that extra configuration, the official `janus.js` can be used directly in any modular JavaScript code base without any previous transformation of the file. That means you can simply do this to access to the Janus API from your modular code.

    import { Janus } from 'janus-gateway';

For more detailed or updated documentation check the Webpack shimming guide or the equivalent documentation for your bundler of choice.