janus-gateway-tsdx

About

Modern typescript client for janus gateway. Based on websockets. The original client can be found here https://janus.conf.meetecho.com/docs/rest.html. This library is a rewrite of janus-gateway-js in typescript. Also, this library is possible to be used with react-native. In this case we need to create some shim classes and pass them to Client constructor, see Client.

Next steps

• [ ] Remove bluebird Promise library.
• [x] Remove websocket dependency.
• [x] Remove webrtcsupport dependency.
• [ ] Make use of async/await.
• [ ] Write some tests.
• [ ] Write some documentation.
• [x] React Native support.
• [x] React Native Documentation.

Example of usage

See the VideoRoom and VideoRoomBuilder

Install

yarn add janus-gateway-tsdx

Build

Just run yarn build

Client API

• Client
• Connection
• Session
• Plugin
• WebsocketConnection

Plugins

Currently, the project has implemented: audio-bridge, video-streaming, and video-room. If you require a plugin that is not implemented then you need to write it on your own.

• AudioBridgePlugin
• StreamingPlugin
• VideoRoomPlugin

Shims for React native

Media devices shim:

import {MediaDevices} from 'janus-gateway-tsdx';
import {mediaDevices} from 'react-native-webrtc';

class MediaDevicesReactNativeShim implements MediaDevices {
  getUserMedia = (constraints) => {
    return Promise.resolve(mediaDevices.getUserMedia(constraints));
  };
}

export default MediaDevicesReactNativeShim

WebRTC shim:

import {RTCIceCandidate, RTCPeerConnection, RTCSessionDescription} from 'react-native-webrtc';
import {WebRTC} from 'janus-gateway-tsdx';

class WebRTCReactNativeShim implements WebRTC {
  newRTCPeerConnection = (config, _): RTCPeerConnection => {
    return new RTCPeerConnection(config);
  };

  newRTCSessionDescription = (jsep: RTCSessionDescription): RTCSessionDescription => {
    return new RTCSessionDescription(jsep);
  };

  newRTCIceCandidate = (candidate: RTCIceCandidate): RTCIceCandidate => {
    return new RTCIceCandidate(candidate);
  };
}

export default WebRTCReactNativeShim

Then use it:

import Client from '../../client/client';
let client = new Client(this.address, this.clientOptions, new MediaDevicesReactNativeShim(), new WebRTCReactNativeShim);

How to write a Plugin

For simplicity lets write an EchoTest plugin that does only audio.

import Promise from 'bluebird';
import Plugin from '../client/plugin';
import MediaPlugin from './base/media-plugin';

class EchoTest extends MediaPlugin {
  static NAME = 'janus.plugin.echotest';

  audio(state: boolean): Promise<RTCSessionDescription> {
    return Promise.try(() => this.getUserMedia({ audio: true, video: false }))
      .then(stream => {
        this.createPeerConnection();
        stream.getTracks().forEach(track => this.addTrack(track, stream));
      })
      .then(() => this.createOffer({}))
      .then(jsep => {
        let message = { body: { audio: state }, jsep };
        return this.sendWithTransaction(message);
      })
      .then(response => {
        let jsep = response.get('jsep');
        if (jsep) {
          this.setRemoteSDP(jsep);
          return jsep;
        }
      });
  }
}

Plugin.register(EchoTest.NAME, EchoTest);

export default EchoTest;

Then we can use it

let janus = new Janus.Client(config.url, config);
janus.createConnection('client')
  .then(connection => connection.createSession())
  .then(session => session.attachPlugin(EchoTest.NAME))
  .then(echoTestPlugin => echoTestPlugin.audio(true))