debugging qrcodedetector

-/******/ "use strict";
 /******/ var __webpack_modules__ = ([
 /* 0 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
@@ -1654,7 +1653,7 @@ Invocation.cast = function (obj, context) {
     if (obj.storage !== undefined) {
         let data = null;
         if (typeof(localStorage) !== "undefined") {
-            let item = localStorage.getItem(storage.key);
+            let item = localStorage.getItem(`ARCS.${storage.key}`);
             if (item === null) {
                 if (typeof (obj.storage.default) !== "undefined") {
                     data = obj.storage.default;

 import ARCS from '../build/arcs.js';
 
 let QRCodeDetector;
-
-QRCodeDetector = ARCS.Componenent.create(
+QRCodeDetector = ARCS.Component.create(
     function() {
         let busy = false;
         let dataCache = null;
-        const worker = new Worker("../deps/jsqr/worker.js");
-        worker.addEventListener("message", ({data} => {
-            busy = false;
-            dataCache = data;
+
+        //let jsqrUrl = new URL('../deps/jsqr/jsQR.js');
+
+        const code = `
+            //import jsQR from '../deps/jsQR.js';
+            //importScripts('sources/arcs.js/deps/jsqr/jsQR.js');
+            let jsQR = await import('../deps/jsQR.js');
+
+            self.addEventListener("message", e => {
+            const obj = e.data;
+            const qrData = jsQR(obj.data, obj.width, obj.height);
+            self.postMessage(qrData);
         });
+        `;
+
+        //const blob = new Blob([code], {type: 'application/javascript'});
+
+        //const worker = new Worker(URL.createObjectURL(blob),{type: "module"});
+        //
+        const worker = new Worker('../../deps/jsqr/worker.js');
+        worker.addEventListener("message", ((data) => {
+            busy = false;
+            dataCache = data.data;
+        }));
         
-        this.detect(imageData) {
+        this.detect= function(imageData) {
             if (!busy) {
                 busy = true;
                 worker.postMessage(imageData);

@@ -13,8 +13,12 @@ var LiveSource, VideoSource;
 LiveSource = ARCS.Component.create(
     function (config) {
         var context, canvas, video, imageData;
-        var defaultWidth = config ||  config.width || 320;
-        var defaultHeight = config || config.height || 240;
+        var defaultWidth = 320;
+        var defaultHeight = 240;
+        if (config !== undefined) {
+            if (config.width !== undefined) defaultWidth = config.width;
+            if (config.height !== undefined) defaultHeight = config.height;
+        }
         var self = this;
         
         var handleMediaStream = function(stream) {
@@ -48,8 +52,18 @@ LiveSource = ARCS.Component.create(
         this.setSize = function(x,y) {
             
         };
+
+        this.start = function () {
+            if (!video || !canvas) {
+                createWidgets();
+            }
+            setUserMedia();
+        }
         
         var createWidgets = function() {        
+            let isVideoGiven = (video != null);
+            let isCanvasGiven = (canvas != null);
+
             video = video || document.createElement("video");
             canvas = canvas || document.createElement("canvas");
             canvas.width = video.width = defaultWidth;
@@ -58,11 +72,15 @@ LiveSource = ARCS.Component.create(
             canvas.style.height = canvas.height + "px";
             
             // in order to hide our new elements
-            video.style.display = "none";
-            canvas.style.display = "none";
             let shadow = document.body;//.attachShadow({mode: 'open'});        
-            shadow.appendChild(video);
-            shadow.appendChild(canvas);        
+            if (!isVideoGiven) {
+                video.style.display = "none";
+                shadow.appendChild(video);
+            }
+            if (!isCanvasGiven) {
+                canvas.style.display = "none";
+                shadow.appendChild(canvas);        
+            }
             context = canvas.getContext("2d");
         };
         
@@ -70,7 +88,7 @@ LiveSource = ARCS.Component.create(
             video = document.getElementById(videoId);
             canvas = document.getElementById(canvasId);
             
-            if (video === undefined || canvas === undefined) {
+            if (video === null || canvas === null) {
                 console.log("video elements not defined");
                 return;
             }
@@ -81,7 +99,7 @@ LiveSource = ARCS.Component.create(
             setUserMedia();
         };
     },
-    ['grabFrame','setWidgets'],
+    ['start', 'grabFrame','setWidgets'],
     ['onReady','onImage']
 );
 

-import jsQR from './jsQR.js';
+importScripts('./jsQR.js');
 
 self.addEventListener("message", e => {
     const obj = e.data;

@@ -22,12 +22,14 @@
   "sheets": {
     "init" : {
         "preconnections": [
-            { "destination": "video", "slot": "setWidgets", "value": ["video"] },        
+            { "destination": "video", "slot": "setWidgets", "value": ["video"] }
         ],
         "connections": [
             { "source": "video", "signal": "onReady", "destination": "statemachine", "slot" : "next"}
         ],
-        "postconnections": [],
+        "postconnections": [
+            { "destination": "video", "slot": "start", "value": [] }
+        ],
         "cleanups": []
     },
     "start" : {