Javascriptでカメラ(WebCam)の映像を鏡像にして眼鏡画像を合成する

Javascriptでカメラ(WebCam)の映像を鏡像にして眼鏡画像を合成する


Javascriptでカメラ(WebCam)映像を鏡像(左右反転)表示し、メガネの画像を合成してリアルタイム表示させる

Javascriptでカメラ(WebCam)の映像を鏡像にしてメガネ画像を合成を実行中

カメラにご自身の顔を映して、メガネ画像にご自身の顔の位置を合わせてください(メガネ画像は固定位置です)。メガネを掛けている映像になります。


ソースコード


<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");
  //左右反転表示させる
  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> 


Mam's WebSite