Flip wecam left-right to behave like mirrow

much more natural
marco-porru · Oct 27, 2020 · fb716fd · fb716fd
1 parent a4267f5
commit fb716fd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/node-red-node-ui-webcam/package.json b/node-red-node-ui-webcam/package.json
@@ -1,6 +1,6 @@
 {
     "name": "node-red-node-ui-webcam",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "description": "A Node-RED ui node to capture images from a webcam.",
     "author": "Nick O'Leary",
     "license": "Apache-2.0",

diff --git a/node-red-node-ui-webcam/ui_webcam.html b/node-red-node-ui-webcam/ui_webcam.html
@@ -16,6 +16,7 @@
         category: 'dashboard',
         color: 'rgb( 63, 173, 181)',
         defaults: {
+            name: {value: ''},
             group: {type: 'ui_group', required:true},
             order: {value: 0},
             width: {
@@ -29,8 +30,7 @@
                     $("#node-input-size").toggleClass("input-error",!valid);
                     return valid;
                 }},
-            height: {value: 0},
-            name: {value: ''},
+            height: {value: 5},
             countdown: { value: false },
             autoStart: { value: false },
             hideCaptureButton: { value: false },
@@ -87,7 +87,6 @@
             })
 
             $("#node-input-showImage-enable").trigger("change");
-
         },
         oneditsave: function() {
             var showImageEnable = $("#node-input-showImage-enable")[0].checked;
@@ -101,7 +100,6 @@
             } else {
                 this.showImage = showImageTime;
             }
-
         }
     });
 </script>
@@ -154,7 +152,6 @@
                 </select>
             </div>
         </div>
-
     </div>
     <div class="form-row">
         <label for="node-input-name"><i class="icon-tag"></i> Name</label>

diff --git a/node-red-node-ui-webcam/ui_webcam.js b/node-red-node-ui-webcam/ui_webcam.js
@@ -42,6 +42,8 @@ module.exports = function(RED) {
         position: absolute;
         width: 100%;
         height: 100%;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
     }
     .ui-webcam-playback-container {
         width: 100%;
@@ -211,8 +213,6 @@ module.exports = function(RED) {
                         var activeCamera = null;
                         var oldActiveCamera = null;
 
-
-
                         $scope.changeCamera = function(deviceId) {
                             oldActiveCamera = activeCamera;
                             activeCamera = $scope.data.cameras[deviceId].deviceId;
@@ -325,7 +325,10 @@ module.exports = function(RED) {
                             var canvas = document.querySelector("canvas#ui_webcam_canvas_"+$scope.$id);
                             canvas.width = playbackEl.videoWidth;
                             canvas.height = playbackEl.videoHeight;
-                            canvas.getContext('2d').drawImage(playbackEl, 0, 0);
+                            var ctx = canvas.getContext('2d');
+                            ctx.translate(playbackEl.videoWidth, 0);
+                            ctx.scale(-1, 1);
+                            ctx.drawImage(playbackEl, 0, 0);
                             var img = document.querySelector("img#ui_webcam_image_"+$scope.$id);
                             img.src = canvas.toDataURL('image/'+($scope.config.format||'png'));
                             if ($scope.config.showImage) {