JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  Close the lid of you macbook while connected to an external monitor.<br>
  See a new event is fired.<br>
  Try to click the buttons, see how they're correctly blocked.
</p>
<iframe sandbox="allow-scripts" srcdoc="
<button>request camera</button>
<button>request microphone</button><br>
<script>
  navigator.mediaDevices.ondevicechange = e => document.body.append('fired - ')
  const [cam, mic] = document.querySelectorAll('button');
  cam.onclick = e => navigator.mediaDevices.getUserMedia({ video: true });
  mic.onclick = e => navigator.mediaDevices.getUserMedia({ audio: true });
</script>
"></iframe>