more refactoring to generalize projection extensions

HISTORY.md

@@ -78,6 +78,9 @@
     * German
     * French
 
+### 2019-05-16
+* Objects: more refactoring to generalize projection extensions
+
 ### 2019-05-15
 * Objects, Treads: refactored videoLayer so it can also be used for other extensions (maps, 3d)
 * Objects: refactored video frame capture

snap.html

@@ -8,7 +8,7 @@
         <script type="text/javascript" src="src/widgets.js?version=2019-04-05"></script>
         <script type="text/javascript" src="src/blocks.js?version=2019-05-08"></script>
         <script type="text/javascript" src="src/threads.js?version=2019-05-15"></script>
-        <script type="text/javascript" src="src/objects.js?version=2019-05-15"></script>
+        <script type="text/javascript" src="src/objects.js?version=2019-05-16"></script>
         <script type="text/javascript" src="src/gui.js?version=2019-05-09"></script>
         <script type="text/javascript" src="src/paint.js?version=2019-02-22"></script>
         <script type="text/javascript" src="src/lists.js?version=2019-04-27"></script>

src/objects.js

@@ -84,7 +84,7 @@ BlockEditorMorph, BlockDialogMorph, PrototypeHatBlockMorph, localize,
 TableMorph, TableFrameMorph, normalizeCanvas, BooleanSlotMorph, HandleMorph,
 AlignmentMorph, Process, XML_Element, VectorPaintEditorMorph*/
 
-modules.objects = '2019-May-15';
+modules.objects = '2019-May-16';
 
 var SpriteMorph;
 var StageMorph;
@@ -7022,6 +7022,7 @@ StageMorph.prototype.init = function (globals) {
 
     // projection layer - for video, maps, 3D extensions etc., transient
     this.projectionSource = null; // offscreen DOM element for video, maps, 3D
+    this.getProjectionImage = null; // function to return a blittable image
     this.stopProjectionSource = null; // function to turn off video stream etc.
     this.continuousProjection = false; // turn ON for video
     this.projectionCanvas = null;
@@ -7331,6 +7332,7 @@ StageMorph.prototype.startVideo = function() {
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
         navigator.mediaDevices.getUserMedia({ video: true })
             .then(function(stream) {
+                myself.getProjectionImage = myself.getVideoImage;
                 myself.stopProjectionSource = myself.stopVideo;
                 myself.continuousProjection = true;
                 myself.projectionSource.srcObject = stream;
@@ -7341,6 +7343,10 @@ StageMorph.prototype.startVideo = function() {
     }
 };
 
+StageMorph.prototype.getVideoImage = function () {
+    return this.projectionSource;
+};
+
 StageMorph.prototype.stopVideo = function() {
     this.projectionSource.stream.getTracks().forEach(
         function (track) {track.stop(); }
@@ -7558,20 +7564,22 @@ StageMorph.prototype.stepProjection = function () {
         context.scale(-1, 1);
     }
     context.drawImage(
-        this.projectionSource,
+        this.getProjectionImage(),
         0,
         0,
         this.projectionSource.width,
         this.projectionSource.height
     );
-    this.videoMotion.addFrame(
+    if (this.videoMotion) {
-        context.getImageData(
+        this.videoMotion.addFrame(
-            0,
+            context.getImageData(
-            0,
+                0,
-            this.projectionSource.width,
+                0,
-            this.projectionSource.height
+                this.projectionSource.width,
-        ).data
+                this.projectionSource.height
-    );
+            ).data
+        );
+    }
     context.restore();
     this.changed();
 };