Device Selection

The Webcaster API gives you the possibility to present all currently attached audio and video devices to your users. The API call to requrest the device list is getDevices().

You will receive the list of devices in the ReceivedDeviceList event. After that you can show this list to the user, so he can choose which devices he wants to be used for the Webcast.

Preparation

We will need two <select> tags in our HTML document, in order to display the attached audio & video devices in your HTML document. Also we will add a button to trigger the startPreview(previewConfig) call after we made our device selection in the UI and a video element to show the preview in.

// in your html body
<video id="video-preview" autoplay playsinline muted></video>

<select id="audio-device-list"></select>
<select id="video-device-list"></select>

<button id="start-preview-button" type="button">start preview</button>

Also we will create a Javascript function that populates above device selection lists later on.

// adds options to a select element
var createSelectOptions = function (elementId, devices) {

  var selectOptions = document.getElementById(elementId).options;

  // Add all devices by id and index
  for (var device of devices) {
    selectOptions[selectOptions.length] = new Option(device.id, device.index);
  }

};

Request and render devices

Next we will create an instance of the Webcaster API and request attached devices with the getDevices() call.

// create an instance of the API
var user = new window.nanowebrtc.user();

user.on('ReceivedDeviceList', function(event) {

  // device lists are arrays, received in event.data.devices
  var audioDevices = event.data.devices.audiodevices;
  var videoDevices = event.data.devices.videodevices;

  createSelectOptions('audio-device-list', audioDevices);
  createSelectOptions('video-device-list', videoDevices);

});

// request device list, will fire 'ReceivedDeviceList' event
user.getDevices();

Start the preview

Once a user has selected audio and video devices from the lists, the preview can be started.

// we will trigger the preview once the 'start-preview-button' has been clicked.
document.getElementById('start-preview-button').addEventListener('click', function() {

  // get the index of the selected audio device
  var audioDeviceList = document.getElementById('audio-device-list');
  var audioDeviceIndex = audioDeviceList.options[audioDeviceList.selectedIndex].value;

  // get the index of the selected video device
  var videoDeviceList = document.getElementById('video-device-list');
  var videoDeviceIndex = videoDeviceList.options[videoDeviceList.selectedIndex].value;

  var previewConfig = {
      audioDeviceConfig: {device: audioDeviceIndex},
      videoDeviceConfig: {device: videoDeviceIndex},
      elementId: 'video-preview'
  };

  user.startPreview(previewConfig);

});