[Guide] Camera Kit Web for Beginners
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
Comments
-
I follow all this guidance, but somehow, when it tries to read my groupLensId, I get a 403 forbidden response. What did I miss?
0 -
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.
0 -
here is a screen recording of what I have done:
https://youtu.be/PLJ5Gt_-zCk1 -
@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.
1 -
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.0 -
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 StudioThanks
1 -
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!
1 -
-
@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.
0