Input Device Selection

Overview

Before joining a video channel you have the option of selecting which video input (camera) and audio input device (microphone) to use. If you do not specify an input devices the operating system's default devices will be used.

In order to get the current list of available video devices you can use the getMediaList() method.

Example Device List Retrieval

let devices = await aloVideo.getMediaList();
const listElement = document.querySelector('select#availableCameras');
listElement.innerText = null;

Object.values(devices[AloVideoSDK.MEDIA_DEVICE_LIST_VIDEO_INPUT]).forEach(device => {
  const inputOption = document.createElement('option');
  inputOption.value = device.id;
  inputOption.label = device.label;
  inputOption.innerText = device.label;
  listElement.add(inputOption);
});

Example getMediaList() response

{
    audioinput: {
        default: {…}, 
        60e23d3fe7f068be51ebe36890a9b1bbd7c522dc2b698b91b00828079177ed93: {…}, 
        d6c3b4a5f1221974561008c5c3ddc6b3768389c91fdd396a420ffc22a53deec3: {…}
    },
    audiooutput: {
        default: {…}, 
        698fb0e5ea599bd95e11c5636e7e651602046620ccfba4eb8a07173d91268884: {…}, 
        1fd3430ccd0dea76bba3f824ffd2b73073594e9cc395b6f2bfa36b065e476383: {…}
    },
    videoinput: {
        c72ee2c098ce749a5245ebbfd0560349c48929b42f89f7a3a3969ba1b5087517: {…}, 
        99ee472997a484234acd080b1153c88bd3a80dba716179a0c90af1c60de83685: {…}
    }
}

When you instantiate the AloVideo object you can specify the input device id on the videoInputDeviceId property. See: Instantiating Video Service

Device List Changes

You should also add a listener for the onDeviceListUpdate event. If the list of available input devices changes you can update your input device selection.

Example onDeviceListUpdate event payload:

{
  detail : {
      99ee472997a484234acd080b1153c88bd3a80dba716179a0c90af1c60de83685: {
        id: "99ee472997a484234acd080b1153c88bd3a80dba716179a0c90af1c60de83685",
        label: "Logitech HD Webcam C615 (046d:082c)",
        type: "videoinput"
      },
      c72ee2c098ce749a5245ebbfd0560349c48929b42f89f7a3a3969ba1b5087517: {
        id: "c72ee2c098ce749a5245ebbfd0560349c48929b42f89f7a3a3969ba1b5087517",
        label: "Some other camera,
        type: "videoinput"
      }
  }
}

Last updated

Logo

© Copyright 2024 ALO.ai, Inc. • All Rights Reserved