Sign up for our live Camera Kit office hour on Dec 13 @ 9:30am (PT) / 4:30pm (GMT)

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

zPoly Posts: 6
edited June 29 in General #1

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

  const cameraKit = await bootstrapCameraKit({ apiToken });

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

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

  const source = await createUserMediaSource(
    { video: { facingMode: { ideal: "environment" } } }

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

  console.log("Lens rendering has started!");

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
    JacekC Posts: 16 🔥

    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

    I hope this helps.


  • Michael Mase
    Michael Mase Posts: 44 🔥
    edited June 29 #3

    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' });