eaglelandsonce/TensorFlowJSClass

1const video = document.getElementById('webcam');2const liveView = document.getElementById('liveView');3const demosSection = document.getElementById('demos');4const enableWebcamButton = document.getElementById('webcamButton');5 6// Check if webcam access is supported.7function getUserMediaSupported() {8  return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);9}10 11// If webcam supported, add event listener to button for when user12// wants to activate it to call enableCam function which we will 13// define in the next step.14if (getUserMediaSupported()) {15  enableWebcamButton.addEventListener('click', enableCam);16} else {17  console.warn('getUserMedia() is not supported by your browser');18}19 20// Enable the live webcam view and start classification.21function enableCam(event) {22  // Only continue if the COCO-SSD has finished loading.23  if (!model) {24    console.warn('Model is not loaded yet!');25    return;26  }27  28  // Hide the button once clicked.29  event.target.classList.add('removed');  30  31  // getUsermedia parameters to force video but not audio.32  const constraints = {33    video: true34  };35 36  // Activate the webcam stream.37  navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {38    video.srcObject = stream;39    video.addEventListener('loadeddata', predictWebcam);40  });41}42 43// Store the resulting model in the global scope of our app.44let model = undefined;45 46// Load the COCO-SSD model.47cocoSsd.load().then(function(loadedModel) {48  model = loadedModel;49  console.log('COCO-SSD model loaded successfully');50  // Show demo section now model is ready to use.51  demosSection.classList.remove('invisible');52}).catch(function(error) {53  console.error('Failed to load COCO-SSD model', error);54});55 56let children = [];57 58function predictWebcam() {59  if (!model) {60    console.warn('Model is not available for prediction');61    return;62  }63 64  // Now let's start classifying a frame in the stream.65  model.detect(video).then(function(predictions) {66    // Remove any highlighting we did previous frame.67    for (let i = 0; i < children.length; i++) {68      liveView.removeChild(children[i]);69    }70    children.splice(0);71    72    // Now lets loop through predictions and draw them to the live view if73    // they have a high confidence score.74    for (let n = 0; n < predictions.length; n++) {75      // If we are over 66% sure we are sure we classified it right, draw it!76      if (predictions[n].score > 0.66) {77        const p = document.createElement('p');78        p.innerText = predictions[n].class  + ' - with ' 79            + Math.round(parseFloat(predictions[n].score) * 100) 80            + '% confidence.';81        p.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '82            + (predictions[n].bbox[1] - 10) + 'px; width: ' 83            + (predictions[n].bbox[2] - 10) + 'px;';84 85        const highlighter = document.createElement('div');86        highlighter.setAttribute('class', 'highlighter');87        highlighter.style = 'left: ' + predictions[n].bbox[0] + 'px; top: '88            + predictions[n].bbox[1] + 'px; width: ' 89            + predictions[n].bbox[2] + 'px; height: '90            + predictions[n].bbox[3] + 'px;';91 92        liveView.appendChild(highlighter);93        liveView.appendChild(p);94        children.push(highlighter);95        children.push(p);96      }97    }98    99    // Call this function again to keep predicting when the browser is ready.100    window.requestAnimationFrame(predictWebcam);101  }).catch(function(error) {102    console.error('Prediction error', error);103  });104}105