Function to loop forever while in a Daily.co call, drawing bounding boxes around faces

checkForFaces()

async function checkForFaces() {
  try {
    if (callFrame.meetingState() !== 'joined-meeting') {
      return;
    }
    // remove all bounding boxes
    for (let el of document.getElementsByClassName('face-boxes')) {
      el.remove();
    }
    // detect faces
    let msg = await callFrame.detectAllFaces();
    // add bounding boxes
    iframeBounds = callFrame.iframe().getBoundingClientRect();
    for (let participant of Object.values(msg.faces)) {
      for (let face of participant) {
        let el = document.createElement('div');
        el.style.position = 'fixed';
        el.style.border = '2px dashed yellow';
        el.style.top = iframeBounds.top + face.viewportBox.top;
        el.style.left = iframeBounds.left + face.viewportBox.left;
        el.style.width = face.viewportBox.width;
        el.style.height = face.viewportBox.height;
        document.body.appendChild(el);
        el.className = 'face-boxes';
      }
    }
    setTimeout(checkForFaces, 100);
  } catch (e) {
    console.error(e);
  }
}