Heads up! We're sunsetting this forum to streamline our community space.

join us on Discord for support, updates, and all things Snap AR! See you there!
Sign up for our live Camera Kit office hour on July 17 @ 9:30am (PT) / 4:30pm (GMT)

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

zPoly
zPoly Posts: 6
edited June 2023 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');
  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.

Tagged:

Answers

  • JacekC
    JacekC Posts: 26 👻
    #2

    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
    Michael Mase Posts: 66 🔥🔥
    edited June 2023 #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' });

Categories