You can register event handler functions with the
eventHandlers
property of the OTSession, OTPublisher, and OTSubscriber components:
class App extends Component {
constructor(props) {
super(props);
this.sessionEventHandlers = {
streamCreated: event => {
console.log('Stream created!', event);
},
streamDestroyed: event => {
console.log('Stream destroyed!', event);
},
sessionConnected: event => {
console.log('Connected to the session!');
},
sessionDisconnected: event => {
console.log('Disconnected from the session!');
}
};
this.subscriberEventHandlers = {
connected: event => {
console.log('Subscriber connected!', event);
},
disconnected: event => {
console.log('Subscriber disconnected!', event);
}
};
this.publisherEventHandlers = {
streamCreated: event => {
console.log('Stream created!', event);
},
streamDestroyed: event => {
console.log('Stream destroyed!', event);
}
};
}
render() {
return (
<OTSession apiKey="your-api-key" sessionId="your-session-id" token="your-session-token" eventHandlers={this.sesssionEventHandlers}>
<OTPublisher eventHandlers={this.publisherEventHandlers}/>
<OTSubscriber eventHandlers={this.suscriberEventHandlers} />
</OTSession>
);
}
}
The following sections define the structure of different event objects.
The OTSession object dispatches
archiveStarted
and
archiveStopped
events when an
archive
starts and stops for a session. The event object has the following
properties:
archive = {
archiveId: string, // The archive ID.
name: string, // The archive name.
sessionId: string, // The session ID.
};
To get audio data for a subscriber, register an event listener for the
audioNetworkStats
event. The event object has the following properties:
event = {
audioBytesReceived: number,
audioPacketsLost: number,
audioPacketsReceived: number,
timeStamp: number,
};
To get captions for a subscriber, register an event listener for the
captionReceived
event. The event object has the following properties:
event = {
text: string,
isFinal: boolean,
};
You can find the structure of the object below:
event = {
sessionId: string;
connection = {
connectionId: string
creationTime: string,
data: string,
}
}
You can find the structure of the object below:
event = {
sessionId: string;
connection = {
connectionId: string
creationTime: string,
data: string,
}
}
You can find the structure of the object below:
event = {
code: string,
message: string,
};
event = {
active: boolean;
}
To get video data for a publisher, register an event listener for the
OTPublisher
videoNetworkStats
event. The object has the following structure:
event = [
{
connectionId: string,
subscriberId: string,
videoPacketsLost: number,
videoBytesSent: number,
videoPacketsSent: number,
timestamp: number,
}
];
Note that this event object is an array of objects. See the docs for
the OTPublisher
videoNetworkStats
event.
To get audio data for a publisher, register an event listener for the
OTPublisher
audioNetworkStats
event. The object has the following structure:
event = [
{
connectionId: string,
subscriberId: string,
audioPacketsLost: number,
audioPacketsSent: number,
audioBytesSent: number,
timestamp: number,
}
];
Note that this event object is an array of objects. See the docs for
the OTPublisher
audioNetworkStats
event.
You can find the structure of the object below:
event = {
connectionId: string,
jsonArrayOfReports: string,
};
event = {
sessionId: string;
connection: {
connectionId: string,
creationTime: string,
data: string,
},
}
event = {
sessionId: string;
}
The OTSession object dispatches a
signal
event when a signal is received. See the
signaling developer guide
. The event object has the following properties:
event = {
type: string, // Either 'signal' or 'signal:type'.
data: string, // The data.
connectionId: string, // The connection ID of the client that sent the signal.
};
You can find the structure of the object below:
stream = {
streamId: string;
name: string;
connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object
connection: {
connectionId: string,
creationTime: string,
data: string,
},
hasAudio: boolean,
hasVideo: boolean,
sessionId: string,
creationTime: number,
height: number,
width: number,
videoType: string, // 'camera' or 'screen'
};
event = {
streamId: string;
name: string;
connectionId: string;
connection: {
connectionId: string,
creationTime: string,
data: string,
},
hasAudio: boolean,
hasVideo: boolean,
sessionId: string,
creationTime: number,
height: number,
width: number,
videoType: string, // 'camera' or 'screen'
};
event = {
stream: {
streamId: string,
name: string,
connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object
connection: {
connectionId: string,
creationTime: number,
data: string,
},
hasAudio: boolean,
hasVideo: boolean,
sessionId: string,
creationTime: number,
height: number,
width: number,
videoType: string, // 'camera' or 'screen'
},
oldValue: any,
newValue: any,
changedProperty: string,
};
event = {
audioLevel: number;
stream: {
streamId: string,
name: string,
connectionId: string, // This will be removed after v0.11.0 because it's exposed via the connection object
connection: {
connectionId: string,
creationTime: number,
data: string,
},
hasAudio: boolean,
hasVideo: boolean,
sessionId: string,
creationTime: number,
height: number,
width: number,
videoType: string, // 'camera' or 'screen'
},
};
You can find the structure of the object below:
event = {
videoPacketsLost: number,
videoBytesReceived: number,
videoPacketsReceived: number,
timestamp: number
};
event = {
stream: {
streamId: string;
name: string;
connectionId: string;
connection: {
connectionId: string,
creationTime: string,
data: string,
},
hasAudio: boolean,
hasVideo: boolean,
sessionId: string,
creationTime: number,
height: number,
width: number,
videoType: string, // 'camera' or 'screen'
},
jsonArrayOfReports: string
};
event = [
connectionId: string,
jsonArrayOfReports: string
];