JSFiddle - React, Tailwind, and code Playground

by Licson Lee

HTML

<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://licson0729.github.io/CanvasEffects/CanvasEffects.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="flow ui-state-default ui-corner-all">
    <h3 class="ui-state-default ui-corner-all ui-helper-clearfix">Before:</h3>
    <video autoplay="autoplay" width="350" height="350"></video>
</div>
<div class="flow ui-state-default ui-corner-all">
    <h3 class="ui-state-default ui-corner-all ui-helper-clearfix">After:</h3>
    <canvas id="canvas" width="350" height="350"></canvas>
</div>
<div class="flow ui-state-default ui-corner-all">
    <h3 class="ui-state-default ui-corner-all ui-helper-clearfix">Effect controls</h3>
    <div class="effect ui-state-default ui-corner-all">
        <h3 class="ui-state-default ui-corner-all ui-helper-clearfix">Brightness/Contrast</h3>
        Brightness:<div id="light"></div>
        Contrast:<div id="contrast"></div>
    </div>
    <div class="effect ui-state-default ui-corner-all">
        <h3 class="ui-state-default ui-corner-all ui-helper-clearfix">Hue/Saturation</h3>
        Hue:<div id="hue"></div>
        Saturation:<div id="sat"></div>
        Lightness:<div id="light"></div>
    </div>
    <div class="effect ui-state-default ui-corner-all">
        <h3 class="ui-state-default ui-corner-all ui-helper-clearfix">Box Blur</h3>
        Blur radius:<div id="blur"></div>
    </div>
    <div class="effect ui-state-default ui-corner-all">
        <h3 class="ui-state-default ui-corner-all ui-helper-clearfix">One-click effects</h3>
        <div id="buttons1">
            <input type="checkbox" id="sepia" /><label for="sepia">Sepia</label>
            <input type="checkbox" id="greyscale" /><label for="greyscale">Greyscale</label>
            <input type="checkbox" id="invert" /><label for="invert">Invert</label>
            <input type="checkbox" id="hdr"><label for="hdr">Fake...

CSS

.flow {
    float:left;
    margin:5px;
    padding:5px;
    border: 1px solid #000;
}
.flow h3 {
    margin-bottom:5px;
}
.effect {
    padding:5px;
    border: 1px solid #000;
    margin-bottom:5px;
}

JavaScript

// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function( /* function */ callback, /* DOMElement */ element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

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

$(function() {
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var e = new CanvasEffects(canvas, { useWorker: false });
    var hue = 0,
        sat = 0,
        light = 0,
        contrast = 0;
        blur = 0;
    var sepia = false,
        invert = false,
        greyscale = false,
        emboss = false,
        sharpen = false,
        fedges = false,
        hdr = false;

    $('#hue').slider({
        min: -360,
        max: 360,
        value: 0,
        slide: function(e, ui) {
            hue = ui.value;
        }
    });
    $('#sat').slider({
        min: -1,
        max: 1,
        step: 0.01,
        value: 0,
        slide: function(e, ui) {
            sat = ui.value;
        }
    });
    $('#light').slider({
        min: -100,
        max: 100,
        value: 0,
        slide: function(e, ui) {
            light = ui.value;
        }
    });
    $('#contrast').slider({
        min: -100,
        max: 100,
        value: 0,
        slide: function(e, ui) {
            contrast = ui.value;
        }
    });
    $('#blur').slider({
        min: 0,
        max: 10,
        value: 0,
        step: 1,
        slide: function(e, ui) {
            blur = ui.value;
        }
    });
    $('#buttons1,#buttons2').buttonset();
    $('#sepia').change(function() {
        sepia =...