Teaching Newbies since 2014

kauress

  • Home
  • Javascript ❤
    • JavaScript
    • Node.js
  • WebDev Tuts
  • screencasts
  • Resources
  • VR & AR
  • Contact
  • Github
  • Twitter
  • YouTube
  • RSS
  • C++
You are here: Home / Apps / Browser Snapchat Clone

November 29, 2019 by: Kauress

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.
Snapchat clone
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.

Woot Woot! Getting UE4 clients!
#2020 the year of

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2021 ·Kauress