Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Join a conference on a different device">
    <title>Circuit JS SDK</title>
    <script src="https://unpkg.com/circuit-sdk@beta"></script>
    <script src="https://rawgit.com/circuit/js-sdk/master/jsbin-template.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/circuit/js-sdk/master/jsbin-template.css">
  </head>
  <body>
    <div id="template"></div>
    <section id="main" style="display:none">
      <div><button id="findCalls">1. Find conferences to join</button></div>
      <div><select id="callList" size="5" style="width:300px"></select></div>
      <div><button id="findDevices">2. Find devices</button></div>
      <div><select id="devicesList" size="5" style="width:300px"></select></div>
      <button id="join">3. Join conference</button>
    </section>
    <audio id="remoteAudio" autoplay="autoplay"></audio>
</body>
</html>
​
 
/*jshint esnext: true */
​
// Create client instance
const client = new Circuit.Client({
  domain: jsBinTpl.domain,       // read domain from url
  client_id: jsBinTpl.client_id, // get client_id for domain
  scope: 'ALL'
});
​
// Template for Circuit JSBin examples. Builds generic part of page incl. login button.
const {logonButton, logoutButton, print} = jsBinTpl.init(client, template, {
  title: 'Circuit JS SDK: Join a conference on a different device',
  description: `Find started conferences in conversations user is a member of and list them. Then allow user to join one of the conferences on another of the user's devices.`,
  apiMethods: ['joinConference', 'getStartedCalls', 'getDevices', 'getConversationById', 'Injectors.conversationInjector'],
  prerequisites: ['n/a']
});
​
// Local variables
let _localCallId;
​
//Circuit.logger.setLevel(Circuit.Enums.LogLevel.Debug)
​
logonButton.addEventListener('click', () => {
  client.logon()
  .then(user => {
    print(`Successfully authenticated as ${user.displayName}`);
    callList.innerHTML = '';
    devicesList.innerHTML = '';
    _localCallId = null;
  })
  .catch(print);
});
​
logoutButton.addEventListener('click', () => {
  client.logout()
  .catch(print);
});
​
// Lookup the conversations for the calls to get their title
function lookupConversations(calls) {
  let promises = [];
  calls.forEach(call => {
    promises.push(client.getConversationById(call.convId));
  });
  return Promise.all(promises)
  .then(res => {
    return res.map((res, idx) => {
      return {title: res.title, callId: calls[idx].callId}
    });
  });
}
​
// Find calls to join
findCalls.addEventListener('click', () => {
  callList.innerHTML = '';
  client.getStartedCalls()
  .then(lookupConversations)
  .then(calls => {
    calls.forEach(c => {
      let opt = document.createElement('option');
      opt.value = c.callId;
      opt.innerHTML = c.title;
      callList.appendChild(opt);
    });
  })
});
​
​
// Find devices
findDevices.addEventListener('click', () => {
  devicesList.innerHTML = '';
  client.getDevices()
  .then(devices => {
    devices.forEach(d => {
      let opt = document.createElement('option');
      opt.value = d.clientId;
      opt.innerHTML = d.clientInfo.deviceType + ', ' + d.clientInfo.manufacturer + ', ' + d.clientInfo.osVersion;
      devicesList.appendChild(opt);
      if (d.clientId === client.loggedOnUser.clientId) {
        opt.innerHTML = 'This SDK app';
      }
    });
  })
});
​
// Join
join.addEventListener('click', () => {
  client.joinConference(callList.value, {audio: true}, devicesList.value)
  .then(callId => {
    _localCallId = callId;
    print(`Joining`);
  })
  .catch(print)
});
​
// Listen for callStatus events to set the remoteAudioStream for local joining
client.addEventListener('callStatus', evt => {
  if (_localCallId === evt.call.callId && remoteAudio.srcObject !== evt.call.remoteAudioStream) {
    remoteAudio.srcObject = evt.call.remoteAudioStream; 
  }
});
​
// Set a title on all group conversations
Circuit.Injectors.conversationInjector = conv => {
  if (conv.type !== Circuit.Constants.ConversationType.DIRECT) {
    conv.title = conv.topic || conv.topicPlaceholder || 'unknown';
  }
}
​
// Listen for any event
Circuit.supportedEvents && Circuit.supportedEvents.forEach(e => {
    client.addEventListener(e, evt => print(`Received ${e} event:`, evt));
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rogerupro
0viewers