■ land2.htm ■

戻る 

<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>Land の二色法（2）</TITLE>
</HEAD>

<BODY onLoad="init()" STYLE="background-color:#CCFFFF; margin:0">
<DIV STYLE="text-align:center">
<BR>
<B>Land の二色法（2）</B>
<BR>

<FORM>
<TABLE BORDER=0 CELLSPACING=10 CELLPADDING=0 STYLE="margin:0 auto">
<TR><TD ALIGN=CENTER STYLE="position:relative">
<DIV STYLE="display:inline-block; position:relative; background-color:#FF0000">
<VIDEO ID="vid_c_r" WIDTH=0 HEIGHT=0 STYLE="vertical-align:top; mix-blend-mode:multiply"></VIDEO>
</DIV>
<!-- grayscale() は 0.2126R + 0.7152G + 0.0722B の計算式を使っている -->
<DIV ID="green" STYLE="display:inline-block; position:absolute; left:0; top:0; background-color:#00FF00; filter:grayscale() brightness(calc(1 / 0.7152))">
<VIDEO ID="vid_c_g" WIDTH=0 HEIGHT=0 STYLE="vertical-align:top; mix-blend-mode:multiply"></VIDEO>
</DIV>
</TD></TR>
<TR><TD ALIGN=CENTER NOWRAP>
<DIV STYLE="display:inline-block; background-color:#FF0000;">
<VIDEO ID="vid_r" WIDTH=0 HEIGHT=0 STYLE="vertical-align:top; mix-blend-mode:multiply"></VIDEO>
</DIV>
<DIV STYLE="display:inline-block; background-color:#00FF00; filter:grayscale() brightness(calc(1 / 0.7152)); margin-left:1em">
<VIDEO ID="vid_g" WIDTH=0 HEIGHT=0 STYLE="vertical-align:top; mix-blend-mode:multiply"></VIDEO>
</DIV>
</TD></TR>
<TR><TD ALIGN=CENTER NOWRAP>
比率<BR>
<INPUT TYPE=RANGE MIN="0" MAX="1" STEP="any" VALUE="0.5" onInput="set_ratio(this.value)" STYLE="width:2in">
</TD></TR>
</TABLE>
</FORM>
<BR>

</DIV>

<SCRIPT TYPE="text/javascript">
<!--

function init() {
  if(navigator.mozGetUserMedia == undefined) {
    if(navigator.webkitGetUserMedia == undefined)
      navigator.getUserMedia({video:true, audio:false}, success, error);
    else
      navigator.webkitGetUserMedia({video:true, audio:false}, success, error);
  }
  else {
    navigator.mozGetUserMedia({video:true, audio:false}, success, error);
  }
}

function success(stream) {
  elem_vid_c_r.autoplay = true;
  elem_vid_c_g.autoplay = true;
  elem_vid_r.autoplay = true;
  elem_vid_g.autoplay = true;
  elem_vid_c_r.addEventListener("canplay", wait, false);
  if(elem_vid_c_r.mozSrcObject === undefined) {
    if(elem_vid_c_r.srcObject === undefined)
      elem_vid_c_r.src = elem_vid_c_g.src = elem_vid_r.src = elem_vid_g.src
        = (window.URL == undefined || window.URL.createObjectURL == undefined)
            ? stream : window.URL.createObjectURL(stream);
    else
      elem_vid_c_r.srcObject = elem_vid_c_g.srcObject = elem_vid_r.srcObject = elem_vid_g.srcObject = stream;
  }
  else {
    elem_vid_c_r.mozSrcObject = elem_vid_c_g.mozSrcObject = elem_vid_r.mozSrcObject = elem_vid_g.mozSrcObject = stream;
  }
  elem_vid_c_r.play();
  elem_vid_c_g.play();
  elem_vid_r.play();
  elem_vid_g.play();
}

function error(err) {
  alert("カメラが使用できません");
}

function wait() {
  if(elem_vid_c_r.videoWidth) {
    elem_vid_r.width = elem_vid_g.width
      = (elem_vid_c_r.width = elem_vid_c_g.width = elem_vid_c_r.videoWidth) >> 2;
    elem_vid_r.height = elem_vid_g.height
      = (elem_vid_c_r.height = elem_vid_c_g.height = elem_vid_c_r.videoHeight) >> 2;
    return;
  }

  setTimeout(wait, 50);
}

function set_ratio(ratio) {
  elem_green.style.opacity = ratio;
}

  elem_vid_c_r = document.getElementById("vid_c_r");
  elem_vid_c_g = document.getElementById("vid_c_g");
  elem_vid_r = document.getElementById("vid_r");
  elem_vid_g = document.getElementById("vid_g");
  elem_green = document.getElementById("green");

  set_ratio("0.5");

  // ページを再ロードしたときのため
  document.forms[0].reset();

//-->
</SCRIPT>

</BODY>

</HTML>