Guest User

script.js

a guest
Apr 21st, 2021
115
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /////////////////////////////////////////////////////////////////////
  2. (function() {
  3.     var canvas = document.getElementById('canvas');
  4.     var context = canvas.getContext('2d');
  5.     var video = document.getElementById('videoElement');
  6.     /////////////////////////////////////////////////////////////////
  7.     if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) {
  8.               navigator.mediaDevices.getUserMedia({ video: true,
  9.                     audio:false })
  10.                 .then(function (stream) {
  11.                   video.srcObject = stream;
  12.                 })
  13.                 .catch(function (err) {
  14.                   console.log("Something went wrong!");
  15.                 });
  16.             }
  17.     ///////////////////////////////////////////////////////////////
  18.     video.addEventListener('play',function()
  19.                           {
  20.         draw(this, context,640,480);
  21.     },false);
  22.     ///////////////////////////////////////////////////////////////
  23.     async function draw(video,context, width, height){
  24.         context.drawImage(video,0,0,width,height);
  25.         const model = await handpose.load();
  26.         const predictions = await model.estimateHands(video);
  27.         console.log(predictions);
  28.         ///////////////////////////////////////////////////////////
  29.         if (predictions.length > 0){
  30.            for (let i = 0; i < predictions.length; i++) {
  31.             drawHand(predictions,context);
  32.             var probability = predictions[i].handInViewConfidence;
  33.             var prob = (probability*100).toPrecision(5).toString();
  34.             var text = "Confidence:"+prob+"%";
  35.             context.font = "16pt Comic Sans MS";
  36.             context.fillStyle = "#FF0000";
  37.             context.fillText(text,425,20);
  38.         }
  39.             //////////////////////////////////////////////////////
  40.            }
  41.         setTimeout(draw,250,video,context,width,height);
  42.         /////////////////////////////////////////////////////////
  43.     }
  44. })();
  45.  
  46. const fingerJoints = {
  47.     thumb: [0, 1, 2, 3, 4],
  48.     indexFinger: [0, 5, 6, 7, 8],
  49.     middleFinger: [0, 9, 10, 11, 12],
  50.     ringFinger: [0, 13, 14, 15, 16],
  51.     pinky: [0, 17, 18, 19, 20],
  52.   };
  53.  
  54.   // Infinity Gauntlet Style
  55.   const style = {
  56.     0: { color: "yellow", size: 10 },1: { color: "gold", size: 6 },2: { color: "green", size: 10 },3: { color: "gold", size: 6 },4: { color: "gold", size: 6 },
  57.     5: { color: "purple", size: 10 },6: { color: "gold", size: 6 },7: { color: "gold", size: 6 },8: { color: "gold", size: 6 },9: { color: "blue", size: 10 },
  58.     10: { color: "gold", size: 6 },11: { color: "gold", size: 6 },12: { color: "gold", size: 6 },13: { color: "red", size: 10 },14: { color: "gold", size: 6 },
  59.     15: { color: "gold", size: 6 },16: { color: "gold", size: 6 },17: { color: "orange", size: 10 },18: { color: "gold", size: 6 },
  60.     19: { color: "gold", size: 6 },20: { color: "gold", size: 6 },
  61.   };
  62.  
  63. const drawHand = (predictions, ctx) => {
  64.     // Check if we have predictions
  65.     if (predictions.length > 0) {
  66.       // Loop through each prediction
  67.       predictions.forEach((prediction) => {
  68.         // Grab landmarks
  69.         const landmarks = prediction.landmarks;
  70.  
  71.         // Loop through fingers
  72.         for (let j = 0; j < Object.keys(fingerJoints).length; j++) {
  73.           let finger = Object.keys(fingerJoints)[j];
  74.           //  Loop through pairs of joints
  75.           for (let k = 0; k < fingerJoints[finger].length - 1; k++) {
  76.             // Get pairs of joints
  77.             const firstJointIndex = fingerJoints[finger][k];
  78.             const secondJointIndex = fingerJoints[finger][k + 1];
  79.  
  80.             // Draw path
  81.             ctx.beginPath();
  82.             ctx.moveTo(
  83.               landmarks[firstJointIndex][0],
  84.               landmarks[firstJointIndex][1]
  85.             );
  86.             ctx.lineTo(
  87.               landmarks[secondJointIndex][0],
  88.               landmarks[secondJointIndex][1]
  89.             );
  90.             ctx.strokeStyle = "plum";
  91.             ctx.lineWidth = 4;
  92.             ctx.stroke();
  93.           }
  94.         }
  95.  
  96.         // Loop through landmarks and draw em
  97.         for (let i = 0; i < landmarks.length; i++) {
  98.           // Get x point
  99.           const x = landmarks[i][0];
  100.           // Get y point
  101.           const y = landmarks[i][1];
  102.           // Start drawing
  103.           ctx.beginPath();
  104.           ctx.arc(x, y, style[i]["size"], 0, 3 * Math.PI);
  105.           // Set line color
  106.           ctx.fillStyle = style[i]["color"];
  107.           ctx.fill();
  108.         }
  109.       });
  110.     }
  111.   };
RAW Paste Data