カメラ画像にCSS3でエフェクトをつける - PHP,MySQL,Flex,JSな日々＋イラストとか

f:id:haru-komugi:20140713234204j:plain
カメラ画像にCSS3でエフェクトをつけます。

サンプルはこちら
http://moeten.info/js/20140713_cssEffectTest/index.html
※Chromeで閲覧してください。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title></title>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>

    $(function(){

      $('input[type="range"]').change(function() {

        var range = this;
        var fx = range.id;
        var unit = range.dataset.unit || 'px';
        var value = range.value + unit;
        $('#myVideo').css('-webkit-filter', fx + '(' + value + ')');

      });

      //カメラの情報を取得
      var cameraData = [];
      MediaStreamTrack.getSources(function(data){

        //カメラ情報を取得して、出力する
        var strCamera = "";
        var len = data.length;
        for( var i = 0 ; i < len ; i ++ ){
          if( data[i].kind == "video" ){
            cameraData.push(data[i]);
          }
        }
        if( cameraData.length == 0 ){
          alert("カメラが見つかりません");
          return;
        }

        //カメラを取得・切り替える
        setCamera();

      });

      //カメラを取得・切り替える
      var cnt = 0;
      var localStream = null;
      function setCamera(){

        //カメラを順番に切り替える
        cnt++;
        if( cnt == cameraData.length ){
          cnt = 0;
        }

        //カメラ取得
        var video = document.getElementById('myVideo');

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
        window.URL = window.URL || window.webkitURL;

        //カメラ再生中の場合は切り替えのため、一旦停止する
        if( localStream ){
          localStream.stop();
        }

        //カメラをIDを使用して取得する
        navigator.getUserMedia(
          {
            video: {
              optional: [{sourceId: cameraData[cnt].id }] //カメラIDを直接指定する
            },
            audio: false
          },
          function(stream) {

            //切り替え時にカメラを停止するため、情報を保存しておく
            localStream = stream;

            //カメラをvideoに結びつける
            video.src = window.URL.createObjectURL(stream);

          },
          function(err) {
            //エラー処理
          }
        );

      }

      //カメラ切り替えボタンクリックイベント
      $("#changeButton").bind("click",function(){
        setCamera();
      });

    });

  </script>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
      font-size: 14px;
    }
    body{
      padding: 10px;
    }
    video{
      margin-bottom: 10px;
    }
    input{
      width: 90%;
    }
    dt{
      width: 40%;
      float: left;
    }
    dd{
      margin-left: 40%;
    }
  </style>
</head>
<body>
<video id="myVideo" autoplay="1" width="100%"></video>
<dl>
  <dt>blur()</dt><dd><input type="range" id="blur" value="0" min="0" max="10" data-unit="px"></dd>
  <dt>grayscale()</dt><dd><input type="range" id="grayscale" value="0" min="0" max="100" data-unit="%"></dd>
  <dt>sepia()</dt><dd><input type="range" id="sepia" value="0" min="0" max="100" data-unit="%"></dd>
  <dt>saturate()</dt><dd><input type="range" id="saturate" value="100" min="0" max="100" data-unit="%"></dd>
  <dt>hue-rotate()</dt><dd><input type="range" id="hue-rotate" value="0" min="0" max="360" data-unit="deg"></dd>
  <dt>invert()</dt><dd><input type="range" id="invert" value="0" min="0" max="100" data-unit="%"></dd>
  <dt>opacity()</dt><dd><input type="range" id="opacity" value="100" min="0" max="100" data-unit="%"></dd>
  <dt>brightness()</dt><dd><input type="range" id="brightness" value="100" min="0" max="100" data-unit="%"></dd>
  <dt>contrast()</dt><dd><input type="range" id="contrast" value="100" min="0" max="100" data-unit="%"></dd>
  <dt>drop-shadow()</dt><dd><input type="range" id="drop-shadow" value="0" min="0" max="10" data-unit="px 0px 10px #000"></dd>
</dl>
<button id="changeButton">カメラ切り替え</button>
</body>
</html>