Lens Issues on web version, and set up questions!

Paigepiskin · August 2023

Hi I set up my first camera kit web code, etc with the beginner guide and I just have a few issues and questions.

1 - My lens has a 3d portal environment for the back camera, but when I test it the camera kit web it stays static and doesn't allow you to look around the space when you move your phone - but in snapchat you can look around the 3d environment fine.

2 - Switching from front camera to back camera: Would it be possible to make a button that allows you to switch front to back like in the app?

Capability questions:

Is it possible to have 3d objects respond to you if you click on them or come closer in the web version? Like if I tap a character it changes the animation, or if I just face them directly?

Michael Mase · August 2023

No problem at all! Yes, it may be a good idea to prematurely request these permissions so that Camera Kit doesn't have to. You can do so like this:

Device Motion:

if (typeof DeviceMotionEvent.requestPermission === 'function') {
  const state = await DeviceMotionEvent.requestPermission();
  if (state === 'granted') {
    // Permission granted
  }
}

Device Orientation:

if (typeof DeviceOrientationEvent.requestPermission === 'function') {
  const state = await DeviceOrientationEvent.requestPermission();
  if (state === 'granted') {
    // Permission granted
  }
}

Additionally, I am in the process of publishing a guide on flipping the camera. I'll reply back here when it is live!

Michael Mase · August 2023

Hi @Paigepiskin! Thanks for your questions.

Here are some responses!

When you use the back camera, be sure that your cameraType is 'back' on your Camera Kit source. For example:

const mediaStream = await navigator.mediaDevices.getUserMedia({
  video: true
});

const source = createMediaStreamSource(mediaStream, { cameraType: 'back' });

await session.setSource(source);

Additionally, you need to interact with the output canvas (typically by tapping) for the browser to request motion and orientation device permissions. This will enable the world tracking experience you are used to.

Yes, you can create a button that switches between the front and back camera. To do this, you would need to stop the MediaStreamTrack on the initial camera and then request a MediaStream for the opposite camera. To do this, you'd use the facingMode property in your getUserMedia call. It's also important that your cameraType is set to 'back' (as demonstrated above) when the facingMode is 'environment'.

https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode

Yes, the objects in your Lens should respond to tap/click events.

I hope this all helps! If you have any more questions, feel free to reach out. On the 2nd one (switching between front and back camera), I'll do my best to publish some sample code demonstrating this in the near future.

Paigepiskin · August 2023

Thank you so much for this!! This was super helpful I'll be in touch if I run into any issues!

Paigepiskin · August 2023

Hey @Michael Mase ! For the device motion and orientation, I just went to test again with the “test your lenses” page and put my effect api/group in, and it loaded, I clicked around the screen and page, it was still staying static rather then allowing me to rotate around the 3d environment. Then I went to the next page called “Transform” and tested out some snap example lenses. For some reason, when I clicked the twerking hamster example, I got the a pop up for the permissions to access motion and orientation. Then when I went back to the test app page, my effect's device motion worked. But I don’t know why my test app page didn't ask for permissions right away. Is there a way I can force this to prompt like right away after the person gives camera permission?

Paigepiskin · August 2023

Thank you so much!!! I really appreciate it !!!!

Michael Mase · August 2023

Hi @Paigepiskin! Here is a quick example of how you can switch between the front and back camera with the Camera Kit Web SDK: https://docs.snap.com/camera-kit/quick-start/integrate-sdk/integrate-sdk-web/guides/switching-between-front-and-back-cameras

I hope this helps, if you have any questions feel free to reach out!

Paigepiskin · August 2023

Thank you @Michael Mase !

Lens Issues on web version, and set up questions!

Best Answer

Answers

Categories