3-whos-who-app/code/whoswho.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Celebrity Recognition</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <style>
    html,body {
    height: 95%;
    }
  .topHeader
    {
      background-color: #232f3e;
      padding: 10px;
      border-bottom: solid 1px #cacaca;
      color: white
    }
    .imgCell{
      width: 1200px;
    }
    .links{
      max-height: 100%;
      overflow-y: scroll;
    }
    .labels{
      margin: 5px;
      padding: 10px;
    }
    .lblButton{
      margin-top: 10px;
    }
    .mdbox{
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container-fluid h-100">
    <!--Top Header-->
    <div class="row topHeader">
      <div class="col-md-6">
        <h4>Who's Who in Media - Celebrity Recognition</h4>
      </div>
    </div>
    <div class="row h-100">
      <div class="col-sm-3 links">
        <br>
        <div class="row alert alert-secondary ml-1 mr-1">
          <div class="col-sm-12">
            <div id='celebrities-timeline-title'></div>
          </div>
        </div>
        <div id='celebrities-timeline'></div>
      </div>
      <div class="col-sm-9 links">
        <br>
        <div class="row alert alert-secondary ml-1 mr-1 align-middle">
          <div class="col-sm-12 align-middle">
            <button type="button" id="btnRecognizeCelebrities" onclick="recognizeCelebrities()" class="btn btn-primary">Recognize Celebrities</button>&nbsp;&nbsp;&nbsp;
            <span id="infoCard" class="align-middle"></span>
          </div>
        </div>
        <div class="row text-center">
          <div class="col-sm">
            <video id="player" width="1280" height="720" controls ontimeupdate="onVideoTimeUpdate()">
              <source src="media.mp4" type="video/mp4">
            Your browser does not support the video tag.
            </video>
            <br>
          </div>
        </div>
        <div class="row">
          <div class="col-sm links">
            <canvas id="canvas" width="1280px" height="720px" style="display: none" crossorigin="anonymous"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>

    //Update BaseURL with Invoke URL of your API Gateway Endpoint
    var apiGatewayBaseUrl = 'https://8kp7jh2rgi.execute-api.us-east-2.amazonaws.com/prod';

    var apiGatewayVideoUrl = apiGatewayBaseUrl + '/GetCelebrityRecognition?v=media.mp4';
    var apiGatewayImageUrl = apiGatewayBaseUrl + '/RecognizeCelebrities';

    var player = document.getElementById("player")
    var canvas = document.getElementById("canvas")
    var context=canvas.getContext('2d');
    var btnRecognize = document.getElementById("btnRecognizeCelebrities")
    var infoCard = document.getElementById("infoCard")

    var celebrities = {}
    celebrityArrival = []

    function onVideoTimeUpdate(){
      currentTime = player.currentTime*1000
      cinfo = ""
      if(celebrityArrival){
        for(ec in celebrityArrival){
          celeb = celebrityArrival[ec].Celebrity
          if(celeb.Timestamp < currentTime){
            cinfo += '[&nbsp;<a target="_blank" href="' + celeb.Celebrity.Urls + '">' + celeb.Celebrity.Name + '</a>&nbsp;]&nbsp;&nbsp;&nbsp;'
          }
          else{
            break;
          }
        }
        if(cinfo){
          cinfo  = 'Celebrity Arrival: ' + cinfo
        }
        infoCard.innerHTML = cinfo
      }
    }

    function recognizeCelebrities(){
      player.pause();
      btnRecognize.innerText = "Recognizing celebrities..."
      btnRecognize.disabled =true;

      context.fillRect(0,0,canvas.width,canvas.height);
      context.drawImage(player,0,0,canvas.width,canvas.height);

      var dataURL = canvas.toDataURL('image/jpeg', 1.0);
      dataURL = dataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "")

      $.ajax({
         type: "POST",
         url: apiGatewayImageUrl,
         data: dataURL
        }).then(function(data) {
          infoCard.innerHTML = "";
          var outputText = JSON.stringify(data).replace(/\\/g, "");
          var jsonResponse = JSON.parse(data.replace(/\\/g, ""));
          var displayURL = "";
          var cinfo = ""
          if(jsonResponse.CelebrityFaces && jsonResponse.CelebrityFaces.length!=0)
          {
            for (ef in jsonResponse.CelebrityFaces){
              celeb = jsonResponse.CelebrityFaces[ef]
              if(celeb.Name && celeb.Urls){
                  cinfo += '[&nbsp;<a target="_blank" href="' + celeb.Urls + '">' + celeb.Name + '</a>&nbsp;]&nbsp;&nbsp;&nbsp;'
              }
            }
            infoCard.innerHTML = cinfo
          }
          else{
            infoCard.innerHTML = "No celebrities detected";
          }
          btnRecognize.disabled =false;
          btnRecognize.innerText = "Recognize Celebrities"
        });
    }

    function setVideo(ts){
        player.currentTime = ts/1000;
        player.play()
    }

    function renderCelebrityTimeline(key, celebrityDetails, i){

      card = '<div class="card"> <div class="card-header" id="' + 'heading' + i + '"> <h5 class="mb-0"> '
      card += '<button class="btn btn-link collapsed" data-toggle="collapse"'
      card += ' data-target="#collapse' + i + '"'
      card += ' aria-expanded="false"'
      card += ' aria-controls="collapse' + i + '">'
      card += '<strong>' + celebrityDetails[0].Celebrity.Name + '</strong>'
      card += ' </button> </h5> </div>'
      card += ' <div id="collapse' + i + '" class="collapse"'
      card += ' aria-labelledby="heading' + i + '" data-parent="#accordion"> <div class="card-body">'
      card += '<strong>Fun Facts:</strong><br><a target="_blank" href="' + celebrityDetails[0].Celebrity.Urls[0] + '">' + celebrityDetails[0].Celebrity.Urls[0] + '<a><br><br><strong>Timeline:</strong><hr/>'

      pt = -1
      for(ei in celebrityDetails){
        ct = Math.round(celebrityDetails[ei].Timestamp/1000)
        if(pt !== ct){
          card += '<button type="button" class="btn btn-primary" style="width:100%" onclick="setVideo(' + celebrityDetails[ei].Timestamp + ');">' + Math.round(celebrityDetails[ei].Timestamp/1000) + '</button><br><br>'
        }
        pt = ct
      }

      card += ' </div> </div>'

      return card;
    }

    function parseCelebrities(){
      window.uniqueCelebs = {}
      for (ec in celebrities.Celebrities){
        c = celebrities.Celebrities[ec]
        if(c.Celebrity && c.Celebrity.Id){
          if(c.Celebrity.Id in uniqueCelebs){
            uniqueCelebs[c.Celebrity.Id].push(c)
          }
          else{
            uniqueCelebs[c.Celebrity.Id] = [c]
            celebrityArrival.push({'Timestamp' : c.Timestamp , 'Celebrity' : c })
          }
        }
      }
    }

    function renderTimeline(){

      parseCelebrities();

      $("#celebrities-timeline-title").html("<h5>Recognized Celebrities (" + Object.keys(uniqueCelebs).length + ")</h5>");

      timelineui = '<div id="accordion">'

      i = 0
      for(key in uniqueCelebs){
            timelineui += renderCelebrityTimeline(key, uniqueCelebs[key], i)
          i++;
      }

      timelineui += '</div>'

      $("#celebrities-timeline").html(timelineui);
    }

    function startApp(){

      $.ajax({
         type: "GET",
         url: apiGatewayVideoUrl,
        }).then(function(data) {
          celebrities = JSON.parse(data)
          if(celebrities.Celebrities && celebrities.Celebrities.length > 0){
              renderTimeline();
          }
        });
    }

    startApp()

    </script>
</body>
</html>