ngx-webcam not giving mirror like images even after setting [mirrorImage]="'always'"

Question

Iam trying to integrate selfie image upload using ngx-webcam.

i want the image as in mirror.for that i set

    [mirrorImage]="'always'"

    [mirrorImage]="'auto'"

    [mirrorImage]="'never'"

but on the captured picture the right hand is on left of user unlike mirror

but i want mirror like image to upload to server

after lot of searching i found this link mentioning

https://github.com/basst314/ngx-webcam/issues/61

the same issue. i edited the webcam.component.mjs file within the nodemodules folder with below code

    // const context2d = _canvas.getContext('2d');
    // context2d.drawImage(_video, 0, 0);
    const context2d = _canvas.getContext('2d');
    context2d.save();
    context2d.scale(-1, 1);
    context2d.drawImage(_video, _canvas.width * -1, 0, _canvas.width, _canvas.height);
    context2d.restore();

but still iam not able to achieve my goal.

what should i do to get mirror like images using ngx-webcam?

Answer 1

if you want to rotate the image horizontally you can acheive this easily using javascript only

On receiving webcam image from ngx-webcam

call the flip function to rotate the image

the resulting flipped image will be based64

  flippedImage:any;
  handleImage(webcamImage: WebcamImage) {
    console.log(webcamImage);
    this.flip(webcamImage.imageAsDataUrl)
  }
  flip(src:any){
    const img = new Image();
    img.onload = ()=> {
      var c = document.createElement('canvas');
      c.width = img.width;
      c.height = img.height;
      var ctx = c.getContext('2d');
      ctx.scale(-1,1);
      ctx.drawImage(img,-img.width,0);
      img.onload = undefined; 
      const flippedImage = c.toDataURL();
      this.flippedImage=flippedImage;
    }
    img.src = src;
  }

stackblitz demo https://ngx-webcam-image-flipping.stackblitz.io