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,
callIdonly available oncallStarted- v2: All events receive a
callobject with complete session data- v2: Introduces
callAnsweredandcallFailedevents (replacingcallMissed/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
callobject when the call status is "answered" - cause: Only available in the
callobject 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 Event | v2 Equivalent | Notes |
|---|---|---|
callMissed | callFailed | Check call.cause for failure reason |
callRejected | callFailed | Check 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 callMissedandcallRejectedare replaced bycallFailedwith differentcausevalues- New
callAnsweredevent added to distinguish between call initiation and answer