Javascriptでカメラ(WebCam)映像を鏡像（左右反転）表示し、メガネの画像を画面中央固定で合成してリアルタイム表示させます
本サンプルでは、眼鏡画像は目の位置に追従しません。
実行中
カメラにご自身の顔を映して、メガネ画像にご自身の顔の位置を合わせてください（メガネ画像は固定位置です）。メガネを掛けている映像になります。
鏡像にするのはとても簡単で、表示する要素にCSSで style="transform:scaleX(-1);" を追加するだけです。
Javascriptソースコード
<div><canvas id="preview"></canvas></div>
<script>
var video,prev,prev_ctx,w,h,img;
window.addEventListener('load',function(event){
img=new Image();
img.src='./imgs/glasses.png';
video=document.createElement('video');
video.setAttribute("autoplay","");
video.setAttribute("muted","");
video.setAttribute("playsinline","");
video.onloadedmetadata = function(e){video.play();};
prev=document.getElementById("preview");
prev_ctx=prev.getContext("2d", {willReadFrequently:true});
//左右反転表示させる
prev.style.transform="scaleX(-1)";
//カメラ使用の許可ダイアログが表示される
navigator.mediaDevices.getUserMedia(
//マイクはオフ, カメラの設定 前面カメラを希望する 640×480を希望する
{"audio":false,"video":{"facingMode":"user","width":{"ideal":640},"height":{"ideal":480}}}
).then( //許可された場合
function(stream){
video.srcObject = stream;
//0.5秒毎にスキャンする
setTimeout(Scan,500,true);
}
).catch(
//許可されなかった場合
);
function Scan(first){
if(first){
//選択された幅高さ
w=video.videoWidth;
h=video.videoHeight;
//画面上の表示サイズ
prev.style.width=(w/2)+"px";
prev.style.height=(h/2)+"px";
//内部のサイズ
prev.setAttribute("width",w);
prev.setAttribute("height",h);
}
prev_ctx.drawImage(video,0,0,w,h);
nw=img.naturalWidth;
nh=img.naturalHeight;
ww=w/3;
hh=ww*nh/nw;
let x1=(w-ww)/2;
let y1=(h/3);
prev_ctx.drawImage(img,0,0,nw,nh,x1,y1,ww,hh);
setTimeout(Scan,100,false);
}
});
</script>