Php HTML5网络摄像头捕获显示图片
所以，我有一个HTML5聊天脚本，它要求用户输入他们的名字和电子邮件来开始聊天。脚本从gavatar获取用户显示的图片。我正试图改变这一点，使其从用户计算机上拍摄网络摄像头快照，并将其设置为显示图片 我见过一些使用HTML5访问用户网络摄像头的例子，但我似乎不知道如何自动拍摄快照并将其设置为用户显示的图片 这是我目前的密码Php HTML5网络摄像头捕获显示图片,php,javascript,css,html,Php,Javascript,Css,Html,所以，我有一个HTML5聊天脚本，它要求用户输入他们的名字和电子邮件来开始聊天。脚本从gavatar获取用户显示的图片。我正试图改变这一点，使其从用户计算机上拍摄网络摄像头快照，并将其设置为显示图片 我见过一些使用HTML5访问用户网络摄像头的例子，但我似乎不知道如何自动拍摄快照并将其设置为用户显示的图片 这是我目前的密码 $(document).ready(function(){ // Run the init method on document ready: chat.i
$(document).ready(function(){
// Run the init method on document ready:
chat.init();
});
var chat = {
// data holds variables for use in the class:
data : {
lastID : 0,
noActivity : 0
},
// Init binds event listeners and sets up timers:
init : function(){
// Using the defaultText jQuery plugin, included at the bottom:
$('#name').defaultText('Nickname');
$('#email').defaultText('Email');
// Converting the #chatLineHolder div into a jScrollPane,
// and saving the plugin's API in chat.data:
chat.data.jspAPI = $('#chatLineHolder').jScrollPane({
verticalDragMinHeight: 12,
verticalDragMaxHeight: 12
}).data('jsp');
// We use the working variable to prevent
// multiple form submissions:
var working = false;
// Logging a person in the chat:
$('#loginForm').submit(function(){
if(working) return false;
working = true;
// Using our tzPOST wrapper function
// (defined in the bottom):
$.tzPOST('login',$(this).serialize(),function(r){
working = false;
if(r.error){
chat.displayError(r.error);
}
else chat.login(r.name,r.gravatar);
});
return false;
});
// Submitting a new chat entry:
$('#submitForm').submit(function(){
var text = $('#chatText').val();
if(text.length == 0){
return false;
}
if(working) return false;
working = true;
// Assigning a temporary ID to the chat:
var tempID = 't'+Math.round(Math.random()*1000000),
params = {
id : tempID,
author : chat.data.name,
gravatar : chat.data.gravatar,
text : text.replace(/</g,'<').replace(/>/g,'>')
};
// Using our addChatLine method to add the chat
// to the screen immediately, without waiting for
// the AJAX request to complete:
chat.addChatLine($.extend({},params));
// Using our tzPOST wrapper method to send the chat
// via a POST AJAX request:
$.tzPOST('submitChat',$(this).serialize(),function(r){
working = false;
$('#chatText').val('');
$('div.chat-'+tempID).remove();
params['id'] = r.insertID;
chat.addChatLine($.extend({},params));
});
return false;
});
// Logging the user out:
$('a.logoutButton').live('click',function(){
$('#chatTopBar > span').fadeOut(function(){
$(this).remove();
});
$('#submitForm').fadeOut(function(){
$('#loginForm').fadeIn();
});
$.tzPOST('logout');
return false;
});
// Checking whether the user is already logged (browser refresh)
$.tzGET('checkLogged',function(r){
if(r.logged){
chat.login(r.loggedAs.name,r.loggedAs.gravatar);
}
});
// Self executing timeout functions
(function getChatsTimeoutFunction(){
chat.getChats(getChatsTimeoutFunction);
})();
(function getUsersTimeoutFunction(){
chat.getUsers(getUsersTimeoutFunction);
})();
},
// The login method hides displays the
// user's login data and shows the submit form
login : function(name,gravatar){
chat.data.name = name;
chat.data.gravatar = gravatar;
$('#chatTopBar').html(chat.render('loginTopBar',chat.data));
$('#loginForm').fadeOut(function(){
$('#submitForm').fadeIn();
$('#chatText').focus();
});
},
// The render method generates the HTML markup
// that is needed by the other methods:
render : function(template,params){
var arr = [];
switch(template){
case 'loginTopBar':
arr = [
'<span><img src="',params.gravatar,'" width="23" height="23" />',
'<span class="name">',params.name,
'</span><a href="" class="logoutButton rounded">Logout</a></span>'];
break;
case 'chatLine':
arr = [
'<div class="chat chat-',params.id,' rounded"><span class="gravatar"><img src="',params.gravatar,
'" width="23" height="23" onload="this.style.visibility=\'visible\'" />','</span><span class="author">',params.author,
':</span><span class="text">',params.text,'</span><span class="time">',params.time,'</span></div>'];
break;
case 'user':
arr = [
'<div class="user" title="',params.name,'"><img src="',
params.gravatar,'" width="30" height="30" onload="this.style.visibility=\'visible\'" /></div>'
];
break;
}
// A single array join is faster than
// multiple concatenations
return arr.join('');
},
// The addChatLine method ads a chat entry to the page
addChatLine : function(params){
// All times are displayed in the user's timezone
var d = new Date();
if(params.time) {
// PHP returns the time in UTC (GMT). We use it to feed the date
// object and later output it in the user's timezone. JavaScript
// internally converts it for us.
d.setUTCHours(params.time.hours,params.time.minutes);
}
params.time = (d.getHours() < 10 ? '0' : '' ) + d.getHours()+':'+
(d.getMinutes() < 10 ? '0':'') + d.getMinutes();
var markup = chat.render('chatLine',params),
exists = $('#chatLineHolder .chat-'+params.id);
if(exists.length){
exists.remove();
}
if(!chat.data.lastID){
// If this is the first chat, remove the
// paragraph saying there aren't any:
$('#chatLineHolder p').remove();
}
// If this isn't a temporary chat:
if(params.id.toString().charAt(0) != 't'){
var previous = $('#chatLineHolder .chat-'+(+params.id - 1));
if(previous.length){
previous.after(markup);
}
else chat.data.jspAPI.getContentPane().append(markup);
}
else chat.data.jspAPI.getContentPane().append(markup);
// As we added new content, we need to
// reinitialise the jScrollPane plugin:
chat.data.jspAPI.reinitialise();
chat.data.jspAPI.scrollToBottom(true);
},
// This method requests the latest chats
// (since lastID), and adds them to the page.
getChats : function(callback){
$.tzGET('getChats',{lastID: chat.data.lastID},function(r){
for(var i=0;i<r.chats.length;i++){
chat.addChatLine(r.chats[i]);
}
if(r.chats.length){
chat.data.noActivity = 0;
chat.data.lastID = r.chats[i-1].id;
}
else{
// If no chats were received, increment
// the noActivity counter.
chat.data.noActivity++;
}
if(!chat.data.lastID){
chat.data.jspAPI.getContentPane().html('<p class="noChats">No chats yet</p>');
}
// Setting a timeout for the next request,
// depending on the chat activity:
var nextRequest = 1000;
// 2 seconds
if(chat.data.noActivity > 3){
nextRequest = 2000;
}
if(chat.data.noActivity > 10){
nextRequest = 5000;
}
// 15 seconds
if(chat.data.noActivity > 20){
nextRequest = 15000;
}
setTimeout(callback,nextRequest);
});
},
// Requesting a list with all the users.
getUsers : function(callback){
$.tzGET('getUsers',function(r){
var users = [];
for(var i=0; i< r.users.length;i++){
if(r.users[i]){
users.push(chat.render('user',r.users[i]));
}
}
var message = '';
if(r.total<1){
message = 'No one is online';
}
else {
message = r.total+' '+(r.total == 1 ? 'person':'people')+' online';
}
users.push('<p class="count">'+message+'</p>');
$('#chatUsers').html(users.join(''));
setTimeout(callback,15000);
});
},
// This method displays an error message on the top of the page:
displayError : function(msg){
var elem = $('<div>',{
id : 'chatErrorMessage',
html : msg
});
elem.click(function(){
$(this).fadeOut(function(){
$(this).remove();
});
});
setTimeout(function(){
elem.click();
},5000);
elem.hide().appendTo('body').slideDown();
}
};
// Custom GET & POST wrappers:
$.tzPOST = function(action,data,callback){
$.post('php/ajax.php?action='+action,data,callback,'json');
}
$.tzGET = function(action,data,callback){
$.get('php/ajax.php?action='+action,data,callback,'json');
}
// A custom jQuery method for placeholder text:
$.fn.defaultText = function(value){
var element = this.eq(0);
element.data('defaultText',value);
element.focus(function(){
if(element.val() == value){
element.val('').removeClass('defaultText');
}
}).blur(function(){
if(element.val() == '' || element.val() == value){
element.addClass('defaultText').val(value);
}
});
return element.blur();
}
$（文档）.ready（函数（）{
//在文档就绪时运行init方法：
chat.init（）；
});
变量聊天={
//数据保存在类中使用的变量：
数据：{
lastID:0，
无活动：0
},
//Init绑定事件侦听器并设置计时器：
init:function（）{
//使用底部包含的defaultText jQuery插件：
$（'#name'）。默认文本（'昵称'）；
$（'#email'）。默认文本（'email'）；
//将#chatLineHolder div转换为jScrollPane，
//并将插件的API保存在chat.data中：
chat.data.jspAPI=$（“#chatLineHolder”）.jScrollPane({
垂直排水高度：12，
垂直排水高度：12
}).data（'jsp'）；
//我们使用工作变量来防止
//多表格提交：
var=false；
//将某人记录到聊天中：
$（'#loginForm'）。提交（函数（）{
如果（工作）返回错误；
工作=真实；
//使用tzPOST包装器函数
//（在底部定义）：
$.tzPOST（'login'，$（this）.serialize（），函数（r）{
工作=假；
if（r.error）{
chat.displayError（r.error）；
}
else chat.login（r.name，r.gravatar）；
});
返回false；
});
//提交新的聊天记录：
$（“#submitForm”）.submit（函数（）{
var text=$（'#chatText'）.val（）；
如果（text.length==0）{
返回false；
}
如果（工作）返回错误；
工作=真实；
//为聊天室分配临时ID：
var tempID='t'+Math.round（Math.random（）*1000000），
参数={
id:tempID，
作者：chat.data.name，
gravatar:chat.data.gravatar，
text:text.replace（//g'，）
};
//使用addChatLine方法添加聊天记录
//立即转到屏幕，无需等待
//要完成的AJAX请求：
addChatLine（$.extend（{}，params））；
//使用tzPOST包装器方法发送聊天
//通过POST AJAX请求：
$.tzPOST（'submitChat'，$（this）.serialize（），函数（r）{
工作=假；
$（'#chatText'）.val（''）；
$（'div.chat-'+tempID）.remove（）；
params['id']=r.insertID；
addChatLine（$.extend（{}，params））；
});
返回false；
});
//正在注销用户：
$（'a.logoutButton'）.live（'click'，function（））{
$（'#chatTopBar>span'）.fadeOut（函数（）{
$（this.remove（）；
});
$（'#submitForm'）.fadeOut（函数（）{
$（'#loginForm'）.fadeIn（）；
});
$.tzPOST（“注销”）；
返回false；
});
//检查用户是否已登录（浏览器刷新）
$.tzGET（'checkLogged'，函数（r）{
如果（r.logged）{
登录（r.loggedAs.name，r.loggedAs.gravatar）；
}
});
//自动执行超时函数
（函数getChatsTimeoutFunction（）{
getChats（getchatsimeoutfunction）；
})();
（函数getUsersTimeoutFunction（）{
getUsers（getUsersTimeoutFunction）；
})();
},
//login方法隐藏并显示
//用户的登录数据并显示提交表单
登录：函数（名称、gravatar）{
chat.data.name=名称；
chat.data.gravatar=gravatar；
$（'#chatTopBar'）.html（chat.render（'loginTopBar'，chat.data））；
$（“#loginForm”）.fadeOut（函数（）{
$（'#submitForm'）.fadeIn（）；
$（'#chatterxt'）.focus（）；
});
},
//render方法生成HTML标记
//这是其他方法所需要的：
渲染：函数（模板、参数）{
var-arr=[]；
开关（模板）{
案例“loginTopBar”：
arr=[
'',
''，参数名称，
''];
打破
“聊天热线”案例：
arr=[
“，”，params.author，
“：”，params.text'，params.time'，”]；
打破
案例“用户”：
arr=[
''
];
打破
}
//单个数组联接比
//多重串联
返回arr.join（“”）；
},
//addChatLine方法将聊天条目广告到页面中
addChatLine:函数（参数）{
//所有时间都显示在用户的时区中
var d=新日期（）；
if（参数时间）{
//PHP以UTC（GMT）为单位返回时间。我们使用它来输入日期
//对象，然后将其输出到用户的timezone.JavaScript中
//在内部为我们转换它。
d、 设定值（参数时间小时，参数时间分钟）；
}
params.time=（d.getHours（）<10？'0'：''）+d.getHours（）+：'+
（d.getMinutes（）<10？'0'：''）+d.getMinutes（）；
var markup=chat.render（'chatLine'，params），
exists=$（'#chatLineHolder.cha
<?php
class ChatUser extends ChatBase{
protected $name = '', $gravatar = '';
public function save(){
DB::query("
INSERT INTO webchat_users (name, gravatar)
VALUES (
'".DB::esc($this->name)."',
'".DB::esc($this->gravatar)."'
)");
return DB::getMySQLiObject();
}
public function update(){
DB::query("
INSERT INTO webchat_users (name, gravatar)
VALUES (
'".DB::esc($this->name)."',
'".DB::esc($this->gravatar)."'
) ON DUPLICATE KEY UPDATE last_activity = NOW()");
}
}
?>
<?php
/* The Chat class exploses public static methods, used by ajax.php */
class Chat{
public static function login($name,$email){
if(!$name || !$email){
throw new Exception('Fill in all the required fields.');
}
if(!filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)){
throw new Exception('Your email is invalid.');
}
// Preparing the gravatar hash:
$gravatar = md5(strtolower(trim($email)));
$user = new ChatUser(array(
'name' => $name,
'gravatar' => $gravatar
));
// The save method returns a MySQLi object
if($user->save()->affected_rows != 1){
throw new Exception('This nick is in use.');
}
$_SESSION['user'] = array(
'name' => $name,
'gravatar' => $gravatar
);
return array(
'status' => 1,
'name' => $name,
'gravatar' => Chat::gravatarFromHash($gravatar)
);
}
public static function checkLogged(){
$response = array('logged' => false);
if($_SESSION['user']['name']){
$response['logged'] = true;
$response['loggedAs'] = array(
'name' => $_SESSION['user']['name'],
'gravatar' => Chat::gravatarFromHash($_SESSION['user']['gravatar'])
);
}
return $response;
}
public static function logout(){
DB::query("DELETE FROM webchat_users WHERE name = '".DB::esc($_SESSION['user']['name'])."'");
$_SESSION = array();
unset($_SESSION);
return array('status' => 1);
}
public static function submitChat($chatText){
if(!$_SESSION['user']){
throw new Exception('You are not logged in');
}
if(!$chatText){
throw new Exception('You haven\' entered a chat message.');
}
$chat = new ChatLine(array(
'author' => $_SESSION['user']['name'],
'gravatar' => $_SESSION['user']['gravatar'],
'text' => $chatText
));
// The save method returns a MySQLi object
$insertID = $chat->save()->insert_id;
return array(
'status' => 1,
'insertID' => $insertID
);
}
public static function getUsers(){
if($_SESSION['user']['name']){
$user = new ChatUser(array('name' => $_SESSION['user']['name']));
$user->update();
}
// Deleting chats older than 5 minutes and users inactive for 30 seconds
DB::query("DELETE FROM webchat_lines WHERE ts < SUBTIME(NOW(),'0:5:0')");
DB::query("DELETE FROM webchat_users WHERE last_activity < SUBTIME(NOW(),'0:0:30')");
$result = DB::query('SELECT * FROM webchat_users ORDER BY name ASC LIMIT 18');
$users = array();
while($user = $result->fetch_object()){
$user->gravatar = Chat::gravatarFromHash($user->gravatar,30);
$users[] = $user;
}
return array(
'users' => $users,
'total' => DB::query('SELECT COUNT(*) as cnt FROM webchat_users')->fetch_object()->cnt
);
}
public static function getChats($lastID){
$lastID = (int)$lastID;
$result = DB::query('SELECT * FROM webchat_lines WHERE id > '.$lastID.' ORDER BY id ASC');
$chats = array();
while($chat = $result->fetch_object()){
// Returning the GMT (UTC) time of the chat creation:
$chat->time = array(
'hours' => gmdate('H',strtotime($chat->ts)),
'minutes' => gmdate('i',strtotime($chat->ts))
);
$chat->gravatar = Chat::gravatarFromHash($chat->gravatar);
$chats[] = $chat;
}
return array('chats' => $chats);
}
public static function gravatarFromHash($hash, $size=23){
return 'http://www.gravatar.com/avatar/'.$hash.'?size='.$size.'&default='.
urlencode('http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?size='.$size);
}
}
?>