Proposal: Horizontal and vertical flipping of the output ...

[Martin-Luckow]

Most FrontCams provide a horizontally mirrored image. Since I want to record this picture, I have to mirror the mirroring :)

The most efficient way is in CanvasCamera.js.

My proposal:
Expand the options by Booleans flipH and flipV.
Replace CanvasCamera.Renderer.prototype.draw with:

        ```
CanvasCamera.Renderer.prototype.draw = function (frame) {
            this.canvasCamera.dispatch ('beforeframerendering', this, frame);
            if (frame) {
                if (this.canvasCamera.options.flipH === true || this.canvasCamera.options.flipV === true) {
                    var scaleH = this.canvasCamera.options.flipH? -1: 1; // Set horizontal scale to -1 if flip horizontal
                    var scaleV = this.canvasCamera.options.flipV? -1: 1; // Set verical scale to -1 if flip vertical
                    var posX = this.canvasCamera.options.flipH? frame.dWidth * -1: 0; // set x position to -100% if flip horizontal
                    var posY = this.canvasCamera.options.flipV? frame.dHeight * -1: 0; // Set y position to -100% if flip vertical
                    this.context.save (); // save the current state
                    this.context.scale (scaleH, scaleV); // Set scale to flip the image
                    this.context.drawImage (frame.image, frame.sx, frame.sy, frame.sWidth, frame.sHeight, posX, posY, frame.dWidth, frame.dHeight); // draw the image
                    this.context.restore (); // Restore the last saved state
                }
                else {
                    this.context.drawImage (frame.image, frame.sx, frame.sy, frame.sWidth, frame.sHeight, frame.dx, frame.dy, frame.dWidth, frame.dHeight);
                }
            }
            this.canvasCamera.dispatch ('afterframerendering', this, frame);
            return this;
        };

[Sami-Radi]

Hello,

I'll implement this in my next release.

Best Regards.

[Martin-Luckow]

Should I send you my working version?

Best regards

Martin

[Sami-Radi]

Hello,

There are (not yet) documented listeners in the plugin :

• beforeFrameRendering

window.plugin.CanvasCamera.beforeFrameRendering(function(event,frame)){
  this; // is the renderer
} 

• afterFrameRendering

window.plugin.CanvasCamera.afterFrameRendering(function(event, frame)){
  this; // is the renderer
} 

• beforeFrameInitialization

window.plugin.CanvasCamera.beforeFrameInitialization(function(event)){
  this; // is the frame
} 

• afterFrameInitialization

window.plugin.CanvasCamera.afterFrameInitialization(function(event)){
  this; // is the frame
} 

• beforeRenderingPresets

window.plugin.CanvasCamera.beforeFrameRendering(function(event)){
  this; // is the canvascamera plugin
} 

• afterRenderingPresets

window.plugin.CanvasCamera.afterRenderingPresets(function(event)){
  this; // is the canvascamera plugin
} 

You can implement the vertical and/or horizontal flipping using these without changing anything to the plugin core logic. I've updated the CanvasCamera demo with a flip action (see here).

Best Regards