A single Clique Client instance is connected to a specific Clique user, so user_uuid and user_token parameters are required. You can get Clique user object via Clique-core REST API using your API key provided by Clique.

== Clique Client instance methods

=== createConference(options): Promise Creates a new conference and joins it. Returns a Promise. options - parameter: p2p, type: bool; determines whether your conference will be set up as peer to peer ( p2p ) or based on a Clique cloud server

cliqueClient.createConference({p2p: false})

=== joinConference(conference_id): Promise Joins a conference with a given conference_id. Returns a Promise

cliqueClient.joinConference('74416d26-fe68-4773-8e8f-307eb7eafd22')

=== localMute(conference_id) Mutes the user's microphone localy

cliqueClient.localMute('74416d26-fe68-4773-8e8f-307eb7eafd22')

=== localUnmute(conference_id) Unmutes the user's microphone localy

cliqueClient.localUnmute('74416d26-fe68-4773-8e8f-307eb7eafd22')

=== localVolume(conference_id, volume) Sets local volume level (from 0 to 100)

cliqueClient.localVolume('74416d26-fe68-4773-8e8f-307eb7eafd22', 50)

=== muteUser(user_sip_id) Mutes the user with a given user_sip_id; available for conference creator (moderator) only

cliqueClient.muteUser('6b673598-6bb7-4b36-b54f-5bec18443c19')

=== unmuteUser(user_sip_id) Unmutes the user with a given user_sip_id; available for conference creator (moderator) only

cliqueClient.unmuteUser('6b673598-6bb7-4b36-b54f-5bec18443c19')

=== recordingStart() Start recording process; available for conference creator (moderator) only

cliqueClient.recordingStart()

=== recordingStop() Stop recording process; available for conference creator (moderator) only

cliqueClient.recordingStop()

=== kickUser(user_sip_id) Kicks the user with a given user_sip_id out of the conference; available for conference creator (moderator) only

cliqueClient.kickUser('6b673598-6bb7-4b36-b54f-5bec18443c19')

=== dropCall(user_sip_id) Disconnects the phone call with a given user_sip_id

cliqueClient.dropCall('6b673598-6bb7-4b36-b54f-5bec18443c19')

=== lock(conference_id) Locks the given conference ( no new users can join ); available for conference creator (moderator) only

cliqueClient.lock('74416d26-fe68-4773-8e8f-307eb7eafd25')

=== unlock(conference_id) Unlocks the given conference ( allow new users to join ); available for conference creator (moderator) only

cliqueClient.unlock('74416d26-fe68-4773-8e8f-307eb7eafd25')

=== setgrace(conference_id, period) Sets a grace period for ending the conference. Period is a time delay in minutes of the conference destruction after the moderator leaves If period = 0, conference would not be destroyed after the moderator leaves.

cliqueClient.setgrace('74416d26-fe68-4773-8e8f-307eb7eafd25', 5)

=== closeConference(conference_id) Closes the user connection to the conference with a given conference_id

cliqueClient.closeConference('74416d26-fe68-4773-8e8f-307eb7eafd25')

=== getConfInfo(conference_id): Promise Gets a conference object from the Clique REST API. Returns a promise. Look up GET /conferences/:id method in Clique-core API docs for more info

cliqueClient.getConfInfo('74416d26-fe68-4773-8e8f-307eb7eafd25')

=== updateConfInfo(conference_id, data): Promise Updates a conference object by id. Returns a promise. Allowed props for edit

signout_url: String
start_time: String - Coneference start time in ISO 8601
meta: Object - custom cunference settings

cliqueClient.updateConfInfo('74416d26-fe68-4773-8e8f-307eb5eafd27', {meta: { custom_field: 'custom_value' }})

=== getConfSettings(conference_id): Promise Gets a conference settings object from the Clique REST API. Returns a promise. Look up /conferences/:id/settings method in Clique-core API docs for more info

cliqueClient.getConfSettings('74416d26-fe68-4773-8e8f-307eb7eafd25')

=== confUserList(conference_id): Promise Gets a hash map of users who are currently in the conference. Returns a promise. Look up /user-list-hash method in Clique-core API docs for more info.

cliqueClient.confUserList('74416d26-fe68-4773-8e8f-307eb7eafd25')

cliqueClient.on('start-talking', function(event) { console.log(event); })

.Events list (event_name{event_fields} - event_description):

init {} - confirms that the CliqueClient has been initialized
add-member {room, user} - user joined the conference with id 'room'
del-member {room, user_id} - user with id = user_id left the conference with id room
start-talking {room, user_id} - user with id = user_id started talking
stop-talking {room, user_id} - user with id = user_id stopped talking
mute-member {room, user_id} - user with id = user_id has been muted by the moderator
unmute-member {room, user_id} - user with id = user_id has been unmuted by the moderator
lock {room} - conference with a given conference_id has been locked by the moderator
unlock {room} - conference with a given conference_id has been unlocked by the moderator
kick-member {room, user_id} - user with id = user_id has been kicked by the moderator
conference-create {room} - conference with a given conference_id started
conference-destroy {room} - conference with target id ended
call-status-amd {room, user_id} - call answering machine detected
call-status {room, user_id, status} - call status changed
setgrace {room} - conference grace period time delay has been changed
start-recording {room} - conference recording started
stop-recording {room} - conference recording stopped
connected {} - triggered on websocket successful login
disconnected {} - triggered on websocket disconnect
room_join {room, user} - triggerd when the current user successfuly joined the conference with id = 'room'
room_leave {room, message, error} - triggered when the user has been disconnected from conference 'room'
error {code, error}

== Clique Client JS SDK Tutorial

This tutorial will show you how to build a sample conferencing application using Clique Client JS SDK.

Quickstart

For a quick start please follow these steps:

First, obtain an API key, Base url (API_KEY, BASE_URL) from Clique. At this point, Clique technical support will need to provide those to you

Keep your API_KEY secure and never share it with 3rd parties
Set up the view template (public/index.html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <title>Clique Conferencing Demo</title>
    </head>
    <body>
        <!-- Place your code here -->
    </body>
</html>

Next, you need to install all the client dependencies. You can use the bower package manager, npm or just copy-paste

NOTE: if bower is not initialized, please run the following commands:

npm i --save bower ./node_modules/.bin/bower init

Create .bowerrc file in the project root folder and then add this content to it:

{ "directory": "public/components" }

Install client side packages

./node_modules/.bin/bower install --save clique-api-client-js#2.2.3

Put this html markup into the public/index.html document:

Join Conference

Create Conference! Mute Hangup

Your ID

Member list

-----------------------------------

Add the following dependencies to the end of the public/index.html document:

<! Clique Client JS SDK -->

Next step is to implement the client script handler in the public/js/app.js file

( async ()=>{ // insert your code here })();

Set up some variables to define conference settings:

let conference, client, mute = false; const BASE_URL = '<BASE_URL>'; const API_KEY = '<API_KEY>'; const API_URL = BASE_URL + '/api/v2'; const WS_URL = BASE_URL + '/';

Get Clique User Info

const fetchData = { method: 'POST', headers: new Headers({ 'Authorization': 'Bearer ' + API_KEY, }), body: JSON.stringify({ display_name:'YourName', email: 'yourname@yourdomain.com' }), mode: 'cors', }; const data = await fetch(API_URL + '/users', fetchData); const userRes = await data.json(); const user = userRes.user;

Past some code to update elements on the page

const id = (id) => document.getElementById(id);

members = {};

const show_members = () => { var s = '

' + members[i].sip_id; } id('member_list').innerHTML = s; };

const set_members = argument => { members = new Object(); Object.assign(members, argument); show_members(); };
1. Create an instance of Clique API Client
client = new CliqueClient({ api_endpoint: API_URL, websocket_endpoint: WS_URL, user_token: user.token, user_uuid: user.uuid, trace_sip: false, });
1. We are almost done. Next few steps will deal with updating the conference properties
- Determine the User ID
id('id_profile').textContent = user.sip_id;
- Add createConference event handler
id('createConference') .addEventListener('click', async () => { conference = await client.createConference(); });
- Add handler to close the conference
id('hangup') .addEventListener('click', () => { client.closeConference(conference.id); set_members({}); });
- Add handler to mute/unmute the microphone
let elMute = id('mute'); elMute.addEventListener('click', e => { if(!mute) { client.localMute(conference.id); elMute.textContent = 'unmute'; elMute.classList.remove('btn-danger'); elMute.classList.add('btn-success'); mute = true; } else { client.localUnmute(conference.id); elMute.textContent = 'mute' elMute.classList.remove('btn-success'); elMute.classList.add('btn-danger'); mute = false; } });
- Add start/stop talking events watch, triggered when some conference participant started/stopped talking:
client.on('add-member', event => { members[event.user.sip_id] = event.user; show_members(); console.log('add-member', event); });

client.on('del-member', event => { console.log('del-member', event); delete members[event.user_id]; show_members(); });
1. We are done. You can now start your app, just open the index.html document in your browser.

FAQs

What is clique-api-client-js?

Is clique-api-client-js popular?

Is clique-api-client-js well maintained?

Package last updated on 19 Jan 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

clique-api-client-js

Clique JS Client SDK ( "Clique Client" ) is available via npm

npm install clique-api-client-js

or bower

bower install clique-api-client-js

If you use webpack, you can add Clique Client to your project as follows:

import CliqueClient from "clique-api-client-js";

Or just use a pre-built version (client.build.js). jQuery is required.

Here is an example of Clique Client instantiation: