JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<script>
    // Settings
    var FileAPI = {
    debug: true // debug mode
    , media: true // use webcam
    , staticPath: 'http://mailru.github.io/FileAPI/dist/'
    };
</script>

<script src="http://mailru.github.io/FileAPI/dist/FileAPI.js"></script>
<script src="http://mailru.github.io/FileAPI/plugins/FileAPI.exif.js"></script>

<div style="padding-bottom: 100px;">
        <h2>WebCam</h2>
        <div id="box"></div>

        <div id="readyBox" style="display: none">
            <button id="shotBtn">shot</button>
            <button id="startBtn">start</button>
            <button id="stopBtn">stop</button>

            <h3>Shots</h3>
            <div id="shots"><b></b></div>

            <h3>Server</h3>
            <div id="server"><b></b></div>
        </div>
    </div>

JavaScript

FileAPI.Camera.publish(box, { width: 320, height: 240 }, function (err, cam){
    if( err ){
        alert('WebCam or Flash not supported :[');
    } else {
        readyBox.style.display = '';
        
        FileAPI.event.on(startBtn, 'click', function (){
            cam.start();
        });
        
        FileAPI.event.on(stopBtn, 'click', function (){
            cam.stop();
        });
        
        FileAPI.event.on(shotBtn, 'click', function (){
            if( cam.isActive() ){
                var shot = cam.shot();
                
                /*
                shot
                .clone()
                //.preview(100, 100)
                .get(function (err, img){
                    //img.style.marginRight = '5px';
                    //shots.insertBefore(img, shots.firstChild);
                })
                ;
                */
                
                /*
                var file = shot
                .preview(200, 200)
                .overlay({
                    x: 5
                    , y: 5
                    , src: '../statics/watermark.png'
                    , rel: FileAPI.Image.RIGHT_TOP
                })
                ;
                */
                
                FileAPI.upload({
                    url: 'http://rubaxa.org/FileAPI/server/ctrl.php'
                    , files: { shot: shot.get(function() {}) }
                    , complete: function (err, xhr){
                        var res = JSON.parse(xhr.responseText);
                        var img = new Image;
                        img.src = res.images.shot.dataURL;
                        img.style.marginRight = '5px';
                        server.insertBefore(img, server.firstChild);
                    }
                });
            }
        });
    }
});