Snapchat-like video face filter in the browser

Creative Coding

Xavier Bourry

  • CTO & cofounder of Jeeliz, a startup specialized in deep learning using WebGL, mainly for client-side video processing Demo here,
  • Before : Freelance developer & trainer in Paris,
  • WebGL Academy - vanilla WebGL/Three.JS interactive tutorials : www.webglacademy.com,
  • Email : [email protected], twitter : @xavierbourry

Which solution ?

  • server side → not scalable, delay...
  • proprietary solutions → not embeddable everywhere,
  • landmark based solutions → what to do with keypoints ? Often not robust, not bearded friendly.

What we have built ?

  • A javascript lib → runs client side, everywhere,
  • Global detection → more robust,
  • Deep learning → parallelisable,
  • implemented with WebGL → FAST

Jeeliz Facefilter

  • Free, Apache2 license,
  • Multiple face detection,
  • Mobile friendly,
  • Mouth opening detection
  • Integration examples with various renderers : THREE.JS, BABYLON.JS, A-FRAME, Canvas2D, CSS3D.


Browse the Github Repo

THREE.JS

  • 3D engine in the browser,
  • Free, MIT license,
  • Quality doc, good examples, large dev community,
  • Lightweight, low level still accessible.



Official website

Let's start !



Step by step interactive tutorial:


WebGLAcademy.com tuto n°34

Questions ?


[email protected] / @xavierbourry