如何在表单中上传具有给定名称的网络摄像头快照?

时间:2015-07-01 16:04:24

标签: javascript php jquery upload webcam

我有这个插件拍摄快照并将jpg上传到服务器。现在,我正在使用函数日期('YmdHis')。 '.jpg'命名文件。但我想在我的html文件中提供文件名。我有4个文件:TEST.HTLM与我的html,WEBCAM.JS与一些JS和TEST.PHP与服务器功能。我有webcam.swf文件将图片传递给TEST.PHP。

非常感谢你!

以下是我的代码:

的test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
           "http://www.w3.org/TR/html4/loose.dtd">

        <html lang="en">

        <body>
            <table><tr><td valign=top>
            <h1>WEB CAM Test Page</h1>

            NAME:<input id="name"><BR>

            <!-- First, include the JPEGCam JavaScript Library -->
            <script type="text/javascript" src="webcam.js"></script>

            <!-- Configure a few settings -->
            <script language="JavaScript">
                webcam.set_api_url( 'test.php' );
                webcam.set_quality( 90 ); // JPEG quality (1 - 100)
                webcam.set_shutter_sound( false ); // play shutter click sound
            </script>

            <!-- Next, write the movie to the page at 400x400 -->
            <script language="JavaScript">
                document.write( webcam.get_html(400, 400) );
            </script>

            <!-- Some buttons for controlling things -->
            <br/><form>
                <input type=button value="Capturar Foto" onClick="capturarFoto();">
            </form>
            <script>
            <!-- this function check if the user have already give a name to the span he is about to take --!>
            function capturarFoto(){
                if(document.getElementById("name").value != ""){
                    take_snapshot();
                }else{
                    alert("Please, name the photo before you take it.");
                }
            }
            </script>
            <!-- Code to handle the server response (see test.php) -->
            <script language="JavaScript">
                webcam.set_hook( 'onComplete', 'my_completion_handler' );

                function take_snapshot() {
                    // take snapshot and upload to server
                    document.getElementById('upload_results').innerHTML = '<h1>Uploading...</h1>';
                    webcam.snap();
                }

                function my_completion_handler(msg) {
                    // extract URL out of PHP output
                    if (msg.match(/(http\:\/\/\S+)/)) {
                        var image_url = RegExp.$1;
                        // show JPEG image in page
                        document.getElementById('upload_results').innerHTML = 
                            '<h1>Upload Successful!</h1>' + 
                            '<h3>JPEG URL: ' + image_url + '</h3>' + 
                            '<img src="' + image_url + '">';

                        // reset camera for another shot
                        webcam.reset();
                    }
                    else alert("PHP Error: " + msg);
                }
            </script>

            </td><td width=50>&nbsp;</td><td valign=top>
                <div id="upload_results" style="background-color:#eee;"></div>
            </td></tr></table>
        </body>
        </html>

WEBCAM.JS

window.webcam = {
    version: '1.0.9',

    // globals
    ie: !!navigator.userAgent.match(/MSIE/),
    protocol: location.protocol.match(/https/i) ? 'https' : 'http',
    callback: null, // user callback for completed uploads
    swf_url: 'webcam.swf', // URI to webcam.swf movie (defaults to cwd)
    shutter_url: 'shutter.mp3', // URI to shutter.mp3 sound
    api_url: '', // URL to upload script
    loaded: false, // true when webcam movie finishes loading
    quality: 90, // JPEG quality (1 - 100)
    shutter_sound: true, // shutter sound effect on/off
    stealth: false, // stealth mode (do not freeze image upon capture)
    hooks: {
        onLoad: null,
        onComplete: null,
        onError: null
    }, // callback hook functions

    set_hook: function(name, callback) {
        // set callback hook
        // supported hooks: onLoad, onComplete, onError
        if (typeof(this.hooks[name]) == 'undefined')
            return alert("Hook type not supported: " + name);

        this.hooks[name] = callback;
    },

    fire_hook: function(name, value) {
        // fire hook callback, passing optional value to it
        if (this.hooks[name]) {
            if (typeof(this.hooks[name]) == 'function') {
                // callback is function reference, call directly
                this.hooks[name](value);
            }
            else if (typeof(this.hooks[name]) == 'array') {
                // callback is PHP-style object instance method
                this.hooks[name][0][this.hooks[name][1]](value);
            }
            else if (window[this.hooks[name]]) {
                // callback is global function name
                window[ this.hooks[name] ](value);
            }
            return true;
        }
        return false; // no hook defined
    },

    set_api_url: function(url) {
        // set location of upload API script
        this.api_url = url;
    },

    set_swf_url: function(url) {
        // set location of SWF movie (defaults to webcam.swf in cwd)
        this.swf_url = url;
    },

    get_html: function(width, height, server_width, server_height) {
        // Return HTML for embedding webcam capture movie
        // Specify pixel width and height (640x480, 320x240, etc.)
        // Server width and height are optional, and default to movie width/height
        if (!server_width) server_width = width;
        if (!server_height) server_height = height;

        var html = '';
        var flashvars = 'shutter_enabled=' + (this.shutter_sound ? 1 : 0) + 
            '&shutter_url=' + escape(this.shutter_url) + 
            '&width=' + width + 
            '&height=' + height + 
            '&server_width=' + server_width + 
            '&server_height=' + server_height;

        if (this.ie) {
            html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="webcam_movie" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+this.swf_url+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/></object>';
        }
        else {
            html += '<embed id="webcam_movie" src="'+this.swf_url+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="webcam_movie" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" />';
        }

        this.loaded = false;
        return html;
    },

    get_movie: function() {
        // get reference to movie object/embed in DOM
        if (!this.loaded) return alert("ERROR: Movie is not loaded yet");
        var movie = document.getElementById('webcam_movie');
        if (!movie) alert("ERROR: Cannot locate movie 'webcam_movie' in DOM");
        return movie;
    },

    set_stealth: function(stealth) {
        // set or disable stealth mode
        this.stealth = stealth;
    },

    snap: function(url, callback, stealth) {
        // take snapshot and send to server
        // specify fully-qualified URL to server API script
        // and callback function (string or function object)
        if (callback) this.set_hook('onComplete', callback);
        if (url) this.set_api_url(url);
        if (typeof(stealth) != 'undefined') this.set_stealth( stealth );

        this.get_movie()._snap( this.api_url, this.quality, this.shutter_sound ? 1 : 0, this.stealth ? 1 : 0 );
    },

    freeze: function() {
        // freeze webcam image (capture but do not upload)
        this.get_movie()._snap('', this.quality, this.shutter_sound ? 1 : 0, 0 );
    },

    upload: function(url, callback) {
        // upload image to server after taking snapshot
        // specify fully-qualified URL to server API script
        // and callback function (string or function object)
        if (callback) this.set_hook('onComplete', callback);
        if (url) this.set_api_url(url);

        this.get_movie()._upload( this.api_url );
    },

    reset: function() {
        // reset movie after taking snapshot
        this.get_movie()._reset();
    },

    configure: function(panel) {
        // open flash configuration panel -- specify tab name:
        // "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
        if (!panel) panel = "camera";
        this.get_movie()._configure(panel);
    },

    set_quality: function(new_quality) {
        // set the JPEG quality (1 - 100)
        // default is 90
        this.quality = new_quality;
    },

    set_shutter_sound: function(enabled, url) {
        // enable or disable the shutter sound effect
        // defaults to enabled
        this.shutter_sound = enabled;
        this.shutter_url = url ? url : 'shutter.mp3';
    },

    flash_notify: function(type, msg) {
        // receive notification from flash about event
        switch (type) {
            case 'flashLoadComplete':
                // movie loaded successfully
                this.loaded = true;
                this.fire_hook('onLoad');
                break;

            case 'error':
                // HTTP POST error most likely
                if (!this.fire_hook('onError', msg)) {
                    alert("JPEGCam Flash Error: " + msg);
                }
                break;

            case 'success':
                // upload complete, execute user callback function
                // and pass raw API script results to function
                this.fire_hook('onComplete', msg.toString());
                break;

            default:
                // catch-all, just in case
                alert("jpegcam flash_notify: " + type + ": " + msg);
                break;
        }
    }
};

test.php的

<?php

        /* JPEGCam Test Script */
        /* Receives JPEG webcam submission and saves to local file. */
        /* Make sure your directory has permission to write files as your web server user! */

        $filename = date('YmdHis') . '.jpg';
        $result = file_put_contents( $filename, file_get_contents('php://input') );
        if (!$result) {
            print "ERROR: Failed to write data to $filename, check permissions\n";
            exit();
        }

        $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;

        print $_SERVER['REQUEST_URI'];

        ?>

1 个答案:

答案 0 :(得分:0)

您可以尝试将名称作为GET变量传递。在设置api url时添加你想要的文件名:

webcam.set_api_url( 'test.php?filename=imagename' );

在PHP文件中

$filename = $_GET['filename'] . '.jpg';