Javascript 我如何上传带有表单中名称的网络摄像头快照？
我有一个插件，可以拍摄快照并将jpg上传到服务器。现在，我使用函数date（'YmdHis'）。jpg'来命名文件。但是我想在我的html文件中给出文件名。我有4个文件：TEST.HTLM和我的html，WEBCAM.JS和一些JS，TEST.PHP和服务器函数。我有webcam.swf文件，它将图片传递到TEST.PHP 非常感谢你 这是我的代码： TEST.HTMLJavascript 我如何上传带有表单中名称的网络摄像头快照？,javascript,php,webcam.js,Javascript,Php,Webcam.js,我有一个插件，可以拍摄快照并将jpg上传到服务器。现在，我使用函数date（'YmdHis'）。jpg'来命名文件。但是我想在我的html文件中给出文件名。我有4个文件：TEST.HTLM和我的html，WEBCAM.JS和一些JS，TEST.PHP和服务器函数。我有webcam.swf文件，它将图片传递到TEST.PHP 非常感谢你 这是我的代码： TEST.HTML <html lang="en"> <body> <table&
<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> </td><td valign=top>
<div id="upload_results" style="background-color:#eee;"></div>
</td></tr></table>
</body>
</html>
网络摄像机测试页
名称：
webcam.set_api_url（'test.php'）；
网络摄像头。设置质量（90）；//JPEG质量（1-100）
网络摄像头。设置快门声音（错误）；//播放快门咔哒声
document.write（webcam.get_html（400400））；
webcam.set_hook（'onComplete'，'my_completion_handler'）；
函数take_snapshot（）{
//拍摄快照并上载到服务器
document.getElementById（'upload_results'）。innerHTML='Uploading…'；
webcam.snap（）；
}
函数my_completion_处理程序（msg）{
//从PHP输出中提取URL
if（msg.match（/（http\：\/\/\S+/））{
var image_url=RegExp.$1；
//在页面中显示JPEG图像
document.getElementById（'upload_results'）。innerHTML=
“上传成功！”+
'JPEG URL:'+image_URL+''
'';
//重新设置相机以进行另一次拍摄
webcam.reset（）；
}
else警报（“PHP错误：+msg”）；
}
// 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;
}
}
//全局
ie:！！navigator.userAgent.match（/MSIE/），
协议：location.protocol.match（/https/i）？“https”：“http”，
callback:null，//已完成上载的用户回调
swf_url:'webcam.swf'，//webcam.swf电影的URI（默认为cwd）
shutter\u url:'shutter.mp3'，//URI到shutter.mp3声音
api\u url:“”，//上载脚本的url
loaded:false，//网络摄像头电影加载完成时为true
质量：90，//JPEG质量（1-100）
快门声音：true，//打开/关闭快门声音效果
隐身：false，//隐身模式（捕获时不要冻结图像）
挂钩：{
onLoad:null，
onComplete:null，
onError:null
}，//回调挂钩函数
set_hook:函数（名称、回调）{
//设置回调挂钩
//支持的挂钩：onLoad、onComplete、onError
if（typeof（this.hooks[name]）==“未定义”）
返回警报（“不支持挂钩类型：“+名称”）；
this.hooks[name]=回调；
},
消防钩：功能（名称、值）{
//fire hook回调，将可选值传递给它
if（this.hooks[name]）{
if（typeof（this.hooks[name]）=='function'）{
//回调是函数引用，直接调用
this.hooks[name]（值）；
}
else if（typeof（this.hooks[name]）=='array'）{
//回调是PHP风格的对象实例方法
this.hooks[name][0][this.hooks[name][1]]（值）；
}
else if（窗口[this.hooks[name]]）{
//回调是全局函数名
窗口[this.hooks[name]]（值）；
}
返回true；
}
返回false；//未定义挂钩
},
设置api url:函数（url）{
//设置上载API脚本的位置
this.api_url=url；
},
set_swf_url:函数（url）{
//设置SWF电影的位置（在cwd中默认为webcam.SWF）
this.swf_url=url；
},
获取html：函数（宽度、高度、服务器宽度、服务器高度）{
//返回用于嵌入网络摄像头捕获电影的HTML
//指定像素宽度和高度（640x480、320x240等）
//服务器宽度和高度是可选的，默认为电影宽度/高度
如果（！server_width）server_width=width；
如果（！服务器高度）服务器高度=高度；
var html=''；
var flashvars='shutter_enabled='+（this.shutter_声音？1:0）+
“&shutter\u url=”+转义（this.shutter\u url）+
“&width=”+width+
“&height=”+height+
“&服务器宽度=”+服务器宽度+
“&服务器高度=”+服务器高度；
如果（这个，ie）{
html+=''；
}
否则{
html+=''；
}
this.loaded=false；
返回html；
},
获取电影：函数（）{
//获取对DOM中电影对象/嵌入的引用
如果（！this.loaded）返回警报（“错误：电影尚未加载”）；
var movie=document.getElementById（'webcam_movie'）；
如果（！movie）警报（“错误：在DOM中找不到电影‘webcam_movie’”）；
回归电影；
},
set_隐形：功能（隐形）{
//设置或禁用隐形模式
这是秘密行动；
},
快照：函数（url、回调、隐藏）{
//拍摄快照并发送到服务器
//指定服务器API脚本的完全限定URL
//和回调函数（字符串或函数对象）
if（callback）这个。set_hook（'onComplete'，callback）；
如果（url）这个。设置_api_url（url）；
如果（类型（隐形）！=‘未定义’）此。设置_隐形（隐形）；
this.get\u movie（）.\u snap（this.api\u url，this.quality，this.shutter\u sound？1:0，this.隐身？1:0）；
},
冻结：函数（）{
//冻结网络摄像头图像（捕获但不上载）
这个.get_movie（）。_snap（''，这个.quality，这个.shutter_sound？1:0，0）；
},
上传：函数（url、回调）{
//拍摄快照后将图像上载到服务器
//指定服务器API脚本的完全限定URL
//和回调函数（字符串或函数对象）
if（callback）这个。set_hook（'onComplete'，callback）；
如果（url）这个。设置_api_url（url）；
this.get_movie（）。_upload（this.api_url）；
},
重置：函数（）{
//重置电影后
<?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'];
?>
webcam.set_api_url( 'test.php?filename=imagename' );
$filename = $_GET['filename'] . '.jpg';