Innocalls
Webrtc

WebRTC Events

Overview of WebRTC event handling

Events

This page documents all available events in the InnoCalls RTC SDK. Events allow you to respond to call state changes and user actions during calls.

Version Differences:

  • v1: Events have minimal parameters, callId only available on callStarted
  • v2: All events receive a call object with complete session data
  • v2: Introduces callAnswered and callFailed events (replacing callMissed/callRejected)

V1 Events

Call Ringing Event

The callRinging event is triggered when your call starts ringing on the recipient's side (i.e., after dialing but before the call is answered).

Example

innocallsRTC.on('callRinging', () => {
  console.log('callRinging')
  // Note: No parameters provided in v1
})

Call Started Event

The callStarted event is triggered when the call is answered, not when it is merely initiated.
You can use the callId provided to access the call using the appropriate credentials and endpoint.

Example

innocallsRTC.on('callStarted', (callId) => {
  console.log('callStarted')
  console.log({ callId })
})

Call Missed Event

The callMissed event is triggered when an incoming call is missed (not answered before timing out or ending).

Example

innocallsRTC.on('callMissed', () => {
  console.log('callMissed') // when you miss a call
})

Call Rejected Event

The callRejected event is triggered when a call is cancelled or rejected by the user before being answered.

Example

innocallsRTC.on('callRejected', () => {
  console.log('callRejected') // when you reject or cancel a call
})

Call Ended Event

The callEnded event is triggered when a call is terminated (either by the user or the remote party).

Example

innocallsRTC.on('callEnded', () => {
  console.log('callEnded')
})

Call Held Event

The held event is triggered when a call is put on hold.

Example

innocallsRTC.on('held', () => {
  console.log('held')
})

Call Released (Unhold) Event

The released event is triggered when a call is taken off hold and resumed.

Example

innocallsRTC.on('released', () => {
  console.log('released')
})

Call Muted Event

The muted event is triggered when a call is muted.

Example

innocallsRTC.on('muted', () => {
  console.log('muted')
})

Call Unmuted Event

The unmuted event is triggered when a call is unmuted.

Example

innocallsRTC.on('unmuted', () => {
  console.log('unmuted')
})

Mounting the Dialpad

To mount the Dialpad, ensure that you have finished setting up all event listeners. The Dialpad should be mounted to a specific element on your webpage, typically with an ID of root.

// Set up event listeners

innocallsRTC.on('callRinging', () => {
  console.log('callRinging')
})

innocallsRTC.on('callStarted', (callId) => {
  console.log('callStarted')
  console.log({ callId })
})

innocallsRTC.on('callMissed', () => {
  console.log('callMissed')
})

innocallsRTC.on('callRejected', () => {
  console.log('callRejected')
})

innocallsRTC.on('callEnded', () => {
  console.log('callEnded')
})

innocallsRTC.on('held', () => {
  console.log('held')
})

innocallsRTC.on('released', () => {
  console.log('released')
})

innocallsRTC.on('muted', () => {
  console.log('muted')
})

innocallsRTC.on('unmuted', () => {
  console.log('unmuted')
})

// Mount the Dialpad to the element with id="root"
innocallsRTC.mount('#root')

V2 Events

Call Data Structure

All events receive a call object with the following structure:

type CallDirection = 'incoming' | 'outgoing'
type CallSummaryStatus = 'started' | 'ringing' | 'answered' | 'ended' | 'failed'

type CallSessionSummary = {
  uid: string
  direction: CallDirection
  src: string
  dst: string
  status: CallSummaryStatus
  callId?: string // Available only when call is answered
  cause?: string // Available when call fails
}

Call Started Event

The callStarted event is triggered when an incoming or outgoing call is initiated.

Example

innocallsRTC.on('callStarted', ({ call }) => {
  console.log('callStarted', { call })
})

Call Ringing Event

The callRinging event is triggered when the call starts ringing (outgoing) or when your phone rings (incoming).

Example

innocallsRTC.on('callRinging', ({ call }) => {
  console.log('callRinging', { call })
})

Call Answered Event

The callAnswered event is triggered when the call is answered by either party.

Example

innocallsRTC.on('callAnswered', ({ call }) => {
  console.log('callAnswered', { call })
})

Call Ended Event

The callEnded event is triggered when a call is terminated (either by the user or the remote party).

Example

innocallsRTC.on('callEnded', ({ call }) => {
  console.log('callEnded', { call })
})

Call Failed Event

The callFailed event is triggered when a call fails for any reason (busy, rejected, network issues, etc.). The event includes failure details in the call data.

Example

innocallsRTC.on('callFailed', ({ call }) => {
  console.log('callFailed', { call })
  // call.cause contains the failure reason
})

On-Call Events

Call Held Event

The held event is triggered when a call is put on hold.

Example

innocallsRTC.on('held', ({ call }) => {
  console.log('held', { call })
})

Call Released (Unhold) Event

The released event is triggered when a call is taken off hold and resumed.

Example

innocallsRTC.on('released', ({ call }) => {
  console.log('released', { call })
})

Call Muted Event

The muted event is triggered when a call is muted.

Example

innocallsRTC.on('muted', ({ call }) => {
  console.log('muted', { call })
})

Call Unmuted Event

The unmuted event is triggered when a call is unmuted.

Example

innocallsRTC.on('unmuted', ({ call }) => {
  console.log('unmuted', { call })
})

Complete Setup Example

// Set up all event listeners
innocallsRTC.on('callStarted', ({ call }) => {
  console.log('callStarted', { call })
})

innocallsRTC.on('callRinging', ({ call }) => {
  console.log('callRinging', { call })
})

innocallsRTC.on('callAnswered', ({ call }) => {
  console.log('callAnswered', { call })
})

innocallsRTC.on('callEnded', ({ call }) => {
  console.log('callEnded', { call })
})

innocallsRTC.on('callFailed', ({ call }) => {
  console.log('callFailed', { call })
})

// On-call events
innocallsRTC.on('held', ({ call }) => {
  console.log('held', { call })
})

innocallsRTC.on('released', ({ call }) => {
  console.log('released', { call })
})

innocallsRTC.on('muted', ({ call }) => {
  console.log('muted', { call })
})

innocallsRTC.on('unmuted', ({ call }) => {
  console.log('unmuted', { call })
})

// Mount the Dialpad to the element with id="root"
innocallsRTC.mount('#root')

Notes

  • callId: Only available in the call object when the call status is "answered"
  • cause: Only available in the call object when the call status is "failed", providing the reason for failure
  • All events now receive a destructured {call} object containing the full call session summary
  • Ensure all event listeners are set up before mounting the dialpad

Migrating from v1 to v2

When upgrading from v1 to v2, note these key changes:

v1 Eventv2 EquivalentNotes
callMissedcallFailedCheck call.cause for failure reason
callRejectedcallFailedCheck call.cause for failure reason
callStarted(callId)callStarted({call})callId now in call.callId when answered

Breaking Changes:

  • All event handlers now receive a {call} object parameter instead of direct parameters
  • callMissed and callRejected are replaced by callFailed with different cause values
  • New callAnswered event added to distinguish between call initiation and answer

On this page