■ land.htm ■

戻る 

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

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>Land の二色法</TITLE>
<svg height=0 style="height:0">
<filter id="filter-c" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix id="mtx" in="SourceGraphic" type="matrix"
   values="0 0 0 0 0
           0 0 0 0 0
           0 0 0 0 0
           0 0 0 0 1"
  ></feColorMatrix>
</filter>
<filter id="filter-r" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix in="SourceGraphic" type="matrix"
   values="1 0 0 0 0
           0 0 0 0 0
           0 0 0 0 0
           0 0 0 0 1"
  ></feColorMatrix>
</filter>
<filter id="filter-g" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
<feColorMatrix in="SourceGraphic" type="matrix"
   values="0 1 0 0 0
           0 1 0 0 0
           0 1 0 0 0
           0 0 0 0 1"
  ></feColorMatrix>
</filter>
</svg>
</HEAD>

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

<FORM>
<TABLE BORDER=0 CELLSPACING=10 CELLPADDING=0 STYLE="margin:0 auto">
<TR><TD ALIGN=CENTER>
<VIDEO ID="vid_c" WIDTH=0 HEIGHT=0 STYLE="filter:url(#filter-c); -webkit-filter:url(#filter-c)"></VIDEO>
</TD></TR>
<TR><TD ALIGN=CENTER NOWRAP>
<VIDEO ID="vid_r" WIDTH=0 HEIGHT=0 STYLE="filter:url(#filter-r); -webkit-filter:url(#filter-r)"></VIDEO>
<VIDEO ID="vid_g" WIDTH=0 HEIGHT=0 STYLE="filter:url(#filter-g); -webkit-filter:url(#filter-g); margin-left:1em"></VIDEO>
</TD></TR>
<TR><TD ALIGN=CENTER NOWRAP>
比率<BR>
<INPUT TYPE=RANGE MIN="0" MAX="1" STEP="any" VALUE="0.3" onInput="set_ratio(Number(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.autoplay = true;
  elem_vid_r.autoplay = true;
  elem_vid_g.autoplay = true;
  elem_vid_c.addEventListener("canplay", wait, false);
  if(elem_vid_c.mozSrcObject === undefined) {
    if(elem_vid_c.srcObject === undefined)
      elem_vid_c.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.srcObject = elem_vid_r.srcObject = elem_vid_g.srcObject = stream;
  }
  else {
    elem_vid_c.mozSrcObject = elem_vid_r.mozSrcObject = elem_vid_g.mozSrcObject = stream;
  }
  elem_vid_c.play();
  elem_vid_r.play();
  elem_vid_g.play();
}

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

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

  setTimeout(wait, 50);
}

function set_ratio(ratio) {
  mtx_values.getItem(0).value = 1 - ratio;  // 赤の成分
  mtx_values.getItem(1).value = mtx_values.getItem(6).value = mtx_values.getItem(11).value
    = ratio;  // 緑の成分の輝度
}

  elem_vid_c = document.getElementById("vid_c");
  elem_vid_r = document.getElementById("vid_r");
  elem_vid_g = document.getElementById("vid_g");
  mtx_values = document.getElementById("mtx").values.baseVal;

  set_ratio(0.3);

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

//-->
</SCRIPT>

</BODY>

</HTML>