unable to run camera kit SDK on web

كنز | Treasure👑

Need help with React Camera Kit integration. Successfully compiled with webpack, but stuck with a black canvas. Any insights or troubleshooting tips would be greatly appreciated!
check image below

https://drive.google.com/file/d/17o9mIaEBNmx-GDWOTv-itVIaSsFfiXow/view?usp=sharing

Thank you.
Cheers.

Michael Mase

Hi @كنز | Treasure👑 ! Could you share some sample code so we can take a closer look?

كنز | Treasure👑

Hi @Michael Mase this is the project file
https://drive.google.com/file/d/1vQwZtn4D_hNaa2Y3DSCChiZxMj5DpEpG/view?usp=sharing
Thank you.

Michael Mase

Thank you, @كنز | Treasure👑 ! I took a quick look, and it looks like you are passing an HTMLCanvasElement as an argument to your createSession call. createSession accepts a CreateSessionOptions object as its argument; which consists of the properties liveRenderTarget and renderWhileTabHidden. For example:

  const canvas = document.getElementById("myCanvas");
  const session = await cameraKit.createSession({ liveRenderTarget: canvas });

كنز | Treasure👑

Hi @Michael Mase its working now, Thank you so much

emiliusvgs

Hi! I have a similar react project code with the same result: black canvas. So I decided to copy the solution but just show me this new message. what does the message mean?
https://prnt.sc/lHzYf3LZzPWg

Thanks!

stevenxu

@emiliusvgs Thanks for posting on the forum! Confirming ticket (4798) for our team to investigate. Will get back to you soon. Hang tight!

Michael Mase

Hi @emiliusvgs! Once a rendering context has been acquired from a canvas element, it cannot be transferred to an OffscreenCanvas; which is a necessary step within Camera Kit. The solution would be to use the default output canvases on your Camera Kit session or to provide a HTMLCanvasElement in which a context has not yet been acquired. I hope this helps!

zPoly

@Michael Mase said:
Hi @emiliusvgs! Once a rendering context has been acquired from a canvas element, it cannot be transferred to an OffscreenCanvas; which is a necessary step within Camera Kit. The solution would be to use the default output canvases on your Camera Kit session or to provide a HTMLCanvasElement in which a context has not yet been acquired. I hope this helps!

Do you have some sample code for how you might alter that code above @Michael Mase to fix this?

I was able to get this running but now I cannot seem to get the canvas to show the back camera. Here is my code below. The rest of my code is similar to the earlier drive file.

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: true },
{ cameraType: 'back' }
);
session.setSource(source, { cameraType: 'back' });

const lens = await cameraKit.lensRepository.loadLens('a1479d7c-a637-45a9-9eac-ad2cd3239800', '8778644e-f3af-4dfd-882a-026d97611664');
await session.applyLens(lens);

await session.play();

emiliusvgs

Hi Michael! I think I don't understand correctly. Can you explain in more detail please?

@Michael Mase said:
Hi @emiliusvgs! Once a rendering context has been acquired from a canvas element, it cannot be transferred to an OffscreenCanvas; which is a necessary step within Camera Kit. The solution would be to use the default output canvases on your Camera Kit session or to provide a HTMLCanvasElement in which a context has not yet been acquired. I hope this helps!

Michael Mase

Hi @emiliusvgs. Typically, we would expect you to see that error when you have called getContext('2d') already on a canvas that you are trying to use with Camera Kit.

If this is not the case, please feel free to share an example project where we can reproduce this issue and I'd be happy to take a look!

Michael Mase

@zPoly said:
I was able to get this running but now I cannot seem to get the canvas to show the back camera. Here is my code below.

Hi @zPoly, the cameraType option in Camera Kit will not enable the back camera on your device; instead it is meant to inform Camera Kit that the back camera is used so that certain back facing features will be enabled (i.e. 2D object tracking). In order for the back facing camera to be used, you'll have to request a MediaStream with a deviceId that is associated with a back facing camera or alternatively request a MediaStream with a facingMode of 'environment' and the device will select one for you (should one be available):

const source = await createUserMediaSource(
    {
      video: {
        facingMode: 'environment',
      },
    },
    { cameraType: 'back' }
  );

emiliusvgs

Hi! thanks for the information. I have been researching and improving the code. Now I have partially solved haha. I see my lens but appear a second canva. Attach my img

When I start the experience I get this error message, but then I close the message and I can see the experience.

This is my code: https://drive.google.com/file/d/1m8O_M1o6OFCw9Y8iSLA9gsL-u5mhiSLu/view?usp=sharing

@Michael Mase said:
Hi @emiliusvgs. Typically, we would expect you to see that error when you have called getContext('2d') already on a canvas that you are trying to use with Camera Kit.

If this is not the case, please feel free to share an example project where we can reproduce this issue and I'd be happy to take a look!

Michael Mase

Hi @emiliusvgs! This is most likely a side effect of React trying to initiate Camera Kit twice. Are you using strict mode? This will cause your useEffect hook to be called twice in a development environment. Consider a different approach to managing your Camera Kit instance/session that ensures it can only be called once. I hope this helps! Feel free to reach out if you have additional questions.

emiliusvgs

Thanks Michael!
I will check again, thanks for all the info. Do you think it is better to work it without react? Also I would like to know which IDE or software do you recommend?

@Michael Mase said:
Hi @emiliusvgs! This is most likely a side effect of React trying to initiate Camera Kit twice. Are you using strict mode? This will cause your useEffect hook to be called twice in a development environment. Consider a different approach to managing your Camera Kit instance/session that ensures it can only be called once. I hope this helps! Feel free to reach out if you have additional questions.

Michael Mase

No problem! The Camera Kit Web SDK is platform agnostic. You can use basic HTML/JS with a bundler like Parcel, for example. Many developers are using Visual Studio Code as their IDE.