getUserMedia()で、カメラと透過マスク

序盤なので軽いところから。
WebRTCの入り口として、getUserMedia()でカメラやマイクにアクセスするところから始めると楽しいですよね。
クリスマスにかこつけて、ツリー型の透過マスク(PNG)を使ってみました。

ツリーの周囲が抜けているものや、

こんな風にツリー型に抜けているフレームを用意します。

これを使って、ビデオタグに -webkit-mask を使ってマスクします。(webkitの場合)

<video id="tree_mask_video" autoplay="1" style="width:320px; height:240px; -webkit-mask: url('http://sammple.com/green_tree_trans.png');"></video>
<video id="frame_mask_video" autoplay="1" style="width:320px; height:240px; -webkit-mask: url('https://sammple.com/blueframe_tree_trans.png');"></video>

あとはいつものように、getUserMedia()からビデオストリームを取得します。

 function startVideo() {
  navigator.webkitGetUserMedia({video: true, audio:false} ,
    function(stream) { // success
      document.getElementById('tree_mask_video').src = window.webkitURL.createObjectURL(stream);
      document.getElementById('frame_mask_video').src = window.webkitURL.createObjectURL(stream);
   },
   function(err) { // error
    console.log(err);
   }
  );
 }

いつもの自分カメラが、ちょっとクリスマスっぽくなりました。（そんだけです）
動作サンプル(Chrome用)はこちら https://lab.infocom.co.jp/demo/webrtc-mask-video.html で見れます。

WebRTC/getUserMedia()はそれ単独でなく、CSS3と組み合わせてフィルターや変形、回転など、印象的な見せ方ができそうですね。