動画にリアルタイムで合成やフィルタをかけられる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

 
 

Facebook comments:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>