Image Overlay with js and CSS

The overlay PNG might not be transparent due to some problems

  solution:
  you must put following 2 lines css to describe PNG's img

  border: none !important;
  background: transparent !important


  Loading speed may be slow due to some widget's javascript code. i.e. Plurk (will be removed in the future)

Demo of CSS image Overlay

WebRTC only Demo - Cross Platfrom

Let's Play Fun!
CAUTION: still need to fix the "vertical picture"'s cropping
Ref:
1.Basic Tutorial: MDN WebRTC Tutorial
2.Cross Compatibility: Cross-Browser-Compatible-WebRTC
This example is (1) + (2)'s window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

Photobooth.js test

The key point is:
Use Document->Ready instead of Window->Load
Otherwise, Photobooth won't be able to execute