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)

[Guide] Camera Kit Web for Beginners

stevenxu
stevenxu Posts: 612 šŸ‘»
edited April 5 in General #1

Hello community members!

We've been attentively listening to your valuable feedback through the forums and office hours, and one thing became clear - some of you were facing challenges when trying to kickstart your Camera Kit Web experience. We want to express our gratitude for sharing your thoughts with us because it's your feedback that drives us to improve.

Thanks to your input, our talented @Michael Mase was able to create a comprehensive guide that addresses this very issue! Now, starting your Camera Kit Web experience is set to be smoother than ever!

If you're new to web development and have only a little experience with HTML, CSS, and JavScript, fear not! We will start from the very beginning, laying the foundation and building up step by step.

Documentation Guide here: https://docs.snap.com/camera-kit/quick-start/integrate-sdk/integrate-sdk-web/guides/camera-kit-web-for-beginners

Tagged:

Comments

  • stevenxu
    stevenxu Posts: 612 šŸ‘»
    #2

    As you use it, please remember to share your thoughts in the comments here. Your feedback remains essential in helping us fine-tune and enhance our resources including this guide!

  • Herson Rodrigues
    Herson Rodrigues Posts: 3
    #3

    I follow all this guidance, but somehow, when it tries to read my groupLensId, I get a 403 forbidden response. What did I miss?

    https://ibb.co/z5Ywq0Q

  • ruyabaraz
    ruyabaraz Posts: 4
    edited February 1 #4

    I have tried every single step in this tutorial: https://docs.snap.com/camera-kit/guides/tutorials/web-tutorials/camera-kit-web-for-beginners#2-setup-and-installation

    AND this one:

    https://www.youtube.com/watch?v=ZQM9Ua_JKMY&t=2244s

    the first one didn't work at all and the second one I only got the "powered by snap" image and nothing else. :(

  • ruyabaraz
    ruyabaraz Posts: 4
    #5

    here is a screen recording of what I have done:
    https://youtu.be/PLJ5Gt_-zCk

  • Chris Topher
    Chris Topher Posts: 1
    #6

    @ruyabaraz First thing I notice is that you don't want to actually include the angle brackets (< >) for your apiToken or lens group Id strings. In the documentation, those are meant to show that they are a placeholder for your strings.

  • ruyabaraz
    ruyabaraz Posts: 4
    edited February 1 #7

    THank you. I deleted those. And it still doesn't work :# I now have the webcam but not the lens

    @Chris Topher said:
    @ruyabaraz First thing I notice is that you don't want to actually include the angle brackets (< >) for your apiToken or lens group Id strings. In the documentation, those are meant to show that they are a placeholder for your strings.

  • Dima Susidko
    Dima Susidko Posts: 1
    edited February 8 #8

    Hello there,
    I'm on the second step and wondering how to run command in terminal "create npm create vite@latest"
    My terminal says "bash: npm: command not found"
    Vite is installed as extension in VS Studio

    Thanks

  • Kevando
    Kevando Posts: 76 šŸ”„šŸ”„
    #9

    this is a fantastic walkthrough

  • Kevando
    Kevando Posts: 76 šŸ”„šŸ”„
    #10

    Vite is a really great web server! I was able to deploy to netlify no problemo. all with vanilla js. wow, so cool.

    One thing that really helps too is being able to run the web server on my phone to. Here's how I did that on mac+iphone:

    Install this plugin

    npm install -D @vitejs/plugin-basic-ssl

    Then run the local development web server like this:

    npm run dev -- --host

    You should then get a second url with https in addition to the localhost:5173 for me that is https://192.168.50.55:5173 and now you can visit that url from your phone and see changes immediately. this helped alot with getting the video player to look how i want because the only way to do that is by using it in ios safari on my phone. hope this helps someone! :D

  • Kevando
    Kevando Posts: 76 šŸ”„šŸ”„
    #11

    https://stackoverflow.com/a/72998216/1228882

  • Stephan Rubayiza
    Stephan Rubayiza Posts: 1
    #12

    @ruyabaraz Were you able to find a workaround regarding the 2nd tutorial? I've also been stuck on the blank page with the Powered by Snap logo at the bottom for days. The camera and the lens don't activate. Thanks.

Categories