updates for HTTPS and new APIs

Minimal changes to get working again. Fix deprecated APIs.
benhansen-io · May 5, 2022 · f527a4a · f527a4a
1 parent 5a88504
commit f527a4a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ Baroquesize Yourself
 
 A simple web app created for my History of Creativity (BYU Tech202) class' end of semester project. The app allows the user to take a picture of themselves and adjust the image to make the picture look more like baroque style art. The app was demoed at the "creativity fair" where my partner created a photo booth with baroque era props. The original app would allow you to send a link to your picture via your email, but it has been modified to allow you to download the image directly instead.
 
-The app can be viewed at [http://benjamin-hansen.com/baroque](http://benjamin-hansen.com/baroque).
+The app can be viewed at [here](https://benhansenslc.github.io/Baroquesize-Yourself/).
 
 Currently this app only runs properly on Chrome version 25 or later. Access to the web cam is through WebRTC.
 

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link href='http://fonts.googleapis.com/css?family=Asul:400,700' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Asul:400,700' rel='stylesheet' type='text/css'>
     <title>Baroquesize Yourself</title>
     <link rel="stylesheet" type="text/css" href="index.css">
   </head>

diff --git a/index.js b/index.js
@@ -193,31 +193,19 @@
     $('#practical-instructions').html("Sorry. There was an error sending the email. Feel free to pull out your smartphone and take a picture of the screen.");
   }
 
-  // From:
-  // http://domainrange.blogspot.co.uk/2013/04/prompting-user-to-download-data-uri-and.html
   function downloadWithName(uri, name) {
-
-    function eventFire(el, etype){
-      if (el.fireEvent) {
-        (el.fireEvent('on' + etype));
-      } else {
-        var evObj = document.createEvent('Events');
-        evObj.initEvent(etype, true, false);
-        el.dispatchEvent(evObj);
-      }
-    }
-
     var link = document.createElement("a");
     link.download = name;
     link.href = uri;
-    eventFire(link, "click");
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    delete link;
   }
 
   $('#download').click(function () {
     var rawImageData = canvas.toDataURL("image/png")
     downloadWithName(rawImageData, "YourBaroqueSelf.png");
-    /*rawImageData = rawImageData.replace("image/png", "image/octet-stream")
-    document.location.href = rawImageData;*/
   });
 
   //Start the engines!

diff --git a/videostreamer.js b/videostreamer.js
@@ -10,31 +10,20 @@
     var streaming = false;
     var height = width / 4 * 3;
 
-    navigator.getMedia = ( navigator.getUserMedia ||
-      navigator.webkitGetUserMedia ||
-      navigator.mozGetUserMedia ||
-    navigator.msGetUserMedia);
-
-    navigator.getMedia(
+    navigator.mediaDevices.getUserMedia(
       {
         video: true,
         audio: false
-      },
-      function(stream) {
-        if (navigator.mozGetUserMedia) {
-          video.mozSrcObject = stream;
-        } else {
-          var vendorURL = window.URL || window.webkitURL;
-          video.src = vendorURL.createObjectURL(stream);
-        }
-        video.play();
-      },
-      function(err) {
-        console.log("An error occured! " + err);
-      }
-    );
+      }).then(function(stream) {
+        video.srcObject = stream;
+        video.onloadedmetadata = function() {
+          video.play();
+        };
+      }).catch(function(err) {
+        console.error("An error occured! " + err);
+      });
 
-    video.addEventListener('canplay', function(ev){
+    video.addEventListener('canplay', function(ev) {
       if (!streaming) {
         video.setAttribute('width', width);
         video.setAttribute('height', height);