join us on Discord for support, updates, and all things Snap AR! See you there!
Setting up the Web SDK for dummies.
Hello all! I remember during the last office hours some people (just like me) were struggling to figure out how to set the Web SDK. I was finally able to set it up this weekend, so I thought I'd share here the steps that I followed to set up a local development server to see my lens locally.
This is a step-by -step for dummies. If you know what you are doing in web, this might be too basic, and you might want to refer to the actual documentation. I only set one lens at the time and there's nothing fancy happening in here. This is just a very basic "I can see myself with an effect" in a local server. But I think it might be helpful for some people out there. For this setup I used visual studio code and Parcel as it is the easiest way out there to get started.
TO DEVELOP LOCALLY
1. Install Visual Studio Code
Download Visual Studio Code - Mac, Linux, Windows
2. Install Node.js:
3. Open Command Line:
a. Type:
npm -v
b. If it says nothing try
npm install
4. Create a local folder to develop.
5. Open Visual Studio Code and open the folder you created
6. Open Terminal in VS Code and type:
npm init -y
This will create a new Node Js Project
7. install Parcel
npm install parcel
8. Create a "src" directory in your project
9. Create a file called "index.html" inside the "src" folder. Feel free to change the Title or add a Style Sheet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My_project_title</title> </head> <body> Some Sample Text </body> </html>
10. To add a CSS style sheet include a line like this in the head. This assumes your css stylesheet, named "main.css" lives in a folder called "css" inside the folder called "src"
<link rel="stylesheet" href="css/main.css">
11. Now, In the Package.json file that was created a while ago, you want to start your scripts. In this case the first one is the parcel script that will build everything. This Parcel command starts a new development server. We are using "start" to run parcel.
{
"name": "my_project_name",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel src/index.html"
}
}
12. In the VS Code terminal run to see the site updating
npm start
13. If everything is working fine it will give you back a message indicating is running the app in a localhost address. Also if you make any changes in your code and save it, it will update that localhost immediately. The "dist" directory is your app built with all their dependencies by parcel
14. Now that we know is working, let's install Snap Camera kit. In the terminal run:
npm install --save @snap/camera-kit
Now if you go to your package.json you can see your camera kit
{
"name": ""my_project_name"",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "parcel index.html",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "^2.9.3",
"process": "^0.11.10"
},
"dependencies": {
"@snap/camera-kit": "^0.10.0"
}
}
15. Create a new folder called "js", and inside that a file called "main.js". This is where we are going to do all our Camera Kit commands.
16. Now we need to reference that js file in our index html. So let's go back there and add this line in the head:
<script type= "module" src="js/main.js"></script>
Your HTML will be looking like this by now.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My_project_title</title> <link rel="stylesheet" href="css/main.css"> <script type= "module" src="js/main.js"></script> </head> <body> Some Sample Text </body> </html>
**17. Now you want to add your Snap CameraKit code in your main js. The documentation that worked the best for me was this one, Even though I had to add some lines for it to work.
CameraKit Web SDK - v0.10.0-alpha.1 (snapchat.com)
import { bootstrapCameraKit, Transform2D } from "@snap/camera-kit";
import { createMediaStreamSource } from "@snap/camera-kit";
(async function main() {
const apiToken = "API Token value copied from the SnapKit developer portal";
const cameraKit = await bootstrapCameraKit({ apiToken });
const session = await cameraKit.createSession();
const canvas = document.getElementById("my-
canvas").replaceWith(session.output.live);
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const source = createMediaStreamSource(stream, {
transform: Transform2D.MirrorX,
cameraType: "back",
});
session.setSource(source);
//Use version below to apply single Lens: First Lens ID, Then Lens Group ID
const lens = await cameraKit.lensRepository.loadLens("A lens ID found in the Camera
Kit Portal", "A lens group ID");
await session.applyLens(lens);
await session.play("live");
console.log("Lens rendering has started!");
})();
18. Now I need to create "my-canvas" in my index HTML file so Snap Camera can render there. In the body part of the index.html add
<div id="my-canvas"></div>
This is how your main HTML should look by now.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My_project_title</title> <link rel="stylesheet" href="css/main.css"> <script type= "module" src="js/main.js"></script> </head> <body> Some Sample Text <div id="my-canvas"></div> </body> </html>
19. You should see your Lens now in the dev environment
20. The if you used an src folder, your project structure should look like this (without .gitattributes and .gitignore)
folder structure
Comments
-
@aestarita This is awesome!!! Thank you so much in putting this together for the community. Very very helpful.
0 -
Thank you for sharing this helpful guide! Setting up the Web SDK can be daunting, and your step-by-step instructions using Visual Studio Code and Parcel make it more accessible, especially for those new to web development. Your emphasis on simplicity and basic functionality, like seeing oneself with an effect on a local server, is a great starting point. This guide is undoubtedly beneficial for those navigating the initial setup process. Well done!
Also I would like to suggest you below are the links to the finest learning platforms for your bright future
1. W3 School
2. Iqra Technology
3. JavaPoint1
