index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Face recognition</title>
    <link rel="stylesheet" href="main.css">
    <script src="render.js"></script>
  </head>
  <body onload="readDirectory()">
    <div class="app">
      <div class="header">
        <div class="logo-wrap">
          <p><span class="logo">FFC - Face recognition from camera</span></p>
        </div>
      </div>
      <div class="main">
        <div class="main-wrap">
          <div class="video-menu">
            <div class="setup-menu">
              <div class="p-left">
                <span class="lbl">Изображение с видеокамеры</span>
              </div>
              <div class="p-rigth">
                <button class="btn start" type="button" onclick="startVideo()" id="startAndStop"><span class="text">Start</span></button>
              </div>
          </div>
          <div class="video-wrap mrg-1">
            <canvas id="video-flow"></canvas>
          </div>
          <div class="setup-menu">
            <div class="p-left">
              <input  type="file" webkitdirectory  id="setupDir" onchange="setupDirectory()" value="Установить директорию"/>
            </div>
            <div class="p-rigth">
              <button class="btn start" type="button" id="saveImage" onclick="saveImage()" disabled><span class="text">Сохранить</span></button>
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="footer">
        <div class="copyrigth-wrap">
          <p><span class="copyrigth">Saimon Shaplygin © 2018</span></p>
        </div>
      </div>
    </div>
  </body>
</html>