From f57106b00a664a90edb3fdb5eed09d8213eacc84 Mon Sep 17 00:00:00 2001
From: Ningxin Hu <ningxin.hu@intel.com>
Date: Tue, 26 Sep 2017 13:00:36 +0800
Subject: [PATCH 1/2] Add haar cascade files as js_assets

---
 doc/CMakeLists.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/doc/CMakeLists.txt b/doc/CMakeLists.txt
index 1f6550f8b3..1b4eee122c 100644
--- a/doc/CMakeLists.txt
+++ b/doc/CMakeLists.txt
@@ -189,6 +189,7 @@ if(BUILD_DOCS AND DOXYGEN_FOUND)
   set(haar_cascade_files "")
   set(data_harrcascades_path "${OpenCV_SOURCE_DIR}/data/haarcascades/")
   list(APPEND js_tutorials_assets_deps "${data_harrcascades_path}/haarcascade_frontalface_default.xml" "${data_harrcascades_path}/haarcascade_eye.xml")
+  list(APPEND js_assets "${data_harrcascades_path}/haarcascade_frontalface_default.xml" "${data_harrcascades_path}/haarcascade_eye.xml")
 
   foreach(f ${js_assets})
     get_filename_component(fname "${f}" NAME)

From ea2c13c91eb118a4fe6b0ac15336acdaf301690a Mon Sep 17 00:00:00 2001
From: Ningxin Hu <ningxin.hu@intel.com>
Date: Tue, 26 Sep 2017 13:01:45 +0800
Subject: [PATCH 2/2] Improve cascade file loading and error handling for js
 tutorials

---
 .../js_assets/js_face_detection.html           | 18 +++++++-----------
 .../js_assets/js_face_detection_camera.html    | 13 ++++---------
 doc/js_tutorials/js_assets/utils.js            | 18 ++++++++++++++++++
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/doc/js_tutorials/js_assets/js_face_detection.html b/doc/js_tutorials/js_assets/js_face_detection.html
index 627e104b68..b92c10747e 100644
--- a/doc/js_tutorials/js_assets/js_face_detection.html
+++ b/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>
diff --git a/doc/js_tutorials/js_assets/js_face_detection_camera.html b/doc/js_tutorials/js_assets/js_face_detection_camera.html
index 36dcce792f..f839cd7470 100644
--- a/doc/js_tutorials/js_assets/js_face_detection_camera.html
+++ b/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>
diff --git a/doc/js_tutorials/js_assets/utils.js b/doc/js_tutorials/js_assets/utils.js
index d59cceea69..d2916c64d1 100644
--- a/doc/js_tutorials/js_assets/utils.js
+++ b/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');