WebRTC + Preloaded Frame Process

Let's Play Fun!
CAUTION: still need to fix the "vertical picture"'s cropping
DD 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;

WebRTC + Preload Frame

Let's Play Fun!
CAUTION: still need to fix the "vertical picture"'s cropping
DD 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;

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