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>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <p class="instructions">When prompted by your browser, please allow access to your camera and microphone so that you may select which devices to use.</p>
  
  <p>Audio Device: 
    <select name="audio-device" id="audio-device-dropdown" disabled>
      <option value="none">None</option>
    </select>
  </p>
  
  <p>Video Device: 
    <select name="video-device" id="video-device-dropdown" disabled>
      <option value="none">None</option>
    </select>
  </p>
  
  <div id="publisher-container"></div>
  
  <div id="dummy-publisher"></div>
​
</body>
</html>
 
.instructions {
  font-weight: bold;
}
​
#dummy-publisher {
  display: none;
}
 
​
// These values are typically loaded from a server
var apiKey = '854511';
var sessionId = '1_MX44NTQ1MTF-fjE0NDI5NzI1ODkzNjd-S0tnNGROOXBPeVIxSzVCRTdrczhjT2R6flB-';
var token = 'T1==cGFydG5lcl9pZD04NTQ1MTEmc2lnPWEwNWYzYmY2ZjE2NDMzOWE0NmZiZDJjMGM4OTEzNjExYTNiNzRiM2U6c2Vzc2lvbl9pZD0xX01YNDROVFExTVRGLWZqRTBOREk1TnpJMU9Ea3pOamQtUzB0bk5HUk9PWEJQZVZJeFN6VkNSVGRyY3poalQyUjZmbEItJmNyZWF0ZV90aW1lPTE0NDI5NzI1OTImbm9uY2U9MC45MTAzNjQ3MzUxNzMwNjE1JnJvbGU9cHVibGlzaGVyJmV4cGlyZV90aW1lPTE0NDMwNTg5OTI=';
​
var isSessionConnected = false;
var session, publisher;
var audioDeviceSelectElement, videoDeviceSelectElement;
​
// After page has finished loading:
ready(function() {
  
  // Save some references to DOM elements to be used later
  audioDeviceSelectElement = document.getElementById('audio-device-dropdown');
  videoDeviceSelectElement = document.getElementById('video-device-dropdown');
  
  // Initialize a dummy publisher, only for the reason that detecting devices requires the user to allow these permissions at least once.
  var dummyPublisher = OT.initPublisher('dummy-publisher', function(err) {
    if (err) {
      console.error(err.message);
      return alert('An error occurred. Please allow permissions. Reload to try again.');
    }
    
    // Destroy the dummy publisher and proceed with loading devices.
    dummyPublisher.destroy();
    loadDevices();
  });
  
  connectToSession();
  
});
​
function loadDevices() {
  OT.getDevices(function(err, devices) {
    if (err) {
      console.error(err.message);
      return alert('An error occurred. Could not read available devices. See console for more information.');
    }
    
    // Add the devices to the dropdowns
    devices.forEach(function(device) {
      var selectElement, optionElement, label;
      
      if (device.kind === 'audioInput') {
        selectElement = audioDeviceSelectElement;
      } else if (device.kind === 'videoInput') {
        selectElement = videoDeviceSelectElement;
      } else {
        return;
      }
      
      // Create an <option> element that represents this device
      optionElement = document.createElement('option');
      optionElement.value = device.deviceId;
      
      if (device.label !== '') {
        label = device.label;
      } else if (device.kind === 'audioInput') {
        label = 'Audio Device: ' + device.deviceId;
      } else if (device.kind === 'videoInput') {
        label = 'Video Device: ' + device.deviceId;
      } else {
        throw new Error('A logical error occurred while assigning a device label');
      }
      optionElement.appendChild(document.createTextNode(label));
      
      // Insert the <option> element in the appropriate dropdown
      selectElement.appendChild(optionElement);
    });
    
    // Enable controls and attach change handler
    audioDeviceSelectElement.addEventListener('change', publish);
    videoDeviceSelectElement.addEventListener('change', publish);
    audioDeviceSelectElement.disabled = false;
    videoDeviceSelectElement.disabled = false;
  });
}
​
function connectToSession() {
  session = OT.initSession(apiKey, sessionId);
  
  // You may want to attach other event handlers such as 'streamCreated' here
  
  session.on('sessionDisconnected', function() {
    session.off();
    isSessionConnected = false;
  });
  session.connect(token, function(err) {
    if (err) {
      console.error(err.message);
      return alert('An error occurred while connecting to the OpenTok session');
    }
    
    isSessionConnected = true;
  });
}
​
function publish() {
  var selectedAudioDevice, selectedVideoDevice;
  
  // Ensure session is connected before proceeding
  // NOTE: this will not handle queuing to wait until the session is connected in the case where publish() is called before the session is connected, but not again after its done connecting.
  if (isSessionConnected) {
    
    // Find existing publisher and remove it
    if (publisher) {
      session.unpublish(publisher);
      publisher.destroy();
      publisher = undefined;
    }
    
    // Find selected devices
    if (audioDeviceSelectElement.value === 'none') {
      selectedAudioDevice = null;
    } else {
      selectedAudioDevice = audioDeviceSelectElement.value;
    }
    if (videoDeviceSelectElement.value === 'none') {
      selectedVideoDevice = null;
    } else {
      selectedVideoDevice = videoDeviceSelectElement.value;
    }
  
    // Create a publisher with the selected devices
    publisher = OT.initPublisher('publisher-container', {
      audioSource: selectedAudioDevice,
      videoSource: selectedVideoDevice,
      insertMode: 'append'
    }, function(err) {
      if (err) {
        console.error(err.message);
        return alert('An error occurred while initializing the OpenTok publisher');
      }
      
      // Publish the new publisher to the session
      session.publish(publisher);
      console.log('Success');
    });
  }
}
​
​
// Utility functions
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
Output 300px

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

Dismiss x
public
Bin info
aoberoipro
0viewers