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;
This is a light, simple, fast demo of WebRTC picture shot.

There are plenty of things to mention.
The (img) latter than (video) will be added with 5px padding.
To align (video) and (img) overlaid on (video)
(img) => should include a CSS class without border, margin, and padding. But still, the padding will be added 5 px from other CSS class.
Since that,
(video) => should include a CSS class without border, margin, and 5px padding to fit with Overlaid image.
Step1: Image Preview Part:

<<==This is a canvas, no padding 5px is added.
<<==This is an image, padding 5px is added.