Overview

WavetelRTC is a lightweight JavaScript wrapper to easily integrate SIP calling into your browser-based applications. This documentation explains how to load the library, initialize it, handle events, and implement a complete softphone UI.

1. Including the Library

Simply load the compiled UMD version of the wrapper in your HTML:

<script src="https://webphone.wavetelbusiness.co.uk/webphone/wavetel-rtc.umd.cjs"></script>

This exposes a global class WavtelRTC for you to use.

2. Initializing the Client

Create a new instance by passing the required authentication parameters:

const rtc = new WavtelRTC({
api_key: "YOUR_API_KEY",
username: "SIP_USERNAME",
password: "SIP_PASSWORD",
});

After that, call:

await rtc.init();

This starts the RTC session and performs SIP registration.

3. Event Listeners

Your application should listen to various WebRTC/SIP events that WavtelRTC emits.

Registration Events

rtc.on("registered", () => { ... });
rtc.on("disconnected", () => { ... });

  • Fired when SIP registration succeeds or fails.

Call Flow Events

rtc.on("incomingcall", ({ jsep, caller }) => {...});
rtc.on("ringing", () => {...});
rtc.on("answered", () => {...});
rtc.on("failed", () => {...});
rtc.on("hangup", () => {...});

  • Provides complete lifecycle of any call.

  • incomingcall contains jsep required for answering.

Hold / Resume Event

rtc.on("hold", (isOnHold) => {...});

4. Making Calls

rtc.call("NUMBER");

This sends an outgoing SIP INVITE.

5. Answer, Reject, Hangup

Answer incoming call

rtc.answer(incomingJsep);

Reject incoming call

rtc.reject();

Hangup active call

rtc.hangup();

6. Hold & Resume

rtc.hold(true); // Hold
rtc.hold(false); // Resume

7. Blind Transfer

rtc.transfer("DESTINATION_NUMBER");

8. Example: Minimal Implementation

<script>
let rtc = new WavtelRTC({ api_key, username, password });
rtc.on("registered", () => console.log("Registered"));
rtc.on("incomingcall", ({ jsep, caller }) => rtc.answer(jsep));
await rtc.init();
rtc.call("12345");
</script>

9. UI Helper Notes (From Demo)

The demo shows how to:

  • Display dialpad

  • Show live call timer

  • Animate incoming call popup

  • Update connection status badges

  • Manage call states

You may use the same UI or customize as needed.

10. Full Demo Included

The provided demo HTML contains:

  • Login screen

  • Complete softphone interface (dialpad, call buttons, transfer, hold, resume)

  • Incoming call popup

  • Call timer

  • Real-time call state updates

You can modify the UI while keeping the same WavtelRTC method calls.

11. Summary of Public Methods

Method Description
init() Initialize RTC session and register SIP
call(number) Make outgoing call
answer(jsep) Answer incoming call
reject() Reject incoming call
hangup() Terminate call
hold(boolean) Hold/resume call
transfer(number) Blind transfer call
on(event, callback) Listen for events

12. Supported Events

Event Description
registered SIP registered
disconnected SIP disconnected
incomingcall New incoming call
ringing Remote ringing
answered Call answered
failed Call failed
hangup Call terminated
hold Hold/resume notification

13. Notes

  • Must be hosted on HTTPS.

  • Requires microphone permissions.

  • Works on Chrome, Edge, Firefox.

For further integration help or bug reporting, contact the Wavetel team.

If you need a demo Webphone then we have created a sample/demo application which can be found here:

https://webphone.wavetelbusiness.co.uk/webphone/webphone.html