2013-09-02 3 views
4
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> 
    <input type="text" name="myname" id="myname"> 
    <input type="submit" name="send" id="send"> 
</form> 

<script type="text/javascript" src="webcam.js"></script> 
<script language="JavaScript"> 
     document.write(webcam.get_html(320, 240)); 
</script> 
<form> 
     <input type=button value="Configure..." onClick="webcam.configure()"> 
     &nbsp;&nbsp; 
     <input type=button name="img" value="Take Snapshot" onClick="take_snapshot()"> 
    </form> 

<script language="JavaScript"> 
     document.write(webcam.get_html(320, 240)); 
</script> 

<script language="JavaScript"> 
    webcam.set_api_url('test.php'); 
     webcam.set_quality(90); // JPEG quality (1 - 100) 
     webcam.set_shutter_sound(true); // play shutter click sound 
     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+)/)) { 
       // show JPEG image in page 
       document.getElementById('upload_results').innerHTML ='<h1>Upload Successful!</h1>'; 
       // reset camera for another shot 
       webcam.reset(); 
      } 
      else {alert("PHP Error: " + msg); 
     } 
    </script> 
<div id="upload_results" style="background-color:#eee;"></div> 

나는 PHP 언어로 일하고 있습니다. 웹캠에서 이미지를 업로드하려고하는데 내 PC에 이미지를 저장하려고합니다. 웹캠이 잘 작동합니다. 웹캠을 여는 중이지만 take_snapshot을 클릭하면 아무런 변화가 없습니다.이미지 업로드 webcam php

take_snapshot 버튼을 클릭하면 JavaScript 부분을 이해하는 데 문제가 있습니다.

내 webcam.js, 당신은 사용해야합니다 PHP 스크립트를 실행하기 위해

/* JPEGCam v1.0.9 */ 
/* Webcam library for capturing JPEG images and submitting to a server */ 
/* Copyright (c) 2008 - 2009 Joseph Huckaby <[email protected]> */ 
/* Licensed under the GNU Lesser Public License */ 
/* http://www.gnu.org/licenses/lgpl.html */ 

/* Usage: 
    <script language="JavaScript"> 
     document.write(webcam.get_html(320, 240)); 
     webcam.set_api_url('test.php'); 
     webcam.set_hook('onComplete', 'my_callback_function'); 
     function my_callback_function(response) { 
      alert("Success! PHP returned: " + response); 
     } 
    </script> 
    <a href="javascript:void(webcam.snap())">Take Snapshot</a> 
*/ 

// Everything is under a 'webcam' Namespace 
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; 
     } 
    } 
}; 
+1

'webcam.js'란 무엇입니까? 그 파일을 우리와 연결할 수 있습니까? –

+0

@ Glavić, 내가 해냈다 –

+0

알다시피, 당신은 [작업 예제] (http://bowser.effectgames.com/~jhuckaby/jpegcam/stealth.html)의 소스 코드를 복사했습니다. http://code.google.com/p/jpegcam/downloads/list를 다운로드하고 localhost에'htdocs' 폴더를 업로드하고 브라우저를 통해'test.html'을 실행하면 작동합니다. –

답변

0

는 PHP로 설정 웹 서버가 있습니다. 일반적인 설정은 Linux/Apache/MySQL/PHP입니다. 그렇지 않으면 LAMP으로 알려져 있습니다. 이러한 설정이없는 PHP 스크립트는 실행할 수 없으며 단순히 웹 브라우저에 텍스트로 표시됩니다.

+0

여기의 문제는 서버 설정과 관련이 없습니다. 당신은 완벽하게 PHP 개발 서버를 실행할 수 있습니다. 예를 들어,'php -S localhost : 8080 index.php'와 같은 커맨드 라인으로. – vmonteco