Integrating WebRTC Phone into Web Pages Using CommPeak

<!-- Add JsSIP script from CDN -->
<script type="text/javascript" src="https://jssip.net/download/releases/jssip-3.10.0.min.js"></script>

<!-- HTML Element to handle the Audio Stream (required) -->
<audio id="remoteAudio"></audio>

<!-- DIV element holding current connection status (optional) -->
<div id="callStatus">offline</div>
<!-- DIV element holding current call duration (optional) -->
<div id="durationTimer">N/A</div>

const getJwtToken = async function() { 
  try {
    const response = await fetch('https://your-auth-endpoint.com/token');

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // Handle response from your endpoint, this is a simple example of a plain text answer
    const token = await response.text();
    return token; 
  } catch (error) {
    console.error('Failed to retrieve JWT token:', error);
  }
}

// Function to update contents of status DIV
let updateCallStatus = function(msg) {
  document.getElementById('callStatus').innerText = msg;
}

// Variable holding WebRTC phone
let commpeakPhone = null;

// Function updating JWT token for connection
let updateJwtToken = async function() { 
  const token = await getJwtToken(); 
  commpeakPhone.set('authorization_jwt', `Bearer ${token}`);
}

async function initializeJsSIP() {
  // Getting initial JWT Token
  const token = await getJwtToken(); // We defined this function in the previous step

  // Defining websocket connection to connect to
  const socket = new JsSIP.WebSocketInterface('wss://sip.commpeak.com:7443');
  // Setting configuration for WebRTC Phone
  const configuration = {
    sockets: [socket],
    uri: 'sip:[email protected]', // Replace your_username with actual SIP Account username
    authorization_jwt: `Bearer ${token}`,
    session_timers: true,
    register_expires: 60
  };

  // Initializing CommPeak WebRTC Softphone
  commpeakPhone = new JsSIP.UA(configuration);
  commpeakPhone.start();
  
  // Defining basic events for the CommPeak WebRTC Softphone
  commpeakPhone.on('connected', function() {
    updateCallStatus('Connected to CommPeak Cloud');
  });

  commpeakPhone.on('registered', function() {
    updateCallStatus('Successfully registered');
  });

  commpeakPhone.on('registrationFailed', function(e) {
    updateCallStatus('Registration failed:', e.cause);
  });

  commpeakPhone.on('disconnected', function() {
    updateCallStatus('Disconnected from CommPeak Cloud');
  });
  
  // Setting interval to preserve validity of JWT Token every 50 seconds, since the token is typically defined to be valid for 60 seconds only
  let timer = setInterval(updateJwtToken, 50000);
}

// Variable holding audio element for attaching audio streams
let remoteAudio = document.getElementById('remoteAudio');

// Audio stream related variables
var onplaying = true, 
    onpause = false;

// Toggle variables for audio
remoteAudio.onplaying = function() {
  onplaying = true;
  onpause = false;
};

// Toggle variables for audio
remoteAudio.onpause = function() {
  onplaying = false;
  onpause = true;
};

// Starting CommPeak WebRTC Phone
await initializeJsSIP();

// Variable that will hold the actual running call
var callSession = null;
// Variables that will hold duration timer function interval and actual duration counter
var durationInterval = null, callDuration = 0;

// Function to originate an outgoing call
let issueCall = function(destination) {
  if (!commpeakPhone.isConnected() || !commpeakPhone.isRegistered()) {
    alert("Phone is not connected");
    return;
  }
  callSession = commpeakPhone.call(
    `sip:${destination}`,
    {
      mediaConstraints: { audio: true, video: false },
    }
  );
};

// Function that hangs up active call
let hangup = function () {
  if (callSession != null) {
    callSession.terminate();
  }
}

// Function handling duration counter
let tickDuration = function() {
  callDuration += 1;
  document.getElementById('durationTimer').innerText = `${callDuration} seconds`;
}

// Function to be executed after call is answered in order to enable counter
let callStartEvent = function() {
  durationInterval = setInterval(tickDuration, 1000);
}

// Function to be executed after call hangup, resets variables and stops duration timer interval
let callEndEvent = function() {
  callSession = null;
  clearInterval(durationInterval);
  document.getElementById('durationTimer').innerText = 'N/A';
  callDuration = 0;
};

// Function handling normal or error hangup
let getCallEndReason = function (data) {
    var msg = 'Call Ended';
    if (data.message != null && typeof data.message.status_code != 'undefined' && data.message.status_code != 200) {
      // Getting call error in case session failed
      msg += `: ${data.message.status_code} ${data.message.reason_phrase}`;
    }
    updateCallStatus(msg);
  }

// Handler of new call event for both incoming and outgoing calls, only outgoing call is described here
commpeakPhone.on('newRTCSession', function(e) {
  if (callSession != null) {
    // This is required to handle a second call while one is already ongoing, callSession holds actively running call, so we will hang up another session
    e.session.terminate();
    return;
  }

  // Assigning current session to globally available variable
  callSession = e.session;

  updateCallStatus('dialing');

  callSession.connection.ontrack = function(e){
    // Handle remote audio stream to connect it to local audio
    remoteAudio.srcObject = e.streams[0];
    if (remoteAudio.paused && !onplaying) {
      remoteAudio.play();
    }
  };

  // Fired when remote side starts ringing
  callSession.on('progress', function(data) {
    updateCallStatus('ringing');
  });

  // Fired when the call is answered
  callSession.on('accepted', function(data) {
    callStartEvent();
    updateCallStatus('answered');
  });
  // Fired when a running call ends.
  callSession.on('ended', function(data) {
    callEndEvent();
    getCallEndReason(data);
  });
  // Fired when the session was unable to establish (before an answer was received).
  callSession.on('failed', function(data) {
    callEndEvent();
    getCallEndReason(data);
  });
});

issueCall('07777712125552665')

hangup()