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)

unable to run camera kit SDK on web

كنز | Treasure👑
كنز | Treasure👑 Posts: 5
in General #1

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.

Tagged:

Comments

  • Michael Mase
    Michael Mase Posts: 66 🔥🔥
    #2

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

  • كنز | Treasure👑
    كنز | Treasure👑 Posts: 5
    #3

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

  • Michael Mase
    Michael Mase Posts: 66 🔥🔥
    #4

    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👑
    كنز | Treasure👑 Posts: 5
    #5

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

  • emiliusvgs
    emiliusvgs Posts: 10 🔥
    #6

    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
    stevenxu Posts: 612 👻
    #7

    @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
    Michael Mase Posts: 66 🔥🔥
    #8

    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
    zPoly Posts: 6
    edited June 2023 #9

    @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
    emiliusvgs Posts: 10 🔥
    #10

    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
    Michael Mase Posts: 66 🔥🔥
    #11

    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
    Michael Mase Posts: 66 🔥🔥
    #12

    @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
    emiliusvgs Posts: 10 🔥
    edited July 2023 #13

    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
    Michael Mase Posts: 66 🔥🔥
    #14

    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
    emiliusvgs Posts: 10 🔥
    #15

    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
    Michael Mase Posts: 66 🔥🔥
    #16

    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.

Categories