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="Whiteboard">
    <title>Circuit JS SDK</title> 
    <script src="https://unpkg.com/circuit-sdk@1.2.5603/circuit.js"></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>
    <span id="remoteAudioState"></span>
    <div id="template"></div>
    <section id="main" style="display:none">
      <div>
        <input id="email" type="text" value="circuitsdk01@gmail.com">
        <button id="callButton">Call</button>
        <button id="hangupButton" hidden>Hangup</button>
      </div>
      <div>
        <button id="enableWhiteboardButton" hidden>Enable Whiteboard</button>
        <button id="disableWhiteboardButton" hidden>Disable Whiteboard</button>
      </div>
    </section>
    <section id="whiteboard" hidden>
      <div>
        <button id="addRectangleButton">Add rectangle</button>
        <button id="removeRectangleButton">Remove last added element</button>
        <button id="addCircleButton">Add circle</button>
      </div>
      <div>
        <button id="clearWhiteboardButton">Clear whiteboard</button>
        <button id="getWhiteboardButton">Get whiteboard</button><br>
        <input id="input" name="myFile" type="file">
        <button id="setWhiteboardBackgroundButton">Set whiteboard background</button><br>
        <button id="clearWhiteboardBackgroundButton">Clear whiteboard background</button><br>
        <button id="toggleWhiteboardOverlayButton">Toggle whiteboard overlay</button><br>
        <button id="undoWhiteboardButton">Undo whiteboard (2 steps)</button>
      </div>
      <div id="svg-container" style="background: lightcyan; width: 640px; height: 360px">
          <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"
               viewBox="0 0 16 9" preserveAspectRatio="none">
              <title>SVG Demo</title>
              <desc>Demo for supported formats</desc>
              <image id="background" xlink:href="https://brempert.files.wordpress.com/2014/08/m4-blueprint.jpg"
                     x="0" y="0" width="16" height="9"
                     preserveAspectRatio="none"></image>
          </svg>
      </div>
    </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: Whiteboard',
  description: 'Starts direct call and allows enabling the whiteboard. Use whiteboard background image and allow drawing SVG shapes.',
  apiMethods: [],
  prerequisites: [] 
});
​
// Local variables
let _callId;
let _lastXmlId;
​
// Login
logonButton.addEventListener('click', () => {
  client.logon()
  .then(user => print(`Successfully authenticated as ${user.displayName}`))
  .catch(print);
});
​
// Call & hangup
callButton.addEventListener('click', () => client.makeCall(email.value, {audio: true, video: false}, true).catch(print));
hangupButton.addEventListener('click', () => client.endCall(_callId).catch(print));
​
addRectangleButton.addEventListener('click', () => {
  client.addWhiteboardElement(_callId, '<rect style="fill: none; stroke: #ff0000; stroke-width: 1;" x="250" y="250" width="50" height="50"></rect>')
    .catch(print);
});
​
removeRectangleButton.addEventListener('click', () => {
  client.removeWhiteboardElement(_callId, _lastXmlId)
    .catch(print);
});
​
addCircleButton.addEventListener('click', () => {
  client.addWhiteboardElement(_callId, '<circle style="fill: none; stroke: #65ff11; stroke-width: 1;" cx="300" cy="300" r="100"></circle>')
    .catch(print);
});
​
clearWhiteboardButton.addEventListener('click', () => {
  client.clearWhiteboard(_callId)
    .catch(print);
});
​
getWhiteboardButton.addEventListener('click', () => {
  client.getWhiteboard(_callId)
    .then(board => print('Whiteboard data:', board))
    .catch(print);
});
​
setWhiteboardBackgroundButton.addEventListener('click', () => {
  var selectedFile = document.getElementById('input').files[0];
//  client.setWhiteboardBackground(_callId, 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Flag_of_Cuba.svg/2000px-Flag_of_Cuba.svg.png')
  client.setWhiteboardBackground(_callId, selectedFile)
    .then(() => print('Whiteboard background set'))
    .catch(print);
});
​
clearWhiteboardBackgroundButton.addEventListener('click', () => {
  client.clearWhiteboardBackground(_callId)
    .then(() => print('Whiteboard background cleared'))
    .catch(print);
});
​
toggleWhiteboardOverlayButton.addEventListener('click', () => {
  client.toggleWhiteboardOverlay(_callId)
    .then(() => print('Whiteboard overlay toggled'))
    .catch(print);
});
​
undoWhiteboardButton.addEventListener('click', () => {
  client.undoWhiteboard(_callId, 2)
    .then(() => print('Whiteboard undone with 2 steps globally'))
    .catch(print);
});
​
​
function showWhiteboard(show) {
  enableWhiteboardButton.hidden = show;
  disableWhiteboardButton.hidden = !show;
  whiteboard.hidden = !show;
}
​
// Event Listeners
enableWhiteboardButton.addEventListener('click', () =>
  client.enableWhiteboard(_callId, {width: 640, height: 480}).catch(print)
);
disableWhiteboardButton.addEventListener('click', () =>
  client.disableWhiteboard(_callId).catch(print)
);
​
client.addEventListener('callStatus', evt => {
  enableWhiteboardButton.hidden = !evt.call.isEstablished;
  hangupButton.hidden = !evt.call.isEstablished;
  callButton.hidden = !!evt.call.isEstablished;
  _callId = evt.call.callId;
});
​
client.addEventListener('callEnded', evt => {
  showWhiteboard(false);
  hangupButton.hidden = true;
  callButton.hidden = false;
  _callId = null;
});
​
client.addEventListener('whiteboardEnabled', evt => showWhiteboard(evt.data.enabled));
​
client.addEventListener('whiteboardElement', evt => {
  if (evt.action === 'added') {
    _lastXmlId = evt.element.elementId.xmlId;
  }
}); 
 
// Log all whiteboard events
['itemAdded', 'itemUpdated', 'whiteboardEnabled', 'whiteboardElement', 'whiteboardCleared'].forEach(e => {
    client.addEventListener(e, evt => print(`Received ${e} event:`, evt));
});
​
​
​
​
​
​
Output 300px

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

Dismiss x
public
Bin info
rogerupro
0viewers