Add the JavaScript API
<head> <script src="https://api4.apidaze.io/javascript/releases/APIdaze-0.2.6.min.js"></script> </head>
Initialize the APIdaze client
Just create a CLIENT
instance with parameters.
var client = new APIdaze.CLIENT( { type: "webrtc", apiKey: "d3adb33f", onReady: function() { // Put your JavaScript code }, onDisconnected: function() { // Put your JavaScript code }, onAudiostats: function(event) { // Put your JavaScript code } });
type
: Specify the connection type (webrtc
,flash
orauto
, which defaults toflash
)debug
:true
orfalse
defaults tofalse
apiKey
: Your API keyonReady
: A JavaScript function that gets called when the connection is setup.onDisconnected
: A JavaScript function that gets called when the connection to the server gets down.onAudiostats
: A JavaScript function that gets called every five second during a call and contains information about the audio quality of the call. Theevent
parameter object structure is given hereafter as a sample
var eventsample = { type: "audiostats", data: { duration: "00:01:05", // Total call duration opackets: "3238 ", // Packets sent to server olostpackets: "0", // Packets sent to server and lost on the way ipackets: "2981 ", // Packets received from server ilostpackets: "0", // Packets sent from server and lost on the way rtt: "0.033000" // Round Trip Time to server in seconds (also called "ping time") } };
Place a call from your web pages
Just call the call
function on the previously created CLIENT
object. Add any parameter along with your listener functions that will let you handle in-call events. All the parameters set as the first argument will be forwarded to your ExternalScript
URL as HTTP parameters, therefore allowing to control the call.
In order to allow the call to the number 0123456789
, your ExternalScript
must return the following XML to APIdaze :
<document> <work> <dial> <number>0123456789</number> </dial> </work> </document>
In the following example, the number to call is sent in the my_parameter_that_contains_a_number
, and a string that identifies the web session is sent in the my_web_session_id
parameter.
var call = client.call( { my_parameter_that_contains_a_number: "0123456789", my_web_session_id: "3d1n1de32bge65hbokapdm" }, { onRinging: function() { // Put your JavaScript code }, onAnswer: function() { // Put your JavaScript code }, onHangup: function() { // Put your JavaScript code } } );
Object
: A set of attributs and values sent as HTTP parameters to yourExternalScript
URL.onRinging: function() {}
: A function that gets called when the remote end is ringing.onAnswer: function() {}
: A function that gets called when the call has been answered.
onHangup: function() {}
: A function that gets called when the call is hung up.
While in a call, you can call these two methods on the call
object to turn on and off your audio input.
call.stopLocalAudio(); // Stop sending your audio input call.startLocalAudio(); // Start sending your audio input
Join a conference room, add text and video chat to your web pages
Just call the joinroom
function on the previously created CLIENT
object. Add the room name your want to join along with your nickname for the room and listener functions as parameters. All the parameters set as the first argument will be forwarded to your ExternalScript
URL as HTTP parameters, therefore allowing to open access to the room.
When calling joinroom
, your ExternalScript
receives an HTTP request with the following parameters :
- roomName
- nickName
- …
In order to grant access to the room named myroom
, your ExternalScript
must return the following XML to APIdaze :
<document> <work> <conference>myroom</conference> </work> </document>
On the JavaScript side, here is what you would display :
var room = client.joinroom( { roomName: "myroom", // Mandatory nickName: "nick" // Mandatory }, { onConfbridgejoin: function(event) { console.log("Confbridge Join Event : " + event.data); // Put your JavaScript code }, onConfbridgeleave: function(event) { console.log("Confbridge Leave Event : " + event.data); // Put your JavaScript code }, onConfbridgemembers: function(event) { console.log("Members list : " + event.data); // Put your JavaScript code }, onConfbridgetalking: function(event) { var jsondata = JSON.parse(event.data); console.log("Channel " + jsondata.channel + " in room " + jsondata.room + " talking status : " + jsondata.talkingstatus); // Put your JavaScript code }, onConfbridgetextmessage: function(event) { console.log("Received text : " + event.data); // Put your JavaScript code } } );
Object
: A set of attributes and values sent as HTTP parameters to yourExternalScript
URL.nickName
androomName
are mandatory.onConfbridgejoin: function() {}
: A function that gets called when someone joins the room.onConfbridgeleave: function() {}
: A function that gets called when someone leaves the room.onConfbridgemembers: function() {}
: A function that gets called when you enter the room.onConfbridgetalking: function() {}
: A function that gets called when someone is talking.onConfbridgetextmessage: function() {}
: A function that gets called when receiving text from one of the room members. More on this function in the next section.
More on rooms : text and video chat
The room
JavaScript object brings methods and handlers that allows you to easily add text and video chat to your webpage.
Adding text chat
Sending a text message to the room members :
room.sendMessage("public", "anyone", "Hi everybody !");
Handling text messages from the room members is just a matter of putting your JavaScript code in the onConfbridgetextmessage
handler.
Join the room in video
Call the joinInVideo
method on an existing room to activate video.
room.joinInVideo( { videoContainerId: "remotevideos", // Optional mode: "sendrecv" // "sendrecv" or "recvonly". Defaults to "sendrecv". }, { onConfbridgevideomembers: function(event) { console.log("Video members: " + JSON.parse(event.data)); // Put your JavaScript code }, onConfbridgenewssrc: function(event) { console.log("New user in video bridge : " + event.data); // Put your JavaScript code }, onConfbridgeleftssrc: function(event) { console.log("User left video bridge : " + event.data); // Put your JavaScript code } } );
videoContainerId
: The DOM id of the element that contains the video elements in the HTML page. Will be created automatically if not set.mode
: Valid values are “sendrecv” (to send and receive video streams) and “recvonly” (won’t send your own video stream to the members). The default value is “sendrecv”.onConfbridgevideomembers: function() {}
: Returns the list of video peers in the room. This function is called when you join the room in video (after calling thejoinInVideo
method).onConfbridgenewssrc: function() {}
: A function that gets called when a new video stream coming from the room has been detected.onConfbridgeleftssrc: function() {}
: A function that gets called when a user stopped sending his video stream to the room.
While in a video call, you can call these two methods on the room object to turn on and off sending your video stream to the peers. Note that audio and text chat will still remain available.
room.stopLocalVideo(); // Stop sending your video stream to the room room.startLocalVideo(); // Start sending your video stream to the room