{% extends "analysis.html" %}


{% block head %}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="_static/databench.css?v={{databench_version}}">
{% end %}


{% block analysis %}
<div style="position:relative;">
  <div id="capture">
    <video style="width:50px; position:absolute;" controls autoplay muted playsinline></video>
    <canvas style="display: none" width={{int(640 * resolution)}} height={{int(480 * resolution)}}></canvas>
    <button style="position:absolute; bottom:2px; left:2px;" class="nextCamera"><i class="fas fa-video"></i></button>
  </div>
  <div id="visualization">
    <canvas style="max-width:100%; max-height:98vh;" width=640 height=480></canvas>
  </div>
</div>

<div style="font-size: 200%">
  FPS = <em><span id="fps">0</span></em>
</div>
{% end %}


{% block log %}
{% end %}


{% block footer %}
<a href="//www.epfl.ch/about/overview/overview/regulations-and-guidelines/">EPFL Legal</a>

<script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
<script src="analysis.js?v={{version}}"></script>

{% if google_analytics %}
<script async="" src="https://www.googletagmanager.com/gtag/js?id={{google_analytics}}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{google_analytics}}', { 'anonymize_ip': true });
</script>
{% end %}

{% end %}