nimrodkerrett
/
eye-of-beholder


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bystander</title>
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="icon" href="/static/gfx/eye-horus.png">
</head>
<body data-bs-theme="dark">
  <div class="select" style="position:absolute; top:0;right:0; z-index:23">
    <label for="videoSource">Video source: </label><select id="videoSource"></select>
  </div>
  <div class="container-fluid text-center">
    <div class="row" style="background-image:url(/static/gfx/vest-funeral.jpg); backgroud-color:red; background-size:cover">
      <div class="col12" id="the-reporter" style="background-image:url(/static/gfx/anas-al-sharif.jpg); backgroud-color:red; background-size:cover">
        <video class="w-100" id="the-video" autoplay muted playsinline></video>
        </video>
      </div>
    </div>
  </div>
  <script src="/static/js/config.js"></script>
  <script src="/static/js/jquery-3.7.1.min.js"></script>
  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script>

  'use strict';

  var videoElement = document.querySelector('video');
  var videoSelect = document.querySelector('select#videoSource');

  videoSelect.onchange = getStream;

  getStream().then(getDevices).then(gotDevices);

  function getDevices() {
    // AFAICT in Safari this only gets default devices until gUM is called :/
    return navigator.mediaDevices.enumerateDevices();
  }

  function gotDevices(deviceInfos) {
    window.deviceInfos = deviceInfos; // make available to console
    console.log('Available input and output devices:', deviceInfos);
    for (const deviceInfo of deviceInfos) {
      const option = document.createElement('option');
      option.value = deviceInfo.deviceId;
      if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
        videoSelect.appendChild(option);
      }
    }
  }

  function getStream() {
    if (window.stream) {
      window.stream.getTracks().forEach(track => {
        track.stop();
      });
    }
    const videoSource = videoSelect.value;
    const constraints = {
      video: {deviceId: videoSource ? {exact: videoSource} : undefined}
    };
    return navigator.mediaDevices.getUserMedia(constraints).
    then(gotStream).catch(handleError);
  }

  function gotStream(stream) {
    window.stream = stream; // make stream available to console
    videoSelect.selectedIndex = [...videoSelect.options].
    findIndex(option => option.text === stream.getVideoTracks()[0].label);
    videoElement.srcObject = stream;
  }

  function handleError(error) {
    console.error('Error: ', error);
  }


  </script>
  <script>
  async function getDistance() {
    try {
      let response = await fetch("/d");
      let data = await response.json();
      return data.distance;
    } catch {
      return 0;
    }
  };
  async function updateDistance() {
    var dist = await getDistance();
    if (dist>NEO_FAR) {
      dist = NEO_FAR;
    }
    if (dist>NEO_MID) {
      var vidtransp = 1.0*(dist-NEO_MID)/(NEO_FAR-NEO_MID);
       $("#the-video").css("opacity",vidtransp);
       $("#the-reporter").css("opacity",1);
    } else {
      var reptransp = 1.0*(dist-NEO_NEAR)/(NEO_MID-NEO_NEAR);
      $("#the-video").css("opacity",0);
      $("#the-reporter").css("opacity",reptransp);
    }
  }
  window.update_interval = setInterval(updateDistance, 200);
  </script>
</body>
</html>