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:

As part of a regular build of the Janus WebRTC Server, using make, by enabling the integrated support via configure
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 project root folder contains the necessary configuration files to get you started:

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:

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