等待异步函数 +答案

【问题标题】：wait on async fuction +等待异步函数 +
【发布时间】：2020-06-26 08:30:38
【问题描述】：

我想获取最后一个 deviceId。

请在智能手机上尝试以下代码。 https://www.ofima.ch/file1.html

在函数“getConnectedDevices”中，变量 deviceId ok。但是外部返回的是一个承诺，而不是变量 deviceId。如何获取变量 deviceId ？

谢谢米歇尔

【问题讨论】：

你能把代码也贴出来

标签： asynchronous wait getusermedia deviceid

【解决方案1】：

解释：

您需要将警报包装在异步函数中并使用 await。还可以从您需要的承诺中获取价值 .then()。希望以下内容有所帮助。

原代码：

   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);

新代码：

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}`);
})();

以及在窗口中存储 deviceId 的快速技巧

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();

【讨论】：

嗨，马库斯，非常感谢您的帮助。我正在做的是一个移动网络应用程序。我的问题是相机的 deviceId 有一个全局变量。如果我理解正确，变量 deviceId 只能在“async()”函数的“内部”访问。但是如何在“async()”函数之后访问变量呢？我找到的唯一解决方案是使用“localStorage.setItem”保存值，然后使用“localstorage.getItem”读取值。问候米歇
了解，我在市场上有一些 Web AR 应用程序是移动优先的。我解决这个问题的方法是在 react 中使用 redux（触发操作以更改 deviceId 上的视图）或以角度订阅可观察的 Rxjs（在服务中）并使用全局状态管理应用程序流。 IE。在 deviceId 处于状态之前不要继续查看 y，返回查看 x 并获取 deviceId。你在使用框架吗？我可能会在下周推出一个演示，展示如何做到这一点。
作为快速破解在 (async() => { window.deviceId = await getConnectedDevices().then(); ... })();您应该能够在不使用本地存储的情况下在全球范围内看到它。它是一种 hack，但在过去很常见，在这里存储全局变量。但是要读取这个值，你需要一些 requestAnimFrame 循环来检查这个值，它将是未定义的并发布定义的异步调用。定义此值后，您可以继续您的应用流程。