webduino/test.html at master · huukhoa1412/webduino · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!--
Author : ChungYi Fu (Kaohsiung, Taiwan)   2019/6/20 00:30
https://www.facebook.com/francefu

Try it!
https://fustyles.github.io/webduino/TensorFlow/ObjectDetection_video/ObjectDetection_video_coco-ssd.html

Google Script
https://github.com/fustyles/webduino/blob/gs/SendCapturedImageToGoogleDriveAndLinenotify_doPost.gs
You must allow anyone and anonymous to execute the google script.

How to enable WebGL in Chrome.
https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser
-->
<!DOCTYPE html>
<head>
  <title>Object Detection (coco-ssd)</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"> </script>
</head>
<body>
<video id="video" width="320" height="240" preload autoplay loop muted></video>
<canvas id="canvas"></canvas><br>

<form id="myForm" action="" method="post" target="sendcapturedimage">
<button onclick="SendCapturedImage();">Send Captured Image </button><input type="checkbox" id="myStartDetection" name="myStartDetection">Start Person Detection (15s)<br>
Google Script Url : <input type="text" id="myGoogleScript" name="myGoogleScript" value="https://script.google.com/macros/s/AKfycbyacDRLUMaOxoJ2IKR6_oqvah8-ma2YuwIW94q5Wn5ZxeHQsgw/exec"><br>
Google Folder Name : <input type="text" id="myFoldername" name="myFoldername" value="ESP32-CAM"><br>
Line Notify Token : <input type="text" id="myToken" name="myToken" value="lHaUbj8vv1ZCvoxzwhpoarxNYR4PKYIHtVOS72qS6Lt"><br>
<input type="text" id="myFilename" name="myFilename" style="display:none">
<textarea id="myFile" name="myFile" rows="10" cols="50" style="display:none"></textarea><br>
</form>
<iframe id="sendcapturedimage" name="sendcapturedimage" style="display:none"></iframe>

<div id="result" style="width:320px;color:red">Please wait for loading model.</div>

<script>
  var myForm = document.getElementById('myForm');
  var myStartDetection = document.getElementById('myStartDetection');
  var myGoogleScript = document.getElementById('myGoogleScript');
  var myFoldername = document.getElementById('myFoldername');
  var myFilename = document.getElementById('myFilename');
  var myFile = document.getElementById('myFile');
  var myToken = document.getElementById('myToken');
  var personState = false;

  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var result = document.getElementById('result');
  var Model;

  ObjectDetect();

  function ObjectDetect() {
    cocoSsd.load().then(cocoSsd_model => {
      Model = cocoSsd_model;
      //console.log(Model);
      result.innerHTML = "";
      setTimeout(function(){ startvideo(); }, 2000);
    });
  }

  function startvideo() {
    video.style.visibility="hidden";
    video.style.position="absolute";
    navigator.mediaDevices
      .getUserMedia({
        audio: false,
        video: {
          facingMode: "user",
          width: 320,
          height: 240
        }
      })
      .then(stream => {
        video.srcObject = stream
        video.onloadedmetadata = () => {
          video.play();
          canvas.setAttribute("width", video.width);
          canvas.setAttribute("height", video.height);
          setTimeout(function(){DetectVideo(); }, 100);
        }
      })
  }

  async function DetectVideo() {
    context.drawImage(video, 0, 0, video.width, video.height);
    await Model.detect(canvas).then(predictions => {
      result.innerHTML = "";
      //console.log('Predictions: ', predictions);
      if (predictions.length>0) {
        for (var i=0;i<predictions.length;i++) {
          const x = predictions[i].bbox[0];
          const y = predictions[i].bbox[1];
          const width = predictions[i].bbox[2];
          const height = predictions[i].bbox[3];
          context.lineWidth = "3";
          context.strokeStyle = "#00FFFF";
          context.beginPath();
          context.rect(x, y, width, height);
          context.stroke();
          context.lineWidth = "2";
          context.fillStyle = "red";
          context.font = "12px Arial";
          context.fillText(predictions[i].class, x, y);
          result.innerHTML+= "[ "+i+" ] "+predictions[i].class+", "+Math.round(predictions[i].score*100)+"%, "+Math.round(x)+", "+Math.round(y)+", "+Math.round(width)+", "+Math.round(height)+"<br>";
          if ((myStartDetection.checked)&&(personState == false)&&(predictions[i].class=="person")) {
            personState = true;
            SendCapturedImage();
            setTimeout(function(){ personState = false; }, 15000);
          }
        }
      }
      else
        result.innerHTML = "Unrecognizable";

      setTimeout(function(){DetectVideo(); }, 100);
    });
  }

  function SendCapturedImage() {
    // Upload captured image to Google Drive and send a line message to LineNotify.
    myForm.action = myGoogleScript.value;
    var date = new Date();
    myFilename.value = date.getFullYear()+"_"+(date.getMonth()+1)+"_"+date.getDate()+"_"+date.getHours()+"_"+date.getMinutes()+"_"+date.getSeconds()+".png";
    myFile.value = canvas.toDataURL();
    myForm.submit();
  }
</script>

</body>
</html>