Custom Overlays in Video SDK

overlays.js

function addCustomOverlaySupport(roomSession, rootElement) {
  let currLayout = null
  const overlays = {}

  rootElement.style.position = 'relative'

  function adjustOverlayPosition(overlayEl, memberId) {
    if (!currLayout) return

    const layer = currLayout.layers.find(lyr => lyr.member_id === memberId)
    if (!layer) return

    overlayEl.style.top = layer.y + '%'
    overlayEl.style.left = layer.x + '%'
    overlayEl.style.width = layer.width + '%'
    overlayEl.style.height = layer.height + '%'
  }

  roomSession.on("layout.changed", async (e) => {
    currLayout = e.layout
    for (const memberId in overlays) {
      adjustOverlayPosition(overlays[memberId], memberId)
    }
  });

  // FIXME: handle events for member.joined, updated, left, ...

  roomSession.overlays = {
    create(memberId) {
      const overlayEl = document.createElement('div')
      overlayEl.style.display = 'block'
      overlayEl.style.position = 'absolute'
      overlayEl.style.overflow = 'hidden'
      overlayEl.style.zIndex = 1
      adjustOverlayPosition(overlayEl, memberId)
      
      overlays[memberId] = overlayEl
      rootElement.appendChild(overlayEl)
      console.log("creating")
      return overlayEl
    },

    get(memberId) {
      return overlays[memberId]
    },

    remove(memberId) {
      overlays[memberId].remove()
      delete overlays[memberId]
    }
  }

  roomSession.overlays[Symbol.iterator] = Object.entries(overlays)[Symbol.iterator]
  roomSession.overlays.forEach = (e) => Object.entries(overlays).forEach(e)

  roomSession.memberAtCoordinates = (e) => {
    const {clientX, clientY} = e

    // Mouse coordinates relative to the video element, in percentage (0 to 100)
    const rect = rootElement.getBoundingClientRect();
    const x = 100 * (clientX - rect.left) / rect.width;
    const y = 100 * (clientY - rect.top) / rect.height;

    const layer = currLayout.layers.find(lyr => lyr.x < x && x < lyr.x + lyr.width && 
                                                lyr.y < y && y < lyr.y + lyr.height)
    if (!layer) return null
    if (!layer.member_id) return null
    return layer.member_id
  }
}