Camera WebSDK React App Lens Drawing on Rear Camera canvas is mirrored

zPoly

I have the following code to initialize the canvas and snap lens

  const cameraKit = await bootstrapCameraKit({ apiToken });

  const canvas = document.createElement('canvas');
  canvas.id = "myCanvas";
  document.body.appendChild(canvas);

  const session = await cameraKit.createSession({ liveRenderTarget: canvas });


  const source = await createUserMediaSource(
    { video: { facingMode: { ideal: "environment" } } }
);
  session.setSource(source);

  const lens = await cameraKit.lensRepository.loadLens('..', '...');
  await session.applyLens(lens);

  await session.play();
  console.log("Lens rendering has started!");
  console.log(canvas);
};

I flipped the canvas element via css like this because the canvas was mirrored without it.

#myCanvas {
  transform: scaleX(-1);
}

Everything seems to be coming through but the lens is mirrored on the canvas. How can I change it so that everything is oriented correctly.

JacekC

Hi,
It's expected that it is mirrored when we use facingMode set to "environment". You can use source.setTransform(Transform2D.MirrorX); to adjust it.

Please take a look at this example explaining how to use transform methods to adjust camera mirroring https://camera-kit.snapchat.com/websdk/sample/transform

I hope this helps.

Thanks,
Jacek

Michael Mase

Hi @zPoly! By default createUserMediaSource will mirror the canvas. You can disable this by using the Transform2D.Identity transform:

const source = await createUserMediaSource(
  { video: { facingMode: { ideal: 'environment' } } },
  { transform: Transform2D.Identity }
);

Additionally, when using an environment facing camera, you will likely want to set the cameraType as 'back':

import { Transform2D } from '@snap/camera-kit';

const source = await createUserMediaSource(
  { video: { facingMode: { ideal: 'environment' } } },
  { transform: Transform2D.Identity, cameraType: 'back' }
);

Lastly, you can also pass a MediaStream directly as a Camera Kit source if you wish:

const mediaStream = await navigator.mediaDevices.getUserMedia({
  video: { facingMode: { ideal: 'environment' } },
});

session.setSource(mediaStream, { cameraType: 'back' });