動画にリアルタイムで合成やフィルタをかけられるSeriously.jsがすごい

Standard

職場の人の結婚式2次会という炎上案件で使ったSeriously.jsというライブラリがやばい。
https://github.com/brianchirls/Seriously.js
 

Seriously.js demo from bugcloud on Vimeo.

 
これ、動画中の赤い色を検出して切り抜く(ブルースクリーン的なやつ)と、動画にASCIIフィルタをかけたやつを重ねてるんですけど、これが↓みたいな短いコードでできます。既存のプラグインを組み合わせるだけでもいろんなことできそう。
 

<!DOCTYPE html>
<html dir="ltr" lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>.dev</title>
    <style>
      video, #canvas, #canvas-ascii {
        left: 0;
        top: 0;
        height: 480px;
        width: 640px;
        position: absolute;
        z-index: 0;
      }

      video {
        display: none;
      }

      #canvas {
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <video id="main-video" autoplay></video>
    <canvas id="canvas" width="640" height="480"></canvas>
    <canvas id="canvas-ascii" width="640" height="480"></canvas>
    <script src="js/jquery.min.js"></script>
    <script src="js/seriously.js"></script>
    <script src="js/effects/seriously.ascii.js"></script>
    <script src="js/effects/seriously.chroma.js"></script>
    <script src="js/site.js"></script>
  </body>
</html>
# setup cross browser functions
window.URL = window.URL || window.webkitURL
navigator.getUserMedia =
  navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia ||
  navigator.msGetUserMedia

class Site
  constructor: () ->
    @$video = $("#main-video")
    @video = @$video.get 0

    @seriouslyAscii = new Seriously()
    @sVideoAscii = @seriouslyAscii.source "#main-video"
    @canvasAscii = @seriouslyAscii.target "#canvas-ascii"
    @ascii = @seriouslyAscii.effect "ascii"
    @ascii.source = @sVideoAscii
    @canvasAscii.source = @ascii
    @seriouslyAscii.go()

    @seriously = new Seriously()
    @sVideo = @seriously.source "#main-video"
    @canvas = @seriously.target "#canvas"
    # set up chroma
    @chroma = @seriously.effect "chroma"
    @chroma.screen = "rgb(125 ,2, 25)"
    @chroma.clipWhite = 0.65
    @chroma.clibBlack = 0.2125
    @chroma.weight = 0.1
    @chroma.source = @sVideo
    @canvas.source = @chroma
    @seriously.go()

    unless navigator.getUserMedia
      @getUserMediaFallback()
    else
      navigator.getUserMedia { audio: false, video: true }, @getUserMediaCallback, @getUserMediaFallback

  getUserMediaFallback: () ->
    alert "Your browser dosen't support 'navigator.getUserMedia'"
  getUserMediaCallback: (stream) =>
    @video.src = window.URL.createObjectURL stream

$ ->
  _site = new Site

 
 

DD_belatedPNG.jsでIE6が暴走する

Standard

というか、暴走しました。
http://bugcloud.com/worcloud/dev/1/
これをIE6で見れば、シングルコアとかのマシンならCPU 100%になってたぶんフリーズします。
たぶんココってところだけ書きますと、
 
HTML

<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('ul li a');
</script>
......
<ul>
  <li><a href="javascript:void(0)">暑いです。</a></li>
  <li><a href="javascript:void(0)">暑いです。</a></li>
</ul>

 
CSS

ul li,
ul li a {
  display: block;
  float: right;
}
ul li a {
  background: url(../img/li.png) repeat left top;
}
ul li a:hover {
  background-position: right bottom;
}

 
 
ul li aが1行だと暴走しない、

ul li,
ul li a {
  display: block;
  float: left;
}

だと暴走しない、さらに

ul li,
ul li a {
  display: block;
  float: right;
  height: 100px;
  width: 100px;
}

みたいに幅と高さを指定すると暴走しない、さらにさらに

ul {
  float: right;
}

ul li,
ul li a {
  display: block;
}

みたいに親要素にfloat:right;を指定してる時は暴走しないという検証する人泣かせな現象です。
 
DD_belatedPNG.jsの113行目、

attachHandlers: function (el) {
  var self, handlers, handler, moreForAs, a, h;
  self = this;
  handlers = {resize: 'vmlOffsets', move: 'vmlOffsets'};
  if (el.nodeName == 'A') {
    moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', blur: 'handlePseudoHover'};
    for (a in moreForAs) {
      if (moreForAs.hasOwnProperty(a)) {
        handlers[a] = moreForAs[a];
      }
    }
  }
  for (h in handlers) {
    if (handlers.hasOwnProperty(h)) {
      handler = function () {
        self[handlers[h]](el);
      };
      el.attachEvent('on' + h, handler);
    }
  }
  el.attachEvent('onpropertychange', this.readPropertyChange);
}

でハンドルしてるvmlOffsetsっていうメソッドが無限に実行されるっぽいです。
 
回避策として、
MSすら撲滅しようとしているIE6を未だに使ってる人は、画像の後ろが多少グレーだろうがたぶん気にしないので、透過にしようとなんてしない
というのをオススメします。