/*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: Select media devices for call',

  description: 'Set the mic, camera, headset, etc for the call. Also supports changing the device during the call.',

  apiMethods: ['makeCall', 'endCall', 'setMediaDevices'],

  prerequisites: [] 

});

​

// Local variables

var _localUser;

var _call;

​

//Circuit.logger.setLevel(Circuit.Enums.LogLevel.Debug);

​

navigator.mediaDevices.enumerateDevices().then(devices => {

  devices.filter(d => d.kind === 'audioinput').forEach(d => {

    let opt = document.createElement('option');

    opt.value = d.deviceId;

    opt.innerHTML = d.label;

    recordingDevices.appendChild(opt);

  });

  recordingDevices.selectedIndex = 0;

  devices.filter(d => d.kind === 'videoinput').forEach(d => {

    let opt = document.createElement('option');

    opt.value = d.deviceId;

    opt.innerHTML = d.label;

    videoDevices.appendChild(opt);

  });

  videoDevices.selectedIndex = 0;

  devices.filter(d => d.kind === 'audiooutput').forEach(d => {

    let opt = document.createElement('option');

    opt.value = d.deviceId;

    opt.innerHTML = d.label;

    playbackDevices.appendChild(opt);

  });

  playbackDevices.selectedIndex = 0;

​

  devices.filter(d => d.kind === 'audiooutput').forEach(d => {

    let opt = document.createElement('option');

    opt.value = d.deviceId;

    opt.innerHTML = d.label;

    ringingDevices.appendChild(opt);

  });

  ringingDevices.selectedIndex = 0;

});

​

function selectRecordingDevice() {

  print(`Selected recording device is: ${recordingDevices.options[recordingDevices.selectedIndex].text}`);

  if (client.setMediaDevices) {

    client.setMediaDevices({recording: recordingDevices.options[recordingDevices.selectedIndex].value});

  } else {

    Circuit.RtcSessionController.recordingDevices = [{

      id: audioDevices.options[playbackDevices.selectedIndex].value

    }];

  }

}

​

function selectVideoDevice() {

  print(`Selected video device is: ${videoDevices.options[videoDevices.selectedIndex].text}`);

  if (client.setMediaDevices) {

    client.setMediaDevices({video: videoDevices.options[videoDevices.selectedIndex].value});

  } else {

    Circuit.RtcSessionController.videoDevices = [{

     id: videoDevices.options[videoDevices.selectedIndex].value

    }];

  }

}

​

function selectPlaybackDevice() {

  print(`Selected playback device is: ${playbackDevices.options[playbackDevices.selectedIndex].text}`);

  if (client.setMediaDevices) {

    client.setMediaDevices({playback: playbackDevices.options[playbackDevices.selectedIndex].value});

  } else {

    Circuit.RtcSessionController.playbackDevices = [{

     id: playbackDevices.options[playbackDevices.selectedIndex].value

    }];

  }

}

​

function selectRingingDevice() {

  print(`Selected ringing device is: ${ringingDevices.options[ringingDevices.selectedIndex].text}`);

  if (client.setMediaDevices) {

    client.setMediaDevices({ringing: ringingDevices.options[ringingDevices.selectedIndex].value});

  } else {

    Circuit.RtcSessionController.ringingDevices = [{

     id: ringingDevices.options[ringingDevices.selectedIndex].value

    }];

  }

}

​

logonButton.addEventListener('click', () => {

  !_localUser && addClientEventListeners();

​

  client.logon()

  .then(user => {

    print(`Successfully authenticated as ${user.displayName}`)

    _localUser = user;

  })

  .catch(err => {

    print(err);

    client.removeAllListeners();

  });

});

​

logoutButton.addEventListener('click', () => client.logout().catch(print));

​

function resetCallUI() {

  callState.textContent = '';

  media.textContent = '';

  callId.textContent = '';

  convId.textContent = '';

  callButton.style.display = '';

  endCallButton.style.display = 'none';

  localVideo.srcObject = null;

  remoteVideo.srcObject = null;

  remoteAudio.srcObject = null;

  videoContainer.style.display = 'none';

}

​

function setCallUI(call) {

  _call = call;

  convId.textContent = _call.convId;

  callState.textContent = _call.state;

  callId.textContent = _call.callId;

  media.textContent = (_call.activeMediaType.audio ? 'audio' : '') + (_call.activeMediaType.video ? '+video' : '');

  callButton.style.display = 'none';

  endCallButton.style.display = '';

  // Set local video stream

  localVideo.srcObject = _call.localVideo;

  // Enable video checkbox

  if (_call.isEstablished) {

    remoteAudio.srcObject = _call.remoteAudioStream;

    // Set remote video stream

    if (_call.participants && _call.participants[0] && remoteVideo.srcObject != _call.participants[0].videoStream) {

      remoteVideo.srcObject = _call.participants[0].videoStream;

    }

  }

  videoContainer.style.display = _call.localMediaType.video || _call.participants.some(p => p.videoStream) ? '' : 'none'; 

}

​

function addClientEventListeners() {

  client.addEventListener('connectionStateChanged', evt => {

    logonState.textContent = evt.state;

  });

  client.addEventListener('callStatus', evt => { 

    if (_call && _call.callId === evt.call.callId) {

      print('Received callStatus event - call = ', evt.call);

      setCallUI(evt.call);

    }

  });

  client.addEventListener('callEnded', evt => {

    if (_call && _call.callId === evt.call.callId) {

      print('Received callEnded event - call = ', evt.call);

      _call = null;

      resetCallUI();

    }

  });

}

​

function call() {

  if (_call) {

    return;

  }

  if (!client || !_localUser) { return alert('Caller is not logged in'); }

  if (!peerUser.value) { return alert('Callee email missing'); }

  var mediaType = {audio: true, video: videoDevices.selectedIndex >= 0};

  client.makeCall(peerUser.value, mediaType)

    .then(setCallUI)

    .catch(err => {

      alert('Error initiating a call with ' + peerUser.value + '. ' + err);

      print(err);

    });

}

​

function endCall() {

  if (_call) {

    client.endCall(_call.callId).then(() => {

      print('Successfully ended call');

      _call = null;

      resetCallUI();

    });

  }

}

​

​