augmented reality from pre-recorded video

 arcs_module(function(ARCS) {
-    var LiveSource;
+    var LiveSource, VideoSource;
     LiveSource = ARCS.Component.create(
         function () {
             var context, canvas, video, imageData;
@@ -14,8 +14,8 @@ arcs_module(function(ARCS) {
                     video.mozSrcObject = stream;
                 } else {
                     video.src = stream;
-                }
-                video.videoWidth=defaultWidth;
+                }                
+                video.videoWidth=defaultWidth;                
                 video.videoHeight=defaultHeight;
                 self.emit("onReady");
             };
@@ -71,5 +71,55 @@ arcs_module(function(ARCS) {
         ['onReady','onImage']
     );
     
-    return {LiveSource: LiveSource};
+    
+    VideoSource = ARCS.Component.create(
+        function() {
+            var context, canvas, video, imageData;    
+            var defaultWidth=320;
+            var defaultHeight=240;
+            var self=this;
+            
+            this.setWidgets = function (videoId, canvasId) {
+                video = document.getElementById(videoId);
+                canvas = document.getElementById(canvasId);
+                
+                if (video === undefined || canvas === undefined) {
+                    return;
+                }
+                context = canvas.getContext("2d");
+                var canvasStyle= window.getComputedStyle(canvas);
+                canvas.width=parseInt(canvasStyle.width);
+                canvas.height=parseInt(canvasStyle.height);
+
+                if (video.paused || video.ended) {
+                    video.addEventListener('play', function() {
+                        self.emit("onReady");
+                    });
+                } else {
+                    self.emit("onReady");
+                }
+                
+                
+            };
+            
+            this.grabFrame = function () {
+                if ( context === undefined || canvas === undefined || video === undefined)
+                    return;
+                if (video.paused || video.ended) {
+                    return;
+                }
+                
+                context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+                this.emit("onImage",imageData);
+            };
+            
+        
+        },
+        ['grabFrame', 'setWidgets'],
+        ['onReady', 'onImage']        
+    );
+    
+    
+    return {LiveSource: LiveSource, VideoSource: VideoSource};
 });
\ No newline at end of file

@@ -52,5 +52,5 @@ THREE.FrustumCamera.prototype.clone = function () {
 };
 
 return {};
-}, ['deps/threejs/three.js']
+}, ['deps/three.js/index']
 );	

@@ -11,7 +11,10 @@ body {
         margin: 0px;
 }
 
-
+video {
+    width: 320px;
+    height: 240px;
+}
 
 #canvas {
         width: 320px;

+newmtl Material
+Ns 92.1568627451
+Kd 0.756191134453 0.756191134453 0.756191134453
+Ka 1.0 1.0 1.0
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl (null)
+Ns 92.1568627451
+Kd 0.800000011921 0.800000011921 0.800000011921
+Ka 1.0 1.0 1.0
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe1L
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe2L
+Ns 92.1568627451
+Kd 1.0 1.0 1.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe3L
+Ns 92.1568627451
+Kd 0.300000011921 0.20000000298 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe4L
+Ns 92.1568627451
+Kd 0.20000000298 0.20000000298 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl lowlegL
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl uplegL
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl lowarmL
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl sleaveL
+Ns 92.1568627451
+Kd 1.0 1.0 1.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl handL
+Ns 92.1568627451
+Kd 0.899999976158 0.5 0.40000000596
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl uparmL
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe1R
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe2R
+Ns 92.1568627451
+Kd 1.0 1.0 1.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe3R
+Ns 92.1568627451
+Kd 0.300000011921 0.20000000298 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shoe4R
+Ns 92.1568627451
+Kd 0.20000000298 0.20000000298 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl lowlegR
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl uplegR
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl pelvis
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl lowarmR
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl sleaveR
+Ns 92.1568627451
+Kd 1.0 1.0 1.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl handR
+Ns 92.1568627451
+Kd 0.899999976158 0.5 0.40000000596
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl coat
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl shirt
+Ns 92.1568627451
+Kd 1.0 1.0 1.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl tie
+Ns 92.1568627451
+Kd 0.5 0.0 0.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl buttons
+Ns 92.1568627451
+Kd 0.40000000596 0.40000000596 0.40000000596
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl uparmR
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl hat
+Ns 92.1568627451
+Kd 0.20000000298 0.20000000298 0.20000000298
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl band
+Ns 92.1568627451
+Kd 0.10000000149 0.10000000149 0.300000011921
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl face
+Ns 92.1568627451
+Kd 0.899999976158 0.5 0.40000000596
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl hair
+Ns 92.1568627451
+Kd 0.300000011921 0.20000000298 0.10000000149
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl irisR
+Ns 92.1568627451
+Kd 0.20000000298 0.20000000298 0.40000000596
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl eyewhiteR
+Ns 92.1568627451
+Kd 1.0 1.0 1.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl pupilR
+Ns 92.1568627451
+Kd 0.0 0.0 0.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl irisL
+Ns 92.1568627451
+Kd 0.20000000298 0.20000000298 0.40000000596
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl eyewhiteL
+Ns 92.1568627451
+Kd 1.0 1.0 1.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+
+newmtl pupilL
+Ns 92.1568627451
+Kd 0.0 0.0 0.0
+Ka 0.20000000298 0.20000000298 0.20000000298
+Ks 1.0 1.0 1.0
+d 1.0
+illum 2
+

+@viewport {
+    width: device-width;
+    zoom: 1;
+    
+}
+
+
+body {
+        font-family: sans-serif;
+        padding: 0px;
+        margin: 0px;
+}
+
+
+
+#canvas {
+        width: 320px;
+        height: 240px;
+        display: none;
+    
+}
+
+.hide {
+        display: none;
+}
+
+#scorezone {
+    position: absolute;
+    z-index: 10;
+    left: 40px;
+    top: 40px;
+    padding: 10px;
+    
+    
+    background: navy;
+    /*height: 2em;*/
+    opacity: 0.6;
+
+    font-weight: bold;
+    font-size: 120%;
+    color: white;
+}
+
+
+#console {
+    position: absolute;
+    bottom: 10px;
+    margin: 10px;
+    padding: 0px;
+    font-weight: bold;
+    width: auto;
+    border: solid 1px black;
+    background: navy;
+    opacity: 0.6;
+    color: white;
+
+}
+
+#contents {
+    position: absolute;
+    z-index: 10;
+    left: 0px;
+    top: 0px;
+    margin: 0px;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    
+}
+
+#notification {
+    position: absolute;
+    left: 50%;
+    margin-left: -35%;
+    top: 50%;
+    margin-top: -1.5em;
+    text-align: center;
+    width: 70%;
+    bottom: 50%;
+    display: none;
+    font-size: 180%;
+    font-weight: bold;
+    
+    background: navy;
+    height: 3em;
+    opacity: 0.6;
+    color: white;
+
+    display: none;
+}
+
+
+#output {
+    color: white;
+    height: 4em;
+    padding: 0px;
+    margin-left: 10px;
+    margin-top: 10px;
+
+    scroll-top: false;
+    overflow: auto;
+    width: 90%;
+}
+
+
+.central {
+    position: absolute;
+    text-align: center;
+    margin: 10px;
+    left: auto;
+    right: auto;
+    top: auto;
+    bottom: 50%;
+    
+}
+
+.marker {
+    display: inline-block;
+    width: 6em;
+    padding-right: 1em;
+    text-align: right;    
+}
+
+#container {
+    left:0px;
+    top:0px;
+    width: 100%; 
+    height: 100%;
+}
+
+
+#logo {
+    position: absolute;
+    margin:0px;
+    padding:0px;
+    right: 0px;
+    bottom:0px;
+}
\ No newline at end of file

+{
+  "context": {
+    "libraries": [
+      "components/arviewer","components/animator",
+      "components/objloader","components/video",
+      "components/arucodetector", "components/markerlocator",
+      "components/windowevent", "components/tokensender", "components/objecttransform"
+    ],
+    "components": {
+      "viewer": { "type": "ARViewer"},
+      "animator": { "type": "Animator"},
+      "detector": { "type": "ARUCODetector" },
+      "locator": { "type":"MarkerLocator"},
+      "windowresize": { "type": "WindowEvent"},
+      "objectTransform": { "type": "ObjectTransform"},
+      "ts" : { "type": "TokenSender", "value": ["next"] },
+      "sm": {
+        "type": "StateMachine",
+        "value": {
+          "initial": "init", "final": "end",
+          "transitions": {
+            "init": { "next": "start"},
+            "start": { "next": "end" }
+          }
+        }
+      },
+      "objectLoader": {"type": "OBJLoader"},
+      "video": {"type": "VideoSource"}
+    }
+  },
+  "controller" : "sm",
+  "sheets": {
+    "init" : {
+        "preconnections": [
+            { "destination": "video", "slot": "setWidgets", "value": ["video", "canvas"] },
+            { "destination": "viewer", "slot": "keepAspectRatio", "value": [true] },
+            { "destination": "viewer", "slot": "setWidgets", "value": ["container", "video"]},
+            { "destination": "viewer", "slot": "setFocal", "value": [ 600 ]},
+            { "destination": "objectTransform", "slot": "setId", "value": [ 17 ] },
+            { "destination": "viewer", "slot": "setSceneId", "value": [17] },
+            { "destination":"locator", "slot":"setImageSource", "value":["canvas"]},
+            { "destination": "locator", "slot":"setModelSize", "value":[0.07]},
+            { "destination": "locator", "slot": "setIntrinsics", "value": [ [ 600 , 0 , 160, 0, 600, 120, 0 ,0, 1 ] ]}
+        ],
+        "postconnections": [
+            { "destination": "objectLoader", "slot": "load", "value": ["al3.obj","al2.mtl"] }
+        ],
+        "connections": [
+            { "source": "objectLoader", "signal": "onLoad", "destination": "viewer", "slot": "addScene" },
+            { "source": "objectLoader", "signal": "onLoad", "destination": "objectTransform", "slot" : "setObject" },            
+            { "source": "objectLoader", "signal": "onLoad", "destination": "ts", "slot" : "next" },
+            { "source": "ts", "signal": "sendToken", "destination": "sm", "slot" : "setToken" }
+        ],
+        "cleanups": [
+     
+            { "destination": "objectLoader", "slot": "resize",  "value": [0.05]}
+        ]
+    },
+    "start": {
+      "preconnections": [
+      ],
+      "postconnections": [
+        { "destination": "viewer", "slot": "viewAll", "value": []},
+        { "destination": "animator", "slot": "start", "value":[]}
+      ],
+      "connections": [
+        { "source": "windowresize", "signal": "onResize", "destination": "viewer", "slot":"setSize"},
+        { "source": "detector", "signal": "onMarkers", "destination": "locator", "slot": "locateMarkers"},
+        { "source": "animator", "signal": "onAnimationFrame", "destination": "video", "slot": "grabFrame"},
+        { "source": "animator", "signal": "onAnimationFrame", "destination": "viewer", "slot": "render"},
+        { "source": "video", "signal": "onReady", "destination": "viewer", "slot": "resetCamera"},
+        { "source": "video", "signal": "onImage", "destination": "detector", "slot": "detect"},
+        { "source": "locator", "signal": "onLocatedMarkers", "destination": "objectTransform", "slot": "setTransform"}
+      ],
+      "cleanups": []
+    },
+    "end": {
+      "preconnections": [],
+      "postconnections": [],
+      "connections": [],
+      "cleanups": []
+    }
+  }
+}

+<html>
+    <head>
+        <title>ARCS: marker experiment</title>
+            <link type="text/css" rel="stylesheet" href="arcs.css">
+                <script data-main="../../build/arcs_browser" 
+                        data-base-url="../.." 
+                        data-arcsapp="arcsapp.json" 
+                        src="../../deps/requirejs/require.js">
+                </script>
+            <meta charset="UTF-8"> 
+    </head>
+    <body>
+        <video id="video" width=320 height=240 autoplay="true" loop="true" style="display: none;">
+            <source src="webcam.webm" type="video/webm">
+        </video>
+        <canvas id="canvas"></canvas>
+        <div id="container" ></div>
+        <div id="contents">
+            <!-- div id="console">
+                <div style="float: right; font-size: 150%; padding:0; margin:0;" onclick="document.getElementById('output').classList.toggle('hide');">&#9881;</div>
+                <p id="output">Console log:<br/></p>
+            </div -->
+            <a id="logo" href="http://arcs.ibisc.univ-evry.fr"><img src="../../docs/arcs_logo.png" alt="ARCS"/></a>
+        </div>
+    </body>
+</html>