Support Safari 12.1, fix canvas leak, and improve recognition

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

On Safari 12 (and indeed later verisons of other browsers), the `video.src =
URL.createObjectURL(mediaStream);` syntax is deprecated. Instead, it's
been replaced by `video.srcObject`.

However, using the srcObject syntax also lead to hundreds of individual canvases
being created in Safari 12.1. This used lots of memory, slowing the app, and
Safari then stopped the website from creating further canvasses and scanning
failed to work. The longer the video preview was open the worse things became.

This version of the code now uses a single canvas for rendering, rather than
relying on garbage collection to clean them up over time.

Additionally, Safari requires a new `playsinline` attribute for the display
element in the html.

Additionally, I found that on Safari 12.1 with an iPhone 6s plus, the generated
image was vertically `squished`, and the bar-code wouldn't be recognised as it
was not square. This changes the code to use the rendered window size for the
canvas, rather than what the camera has been detected as. This seems to
dramatically improve QR code recognition.

Author: oskarpearson

src/browser/src/createQRScannerInternal.js

@@ -21,6 +21,8 @@ module.exports = function(){
   var thisScanCycle = null;
   var nextScan = null;
   var cancelNextScan = null;
+  var snapshotCanvas = null;
+  var snapshotCanvasContext = null;
 
   // standard screen widths/heights, from 4k down to 320x240
   // widths and heights are each tested separately to account for screen rotation
@@ -282,7 +284,16 @@ module.exports = function(){
       }).then(function(mediaStream){
         activeMediaStream = mediaStream;
         var video = getVideoPreview();
-        video.src = URL.createObjectURL(mediaStream);
+
+        // Newer browsers have deprecated `video.src`, so we attempt video.srcObject
+        // first, and then fall back to video.src if that's not supported,
+        // as per https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject#Supporting_fallback_to_the_src_property
+        try {
+          video.srcObject = mediaStream;
+        } catch(error) {
+          video.src = URL.createObjectURL(mediaStream);
+        }
+
         success(calcStatus());
       }, function(err){
         // something bad happened
@@ -292,38 +303,57 @@ module.exports = function(){
       });
   }
 
-  function getTempCanvasAndContext(videoElement){
-    var tempCanvas = document.createElement('canvas');
-    var camera = getCurrentCamera();
-    tempCanvas.height = camera.height;
-    tempCanvas.width = camera.width;
-    var tempCanvasContext = tempCanvas.getContext('2d');
-    tempCanvasContext.drawImage(videoElement, 0, 0, camera.width, camera.height);
-    return {
-      canvas: tempCanvas,
-      context: tempCanvasContext
-    };
+  function updateSnapshotCanvas(videoElement){
+    // Use the dimensions of the on-screen display, not the camera dimensions.
+    //
+    // Since we're snapshotting the content of the html element into an image,
+    // we want the width/height to reflect the current rotation of the html
+    // element. Without this, we can run into issues where the image is
+    // vertically squashed.
+    var width = videoElement.clientWidth;
+    var height = videoElement.clientHeight;
+
+    // Force the canvas to match the underlying video presentation element,
+    // to handle cases where the device has changed rotation since the last snapshot
+    snapshotCanvas.width = width;
+    snapshotCanvas.height = height;
+
+    snapshotCanvasContext.drawImage(videoElement, 0, 0, width, height);
   }
 
   function getCurrentImageData(videoElement){
-    var snapshot = getTempCanvasAndContext(videoElement);
-    return snapshot.context.getImageData(0, 0, snapshot.canvas.width, snapshot.canvas.height);
+    updateSnapshotCanvas(videoElement);
+
+    return snapshotCanvasContext.getImageData(0, 0, snapshotCanvas.width, snapshotCanvas.height);
   }
 
   // take a screenshot of the video preview with a temp canvas
   function captureCurrentFrame(videoElement){
-    return getTempCanvasAndContext(videoElement).canvas.toDataURL('image/png');
+    updateSnapshotCanvas(videoElement);
+
+    return snapshotCanvas.toDataURL('image/png');
   }
 
   function initialize(success, error){
     if(scanWorker === null){
       var workerBlob = new Blob([workerScript],{type: "text/javascript"});
       scanWorker = new Worker(URL.createObjectURL(workerBlob));
     }
+
+    // Create only one in-memory canvas, otherwise memory leaks can lead to
+    // hundreds of canvases, which then causes the browser to run out of
+    // canvas memory
+    if(snapshotCanvas === null){
+      snapshotCanvas = document.createElement('canvas');
+      snapshotCanvasContext = snapshotCanvas.getContext('2d');
+    }
+
     if(!getVideoPreview()){
       // prepare DOM (sync)
       var videoPreview = document.createElement('video');
       videoPreview.setAttribute('autoplay', 'autoplay');
+      videoPreview.setAttribute('playsinline', 'playsinline');
+      videoPreview.setAttribute('muted', 'muted');
       videoPreview.setAttribute('id', ELEMENTS.preview);
       videoPreview.setAttribute('style', 'display:block;position:fixed;top:50%;left:50%;' +
       'width:auto;height:auto;min-width:100%;min-height:100%;z-index:' + ZINDEXES.preview +
@@ -408,6 +438,7 @@ module.exports = function(){
     var video = getVideoPreview();
     if(video){
       video.src = '';
+      video.srcObject = '';
     }
     success(calcStatus());
   }
@@ -429,7 +460,13 @@ module.exports = function(){
         }
       };
       thisScanCycle = function(){
-        scanWorker.postMessage(getCurrentImageData(video));
+        imageData = getCurrentImageData(video);
+        if (imageData){
+          scanWorker.postMessage(imageData);
+        } else {
+          console.log("No imageData returned; have we run out of canvas memory?")
+        }
+        imageData = null;
         if(cancelNextScan !== null){
           // avoid race conditions, always clear before starting a cycle
           cancelNextScan();