<?
// PHP
ini_set("display_errors", 1);
error_reporting(E_ALL);

$config = json_decode(file_get_contents("../config.json"), true);
$cameras = $config["cameras"];
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Capture</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0 25px;
    }

    .button {
      display: block;
      text-decoration: none;
      align-items: center;
      appearance: none;
      background-color: #fff;
      border-radius: 24px;
      border-style: none;
      box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
      box-sizing: border-box;
      color: #3c4043;
      cursor: pointer;
      display: inline-flex;
      fill: currentcolor;
      font-size: 18px;
      font-weight: 500;
      justify-content: center;
      letter-spacing: .25px;
      line-height: normal;
      width: calc(100% - 50px);
      overflow: visible;
      padding: 20px;
      position: relative;
      text-align: center;
      text-transform: none;
      transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      will-change: transform,opacity;
      z-index: 0;
      position: fixed;
      bottom: 25px;
      left: 25px;
      right: 25px;
      font-weight: bold;
    }

    .button:hover {
      background: #F6F9FE;
      color: #174ea6;
    }

    .button:active {
      box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
      outline: none;
    }

    .button:focus {
      outline: none;
      border: 2px solid #4285f4;
    }

    .button:not(:disabled) {
      box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }

    .button:not(:disabled):hover {
      box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
    }

    .button:not(:disabled):focus {
      box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }

    .button:not(:disabled):active {
      box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
    }

    .button:disabled {
      box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }
    
    .camera {
      width: 49%; 
      margin: 0 0.5%;
      background: rgba(255,255,255,0.9);
      border-radius: 24px;
      float: left;
    }
    .camera .camera-inner {
      padding: 5px 25px 25px;
    }
    
    .camera .camera-inner img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <h1>Capture</h1>
  
  <h3>Cameras</h3>
  <?
  foreach($cameras as $camera) {
    echo '<div class="camera"><div class="camera-inner">';
      echo '<h3>'.$camera["name"].' <small style="float: right; font-weight: normal">'.$camera["ip"].'</small></h3>';
      if(!empty($_GET["capture"])) {
        $url = "http://$camera[ip]/ISAPI/Streaming/channels/101/picture";

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_DIGEST);
        curl_setopt($ch, CURLOPT_USERPWD, "$camera[username]:$camera[password]");
        if(!$data = curl_exec($ch)) $err = curl_error($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        curl_close($ch);
        if ($httpCode != 200) {
          echo '<div style="color: red;">Failed to fetch URL <b>'.$url.'</b> ('.$err.')</div>';
        } else {
          echo '<img src="data:image/jpeg;base64,'.base64_encode($data).'">';
        }
      }
  echo '</div></div>';
  }?>
  
  <a class="button" href="?capture=1">Capture images</a>
</body>
</html>