Webphone SDK

Example

Connecting and registering

import { Client } from '@atlasat/webphone-sdk';

const account = {
  user: 'accountId',
  password: 'password',
  uri: 'sip:accountId@<realm>',
  name: 'test',
};

const transport = {
  wsServers: '<websocket-url>', // or replace with your
  iceServers: [], // depending on if your provider needs STUN/TURN.
};

const media = {
  input: {
    id: undefined, // default audio device
    audioProcessing: true,
    volume: 1.0,
    muted: false,
  },
  output: {
    id: undefined, // default audio device
    volume: 1.0,
    muted: false,
  },
};

var client = new Client({ type: 'credential', account, transport, media });

//connect to pbx
await client.init().then(() => {
  client.connect();
});

//using token
var client = new Client({ type: 'token', token: '<your token>' });

//disconnect
client.disconnect();
Copy

Change the primary I/O devices:

//change input device
client.defaultMedia.input.id = '230988012091820398213';
Copy

Incoming call

client.on('invite', function (invitation) {
  console.log('got invitation', invitation);

  if (confirm('new invitation')) {
    //method for accept call
    invitation.accept();
  }

  //method for hold call
  invitation.hold();

  //method for unhold call
  invitation.unhold();

  //method reject if call is not accepted
  invitation.reject();

  //method end call if call is accepted
  invitation.bye();

  //get remote identify
  console.log(invitation.remoteIdentity);

  //event on duration count
  invitation.on('duration', function (duration) {
    console.log('duration', duration);
  });

  //event on status update
  invitation.on('statusUpdate', function (data) {
    console.log('statusUpdate', data);
  });
  //event on terminated
  invitation.on('terminated', function (data) {
    console.log('terminated session', data);
  });
});
Copy

Outgoing call

var session = await client.invite('sip:201002@yourdomain.com');
session.on('accepted', function () {
  //session is accepted
});

session.on('duration', function (duration) {
  console.log('duration: ', duration);
});
session.on('terminated', (session) => {
  console.log('terminated call', session);
});

//method end call after connected or accepted
session.bye();

//method cancel dial
session.cancel();
Copy

Sent DTMF

var session = await client.invite('sip:201002@yourdomain.com');
session.on('accepted', function () {
  session.dtmf('1');
});
Copy

Mute unMute mic

var session = await client.invite('sip:201002@yourdomain.com');
session.on('accepted', function () {
  //mute mic
  session.mute();

  //unmute mic
  session.unmute();
});
Copy

Extra header outgoing call

var session = await client.invite(
    'sip:201002@yourdomain.com',
    { extraHeaders: ['X-Client-Id: 44482'] }
  );
});
Copy

Attended transfer of a call

if (await sessionA.accepted()) {
  await sessionA.hold();

  const sessionB = client.invite('sip:201002@<realm>');
  if (await sessionB.accepted()) {
    // immediately transfer after the other party picked up :p
    await client.attendedTransfer(sessionA, sessionB);

    await sessionB.terminate();
  }
}
Copy

Blind transfer of a call

if (await session.accepted()) {
  await session.blindTransfer('sip:201001@<realm>');
}
Copy

Other method

//get phone number
session.phoneNumber();

//change output volume media
session.media.output.volume = 0.8;

//get output volume media
const volume = session.media.output.volume;

//event when output volume change
session.media.on('outputVolume', (value) => {
  console.log('volume is', value);
});

//set output  media muted
session.media.output.muted = true;

//event when output is mute change
session.media.on('outputMuted', (muted) => {
  console.log('media is', muted);
});
Copy

setup media device output

//change output device Id direct
navigator.mediaDevices?.enumerateDevices().then((newDevices) => {
  session.media.output.id = newDevices.filter(
    (device) => device.kind === 'audiooutput',
  )[0].deviceId;
  session.media.output.audio = new Audio();
});

//change output device via method
session.media.setOutput({
  id: deviceId,
  volume: 0.5,
  muted: true,
});
Copy

setup media device input

//change input device Id direct
navigator.mediaDevices?.enumerateDevices().then((newDevices) => {
  session.media.input.id = newDevices.filter((device) => device.kind === 'audioinput')[0].deviceId;
});

//change input device via method
session.media.setInput({
  id: deviceId,
  volume: 0.5,
});
Copy

media event

session.media.on('outputVolume', (volume) => {
  console.log('new volume', volume);
});

session.media.on('inputVolume', (volume) => {
  console.log('new volume', volume);
});

session.media.on('outputMuted', (muted) => {
  console.log('new output mute', muted);
});

session.media.on('inputMuted', (muted) => {
  console.log('new input mute', muted);
});
Copy

get media track input and output

//get media track input
session.media.localStream;

//get media track output
session.media.remoteStream;

//event media stream track add
session.media.localStream.addEventListener('addtrack', (newTrack) => {
  console.log('track added', newTrack);
});

//event media stream track remove
session.media.localStream.addEventListener('removetrack', (oldTrack) => {
  console.log('track remove', oldTrack);
});
Copy

using external file

<script src="https://unpkg.com/@atlasat/webphone-sdk@1.0.16/dist/bundle.min.js"></script>;
//using external file
var client = new webPhone.Client({
  type: 'credential',
  account: {
    user: 'accountId',
    password: 'password',
    uri: 'sip:accountId@<realm>',
    name: 'test',
  },
  transport: {
    wsServers: '<websocket-url>', // or replace with your
    iceServers: [], // depending on if your provider needs STUN/TURN.
  },
});
Copy

demo page

Demo page visit here.

Source code demo visit here.