wait on async fuction +

Question

I want to get the last deviceId.

Please try the following code on a smartphone. https://www.ofima.ch/file1.html

Inside the function "getConnectedDevices" the variable deviceId ok. But outside is returned a promise and not the variable deviceId. How can I get the variable deviceId ?

Thanks Miche

Answer 1

Explanation:

You need to wrap your alert in an async function and use await. Also to take the value from the promise you needed .then(). Hope the below helps.

Original code:

   async function getConnectedDevices() {
  var index;
  const devices = await navigator.mediaDevices.enumerateDevices();

  for (var i=0; i<devices.length; i++) {
     if (devices[i].kind == "videoinput") {
        index = i;
     }
  }

  var deviceId = devices[index].deviceId;
  alert('deviceId is ok: ' + deviceId);
   
  return (deviceId);
   }

   const deviceId = getConnectedDevices();

   alert('deviceId is not defined, why ?: ' + deviceId);

New code:

async function getConnectedDevices() {
  let index;
  const devices = await navigator.mediaDevices.enumerateDevices();

  for (let i=0; i < devices.length; i++) {
    console.debug(devices[i]);
    if (devices[i].kind == "videoinput") {
      index = i;
    }
  }

  console.log('deviceId is ok: ',  devices[index]);
  return devices[index].deviceId;
}


(async() => {
  const deviceId = await getConnectedDevices().then();
  alert(`deviceId: ${deviceId}`);
})();

And a quick hack for storing the deviceId in the window

console.log('globalDeviceId should be undefined', window.globalDeviceObj);

async function getConnectedDevices() {
  let index;
  const devices = await navigator.mediaDevices.enumerateDevices();

  for (let i = 0; i < devices.length; i++) {
    console.debug(devices[i]);
    if (devices[i].kind == "videoinput") {
      index = i;
    }
  }

  console.log('deviceId is ok', devices[index]);
  return devices[index];
}


function getDeviceId() {
  (async() => {
    window.globalDeviceObj = await getConnectedDevices().then();
    console.log(`globalDeviceId set: ${JSON.stringify(window.globalDeviceObj)}`);
  })();
}

function tick() {
  if(typeof window.globalDeviceObj === 'undefined'){
    requestAnimationFrame(tick);
  }else {
    alert(`globalDeviceId get: ${JSON.stringify(window.globalDeviceObj)}, with deviceId: ${(window.globalDeviceObj.deviceId)}`)
  }
}

function init() {
  tick();
  getDeviceId();
}

init();