Refactor code structure for improved readability and maintainability

themes/js/camupload.js

@@ -0,0 +1,53 @@
+window.addEventListener("load", function(){
+  // [1] GET ALL THE HTML ELEMENTS
+  var video = document.getElementById("vid-show"),
+      canvas = document.getElementById("vid-canvas"),
+      take = document.getElementById("vid-take");
+  var mediaDevices = navigator.mediaDevices;
+  // [2] ASK FOR USER PERMISSION TO ACCESS CAMERA
+  // WILL FAIL IF NO CAMERA IS ATTACHED TO COMPUTER
+  navigator.mediaDevices.getUserMedia({ video : true })
+  .then(function(stream) {
+    // [3] SHOW VIDEO STREAM ON VIDEO TAG
+    video.srcObject = stream;
+    video.play();
+
+    // [4] WHEN WE CLICK ON "TAKE PHOTO" BUTTON
+    take.addEventListener("click", function(){
+      // Create snapshot from video
+      var draw = document.createElement("canvas");
+      draw.width = video.videoWidth;
+      draw.height = video.videoHeight;
+      var context2D = draw.getContext("2d");
+      context2D.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+      // Upload to server
+      draw.toBlob(function(blob){
+        var data = new FormData();
+        data.append('upimage', blob);
+        var xhr = new XMLHttpRequest();
+        xhr.open('POST', "lib/camupload.php", true);
+        xhr.onload = function(){
+          if (xhr.status==403 || xhr.status==404) {
+            alert("ERROR LOADING 3-UPLOAD.PHP");
+          } else {
+              var sp=this.response.split('|');
+              if(sp[0]=='ok')
+              {
+                  fn_setImage(sp[1]);    
+              }
+              else
+              {
+                  alert(sp[1]);
+              }
+              
+            //alert(this.response);
+          }
+        };
+        xhr.send(data);
+      });
+    });
+  })
+  .catch(function(err) {
+    document.getElementById("vid-controls").innerHTML = err;
+  });
+});