Browser Snapchat Clone

Not sure why I never updated my blog with that but last summer I coded a browser based SnapChat clone. Oh! so much fun. It’s been coded by using JavaScript and a face tracking library called tracking.js NOTE: for whatever reason the code doesn’t work for you is mostly like (95%) because of a cross browser compatibility issue. I’ve tested this on IE, Chrome and Safari.

• 

• 

• 

I’ve used the inbuilt cam to display the user’s face on the screen, and then used tracking.js to track the co-ordinates on-top of which a vector image (PNG) of the filter should be placed. A major issue was NOT the AR aspect of it using tracking.js BUT rather cross browser compatibility. That was a major pain point. Here’s the code for it which is on codepen, has to be tested across different browsers though

See the Pen Snapcat Snapchat by Kauress (@Kauress) on CodePen.

Here is another codepen:

See the Pen Web Snapchat clone <3 by Kauress (@Kauress) on CodePen.