More than 5 years have passed since last update.

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

JavaScript

Last updated at 2013-10-21Posted at 2013-10-21

職場の人の結婚式2次会という炎上案件でSeriously.jsというライブラリを使ってみたのですが、これはやばい。プラグインが豊富で、動画を使った"すごいWEB"が簡単に実現できます。

index.html

<!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>

site.coffee

# 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

これだけのコードで
https://vimeo.com/77372762
http://jsdo.it/bugcloud/zRMQ
こんなことができます。
夢が広がるなー

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up