define BlendEffect and ScaleEffect

src/effects/BlendEffect.js

@@ -0,0 +1,34 @@
+import Effect from './Effect.js';
+
+export default class BlendEffect extends Effect {
+    constructor(options = {}) {
+        super(options);
+        this.setDefaults({
+            blendMode: "screen",
+            opacity: 1.0
+        });
+    }
+
+    apply(ctx, video, params = {}) {
+        if (!this.enabled) return;
+        
+        this.beforeApply(ctx, video, params);
+        
+        // Retrieve blend mode and opacity, defaulting to "screen" and 1.0
+        const blendMode = this.getParam("blendMode", params.blendMode);
+        const opacity = this.getParam("opacity", params.opacity);
+
+        // Set blend mode and opacity
+        ctx.globalCompositeOperation = blendMode;
+        ctx.globalAlpha = opacity;
+
+        // Draw the video frame onto the canvas
+        ctx.drawImage(video, 0, 0, ctx.canvas.width, ctx.canvas.height);
+
+        // Reset to default values for further drawing
+        ctx.globalCompositeOperation = "source-over";
+        ctx.globalAlpha = 1.0;
+
+        this.afterApply(ctx, video, params);
+    }
+}

src/effects/ScaleEffect.js

@@ -0,0 +1,37 @@
+import Effect from './Effect.js';
+
+export default class ScaleEffect extends Effect {
+    constructor(options = {}) {
+        super(options);
+        this.setDefaults({
+            scaleMode: "fit"  // Scale mode, e.g., "fit" or "fill"
+        });
+    }
+
+    apply(ctx, video, params = {}) {
+        if (!this.enabled) return;
+
+        this.beforeApply(ctx, video, params);
+
+        const scaleMode = this.getParam("scaleMode", params.scaleMode);
+        
+        // Determine the scale to either fit or fill the canvas
+        let scale;
+        if (scaleMode === "fill") {
+            scale = Math.min(ctx.canvas.width / video.videoWidth, ctx.canvas.height / video.videoHeight);
+        } else {  // Default to "fit" mode
+            scale = Math.max(ctx.canvas.width / video.videoWidth, ctx.canvas.height / video.videoHeight);
+        }
+
+        // Calculate scaled dimensions and offset for centering
+        const scaledWidth = video.videoWidth * scale;
+        const scaledHeight = video.videoHeight * scale;
+        const offsetX = (ctx.canvas.width - scaledWidth) / 2;
+        const offsetY = (ctx.canvas.height - scaledHeight) / 2;
+
+        // Draw the scaled video onto the canvas
+        ctx.drawImage(video, offsetX, offsetY, scaledWidth, scaledHeight);
+
+        this.afterApply(ctx, video, params);
+    }
+}