Migration from Simple to SimpleUser

April 27, 2020 · View on GitHub

Migrating from Simple (documented here) to SimpleUser (documented here) is relatively simple.

Want to see working SimpleUser code examples? Run the demo.

Herein are some before and after migration code snippets...

HTML

<html>
  <head>
    <link rel="stylesheet" href="my-styles.css">
  </head>
  <body>
    <video id="localVideo" muted="muted"></video>
    <video id="remoteVideo" muted="muted"></video>
  </body>
</html>

Importing Simple/SimpleUser

Before...

import { Simple } from "sip.js/lib/Web";

After...

import { SimpleUser, SimpleUserOptions } from "sip.js/lib/platform/web";

Create an Simple/SimpleUser Instance

Before...

var options = {
  media: {
    local: {
      video: document.getElementById('localVideo')
    },
    remote: {
      video: document.getElementById('remoteVideo'),
      // This is necessary to do an audio/video call as opposed to just a video call
      audio: document.getElementById('remoteVideo')
    }
  },
  ua: {
    wsServers: "wss://sip.example.com"
  }
};

var simple = new Simple(options);

After...

const server = "wss://sip.example.com";

const options: SimpleUserOptions = {
  media: {
    constraints: { 
      audio: true,
      video: true
    },
    local: {
      video: document.getElementById("localVideo") as HTMLVideoElement
    },
    remote: {
      video: document.getElementById("remoteVideo") as HTMLVideoElement,
    }
  },
  userAgentOptions: {}
};

const simpleUser = new SimpleUser(server, options);

Starting and Ending a Call

Before...

var endButton = document.getElementById('endCall');
endButton.addEventListener("click", function () {
  simple.hangup();
  alert("Call Ended");
}, false);

simple.call('welcome@onsip.com');

After...

const endButton = document.getElementById("endCall");
endButton.addEventListener("click", async () => {
  await simpleUser.hangup();
  alert("Call Ended");
}, false);

simpleUser.call("welcome@onsip.com");

Answering a Call

Before...

var options = {
  media: {
    local: {
      video: document.getElementById('localVideo')
    },
    remote: {
      video: document.getElementById('remoteVideo'),
      // This is necessary to do an audio/video call as opposed to just a video call
      audio: document.getElementById('remoteVideo')
    }
  },
  ua: {
    uri: 'test@example.com',
    authorizationUser: 'test',
    password: 'password',
    wsServers: "wss://sip.example.com"
  }
};

var simple = new Simple(options);

simple.on('ringing', function () {
  simple.answer();
});

After...

const server = "wss://sip.example.com";

const options: SimpleUserOptions = {
  media: {
    constraints: { 
      audio: true,
      video: true
    },
    local: {
      video: document.getElementById("localVideo") as HTMLVideoElement
    },
    remote: {
      video: document.getElementById("remoteVideo") as HTMLVideoElement,
    }
  },
  aor: "sip:test@example.com",
  userAgentOptions: {
    authorizationUsername: "test",
    authorizationPassword: "password"
  }
};

const simpleUser = new SimpleUser(server, options);

simpleUser.delegate = {
  onCallReceived: async () => {
    await simpleUser.answer();
  }
};