deeplearnjs-chromeextension-popup.js

console.log('popup ready!');

let startPredicting = false;
let times = 0;
let y = 0;

document.addEventListener('DOMContentLoaded', function() {

  let video = document.getElementById('video');
  let still = document.getElementById('still');
  let up = document.getElementById('up');
  let down = document.getElementById('down');
  let turnoffButton = document.getElementById('turnoff');
  let predict = document.getElementById('predict');

  let knn = new p5ml.KNNImageClassifier(modelLoaded);

  // Still 
  still.addEventListener('click', function() {
    knn.addImage(video, 1);
    times++;
  })
  // Up
  up.addEventListener('click', function() {
    knn.addImage(video, 2);
    times++;
  })
  // Down
  down.addEventListener('click', function() {
    knn.addImage(video, 3);
    times++;
  })

  // turnoffButton
  turnoffButton.addEventListener('click', function () {
    knn.addImage(video, 4);
    times++;
  })

  setInterval(function() {
    if (times > 10) {
      knn.predict(video, function(data) {
        if (data.classIndex == 1) {
          console.log('response', 'still');
        } else if (data.classIndex == 2) {
          chrome.runtime.sendMessage({ direction: "up" }, function (response) {
            console.log('response', 'up');
          });
        } else if (data.classIndex == 3) {
          chrome.runtime.sendMessage({ direction: "down" }, function (response) {
            console.log('response', 'down');
          });
        } else if (data.classIndex == 4) {
          chrome.runtime.sendMessage({ direction: "turn off" }, function (response) {
            console.log('response', 'turn off');
          });
        }

      });
    }
  }, 1500);

  navigator.getUserMedia = navigator.getUserMedia;

  if (navigator.getUserMedia) {
    navigator.getUserMedia({ audio: false, video: true },
      function(stream) {
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      },
      function(err) {
        console.log("The following error occurred: " + err.name);
      }
    );
  } else {
    console.log("getUserMedia not supported");
  }
})

function modelLoaded() {
  console.log('Model Loaded')
}