Skip to content

Latest commit

 

History

History
164 lines (141 loc) · 3.27 KB

migration-simple.md

File metadata and controls

164 lines (141 loc) · 3.27 KB

Migration from Simple to SimpleUser

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('[email protected]');

After...

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

simpleUser.call("[email protected]");

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: '[email protected]',
    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:[email protected]",
  userAgentOptions: {
    authorizationUsername: "test",
    authorizationPassword: "password"
  }
};

const simpleUser = new SimpleUser(server, options);

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