<!DOCTYPE html>
<html>
<body>
<p id='location'></p>
<div id='log'></div>
<script>
  document.querySelector('#location').innerHTML = window.origin;
  let received = new Map();
  window.onmessage = (e) => {
    let msg = e.data + ' (from ' + e.origin + ')';
    document.querySelector('#log').innerHTML += '<p>' + msg + '<p>';
    if (e.data.hasOwnProperty('id')) {
      e.source.postMessage(
        received.get(e.data.id) ? 'RECEIVED' : 'NOT_RECEIVED', '*');
      return;
    }
    if (e.data.toString() == '[object EncodedVideoChunk]') {
      received.set(e.data.timestamp, e.data);
    }
  };
</script>
</body>
</html>