Improve cascade file loading and error handling for js tutorials

doc/js_tutorials/js_assets/js_face_detection.html

@@ -77,18 +77,14 @@ tryIt.addEventListener('click', () => {
 });
 
 utils.loadOpenCv(() => {
-    tryIt.removeAttribute('disabled');
+    let eyeCascadeFile = 'haarcascade_eye.xml';
+    utils.createFileFromUrl(eyeCascadeFile, eyeCascadeFile, () => {
+        let faceCascadeFile = 'haarcascade_frontalface_default.xml';
+        utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
+            tryIt.removeAttribute('disabled');
+        });
+    });
 });
-let Module = {
-    preRun: [function() {
-        Module.FS_createPreloadedFile('/', 'haarcascade_eye.xml',
-                                      'haarcascade_eye.xml', true, false);
-        let frontalfaceXML = 'haarcascade_frontalface_default.xml';
-        let frontalfaceDefaultXML = 'haarcascade_frontalface_default.xml';
-        Module.FS_createPreloadedFile('/', frontalfaceXML,
-                                      frontalfaceDefaultXML, true, false);
-    }],
-};
 </script>
 </body>
 </html>

doc/js_tutorials/js_assets/js_face_detection_camera.html

@@ -131,16 +131,11 @@ function onVideoStopped() {
     startAndStop.innerText = 'Start';
 }
 
-let Module = {
-    preRun: [function() {
-        Module.FS_createPreloadedFile(
-            '/', 'haarcascade_frontalface_default.xml',
-            'haarcascade_frontalface_default.xml', true, false);
-    }],
-};
-
 utils.loadOpenCv(() => {
-    startAndStop.removeAttribute('disabled');
+    let faceCascadeFile = 'haarcascade_frontalface_default.xml';
+    utils.createFileFromUrl(faceCascadeFile, faceCascadeFile, () => {
+        startAndStop.removeAttribute('disabled');
+    });
 });
 </script>
 </body>

doc/js_tutorials/js_assets/utils.js

@@ -19,6 +19,24 @@ function Utils(errorOutputId) { // eslint-disable-line no-unused-vars
         node.parentNode.insertBefore(script, node);
     };
 
+    this.createFileFromUrl = function(path, url, callback) {
+        let request = new XMLHttpRequest();
+        request.open('GET', url, true);
+        request.responseType = 'arraybuffer';
+        request.onload = function(ev) {
+            if (request.readyState === 4) {
+                if (request.status === 200) {
+                    let data = new Uint8Array(request.response);
+                    cv.FS_createDataFile('/', path, data, true, false, false);
+                    callback();
+                } else {
+                    self.printError('Failed to load ' + url + ' status: ' + request.status);
+                }
+            }
+        };
+        request.send();
+    };
+
     this.loadImageToCanvas = function(url, cavansId) {
         let canvas = document.getElementById(cavansId);
         let ctx = canvas.getContext('2d');