Capturar imagem direto da webcam

Fagner Dos Santos · Abril 16, 2012

Pessoal, em meu sistema tenho uma tela de cadastro de usuários e no cadastro gostaria de tirar a foto da pessoa pela webcam e atulizar o cadastro automaticamente.

Alguém conhece alguma solução, tipo um activex que faça isso?

Valeu!!

Eduardo Villa · Abril 17, 2012

Fagner Dos Santos, procure pelo Windows Media Encoder (programa da Microsoft que permite fazer transmissões de vídeo e/ou áudio).

LINK EXTERNO <- Como configurar para transmissões ao vivo

xanburzum · Abril 17, 2012

olha este exemplo, você consegue pegar a imagem de uma webcam

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Utf-8" />
<title>Fotos em molduras</title>
<script type="text/javascript" src="winsJs/winsDtt.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="WinsCss/SliderBar.css" rel="stylesheet" type="text/css" />
<link href="WinsCss/button.css" rel="stylesheet" type="text/css" />
</head>
<body onload="InitWinsDtt('winsCamera')">

<table width="780" height="27" border="0" align="center" cellpadding="0" cellspacing="0"
   background="img/2_18.jpg" class="mu" style="margin-top:8px">
 <tr>
   <td width="9" height="27"><font size="2" face="Arial"><img src="img/2_17.jpg" width="5" height="32" /></font></td>
   <td  align="left">
	<font size="2" face="Arial">|  
	<a href="">Inicio</a>
	  |  
	<a href="produzir.asp">Produzir</a> 		</font>		</td>
   <td width="100">
<font size="2" face="Arial">
<script type="text/javascript"> 
function getDate()
{ 
	var d = new Date(); 
	var year = d.getYear(); 
	var month = d.getMonth()+1; 
	var date = d.getDate(); 
	document.write(date+"/"+month+"/"+year); 
} 
function getTime()
{ 
	var t=new Date(); 
	var hour=t.getHours(); 
	var minutie=t.getMinutes(); 
	var second=t.getSeconds(); 
	document.write(hour+"Horas" +minutie+"Minutos"+second+"Segundos") 
} 
getDate(); 
//getTime(); 
</script>
   </font>
   </td>
   <td width="12"><div align="right"> <font size="2" face="Arial"> <img src="img/2_20.jpg" width="6" height="32" /></font></div></td>
 </tr>
</table>



<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:10px">

 <tr>
   <td width="320" align="center">
<div  style="border: #cccccc 1px solid;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" name="Camera" width="320" height="240" id="winsCamera">
 <param name="movie" value="swf/Camera.swf" />
 <param name="quality" value="high" />
 <embed src="swf/Camera.swf" width="320" height="240" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="winsCamera"></embed>
</object>
</div>

     <table width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
         <td><font size="2" face="Arial">Selecione:</font></td>
     <td width="180">
  <font face="Arial">
  <input type="radio" name="rdidttSource" id="rdidttSource1" onclick="ChangeWinsDttMode(1)"><label for="rdidttSource1" onfocus="this.blur();"><font size="2">Câmera</font></label><font size="2">
	</font>
<input type="radio" name="rdidttSource" id="rdidttSource2" onclick="ChangeWinsDttMode(2)"><label for="rdidttSource2" onfocus="this.blur();"><font size="2">Foto local</font></label><font size="2">
	</font></font>	  </td>
     <td>	  </td>
</tr>
 <tr  style="display:none" id="trfileup">
     <td colspan="3">
	<iframe src="about:blank" name="iframeup" frameborder="0" vspace="0" width="0" height="0" hspace="0" marginheight="0" marginwidth="0" scrolling="No"></iframe>
  <form name="frmfileup"  method="post" enctype="multipart/form-data" style="margin:0px" target="iframeup" onsubmit="return BeforeUpLocalDttImg(this)">
  <input type="file" name="txtfile" id="txtfile"  style="width:180px;font-size:12px">
  <input type="submit" value="Enviar"  style="font-size:12px">
  <span id="upmsgspan" ></span>
  </form>	  </td>
   </tr>

       <tr>
         <td><font size="2" face="Arial">Brilho:</font></td>
     <td width="180"><div id="s1"></div></td>
     <td><input name="btnResetFilter" type="button"  class="btn3_mouseout" id="btnResetFilter" style="width:60px" title="Redefinir brilho, contraste, saturação" onclick="winsDttInstance.ResetFilter()" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" value="Padrão" onfocus="this.blur();"/></td>
   </tr>

       <tr>
         <td><font size="2" face="Arial">Contraste:</font></td>
     <td><div id="s2"></div></td>
     <td> </td>
   </tr>
       <tr>
         <td><font size="2" face="Arial">Saturação:</font></td>
     <td><div id="s3"></div></td>
     <td> </td>
   </tr>
     </table><br />
     <input name="btnTakePhoto" type="button" style="width:40px" title="Clique neste botão para tirar fotos com a câmera"  class="btn3_mouseout" id="btnTakePhoto"   onclick="winsDttInstance.TakePhoto()"  onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  value="Foto" onfocus="this.blur();" />
     <input type="button" value="+" onClick="winsDttInstance.ZoomOut()" style="width:40px" title="Ampliar Foto"  class="btn3_mouseout" id="btnTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/>
     <input type="button" name="b3" value="-" onClick="winsDttInstance.ZoomIn()" style="width:40px" title="Diminuir Foto"  class="btn3_mouseout" id="btnTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/>
     <input type="button" name="btnResetTakePhoto" value="Remake" onclick="winsDttInstance.ResetPhoto()" style="width:40px" title="Desista do remake"  class="btn3_mouseout" id="btnResetTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/>

<input type="button" name="Submit1" value="Apagar" onclick="winsDttInstance.ResetBg()" style="width:60px" title="Remover fundo"  class="btn3_mouseout" id="btnTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/> 

     <br />
  <script type="text/javascript">
  var flagnum=0;
  function beforeSubmit(frm)
  {
  	var msginfoobj = document.getElementById("msginfo");
	if(winsDttInstance.CameraMode == 1)
	{
  		if(!winsDttInstance.CheckhaveCamera())
		{
			alert("Não detectou câmera ou câmera ocupada. Por favor conecte a câmera/webcam e, em seguida, atualize a página e tente novamente.");
			return false;
		}
		if(!winsDttInstance.isInPhoto)
		{
			alert("Por favor, ponto câmera botão.");
			return false;
		}
	}
	else if(winsDttInstance.CameraMode == 2)
	{
		if(!winsDttInstance.isUpLoadLocalFile)
		{
			alert("Favor enviar foto do local.");
			return false;
		}
	}
	if(frm.title.value == "")
	{
		alert("Preencha o título!");
		frm.title.focus();
		return false;
	}
	if(frm.delpass.value == "")
	{
		alert("Preencha a senha administrativa!");
		frm.delpass.focus();
		return false;
	}
	msginfoobj.innerText = "Enviando e criando foto, por favor aguarde...";
	msginfoobj.style.display = "";
	winsDttInstance.SavePhoto();
	setTimeout("GetUpDttFileName()",1000);
	return false;
  }
  function GetUpDttFileName()
  {
  	var msginfoobj = document.getElementById("msginfo");
	var filename = winsDttInstance.UpFileName;
  	if(filename!="")
	{
		msginfoobj.innerText = "Foto enviada com sucesso, a informação é guardada no banco de dados...";
		msginfoobj.style.display = "";
		document.form1.dttfilename.value = filename;
		document.form1.submit();
	}
	if(flagnum>90)
	{
		alert("Erro, por favor, verifique as configurações de rede e servidor, existem dúvidas, entre em contato com o administrador.");
		msginfoobj.style.display = "none";
		return false;
	}
	setTimeout("GetUpDttFileName()",1000);
  	flagnum++;
  }
  </script>
   <form id="form1" name="form1" method="post" action="savewinsdttdb.asp" style="margin:0px" onsubmit="return beforeSubmit(this)">
     <table width="99%" border="0" cellspacing="1" cellpadding="2">
       <tr>
         <td><font face="Arial" size="2">Título：</font></td>
         <td width="79%" align="left"><input name="title" type="text" id="title" size="20" maxlength="40" /></td>
       </tr>
       <tr>
         <td><font face="Arial" size="2">Descrição：</font></td>
         <td align="left"><input name="intro" type="text" id="intro" size="30" maxlength="200" /></td>
       </tr>
	<tr>
         <td><font face="Arial" size="2">Senha：</font></td>
         <td align="left"><input name="delpass" type="password" id="intro" size="15" maxlength="20" /><br>	<font face="Arial" size="2">Senha para exclusão da imagem</font></td>
       </tr>
       <tr>
         <td> </td>
         <td align="left"><input name="imageField" type="image" src="img/TIJIAO.gif" align="middle" width="78" height="19" border="0" />
           <input name="dttfilename" type="hidden" id="dttfilename" /></td>
       </tr>
     </table>
     </form>
   <div id="msginfo" style="width:300px;height:25px;line-height:25px;border:#ff6600 2px solid;margin:2px;text-align:center;display:none">	</div>	</td>
   <td width="450" height="480" valign="top">

     <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td align="right"><iframe src="MoImg/pro.asp" frameborder="0" vspace="0" width="450" height="480" hspace="0" marginheight="0" marginwidth="0" scrolling="No"></iframe></td>
   </tr>
</table>	</td>
 </tr>
</table>
<script type="text/javascript" src="winsJs/SliderBar.js"></script>
<table cellspacing="0" cellpadding="0" width="10" align="center" 
background="img/2_72.jpg" border="0" style="margin-top:10px">

</table>
<br>
</body>
</html>

e aqui o js

//
var winsDttInstance = new Object();
var jsWinsDttReady = false;
var swfWinsDttReady = false;
var WaitWinsDtti = 0;
var winsDttActionFile="savewinsdtt.asp";
var TakePhotoID = "btnTakePhoto";
var ResetTakePhotoID = "btnResetTakePhoto";



function isWinsDttReady()
{	
return jsWinsDttReady;
}
function setWinsDttSwfIsReady()
{
swfWinsDttReady = true;
}



function winsDtt(id)
{
jsWinsDttReady = true; 

this.UpFileName = "";
this.LastVersion = "";
this.LastUpGradeURL = "";
this.haveCamera = false;

if (navigator.appName.indexOf("Microsoft") != -1)
{
	this.SwfInstance = window[id];
}
else
{
	this.SwfInstance = document[id];
}
this.UpFileName = "";
this.isInPhoto = false;
this.LastVersion = "";
this.LastUpGradeURL = "";
this.CameraMode = 1; 
this.isUpLoadLocalFile = false;
this.CheckhaveCamera = function(){return this.SwfInstance.CheckhaveCamera()};
this.GetLastVersion = function(){this.SwfInstance.GetLastVersion();};
this.GetUpGradeURL = function(){this.SwfInstance.GetUpGradeURL();};
this.ResetBg = function(){this.SwfInstance.ResetBg();};
this.ChangeBg = function(pic){this.SwfInstance.ChangeBg(pic);};
this.LoadLocalPic = function(pic){this.SwfInstance.LoadLocalPic(pic);};
this.SetActionFile = function (file){this.SwfInstance.SetActionFile(file);};
this.ResetPhoto = function()
	{
		if(this.isInPhoto)
		{
			this.isInPhoto = false;
			this.SwfInstance.ResetPhoto();
		}
	};
this.SavePhoto = function()
	{
		if(this.CameraMode == 1)
		{
			if(this.isInPhoto)
				this.SwfInstance.SavePhoto();
			else
				alert("Por favor, selecione o botão foto.");
		}
		else if(this.CameraMode == 2)
		{
			if(this.isUpLoadLocalFile)
				this.SwfInstance.SavePhoto();
			else
				alert("Favor enviar foto do local.");
		}
	};
this.TakePhoto = function()
	{
		if(!this.isInPhoto)
		{
			this.isInPhoto = true;
			this.SwfInstance.TakePhoto();
		}
		else
		{
			if(confirm("Clique em Re-e para tirar outra Foto"))
				this.ResetPhoto();
		}
	};
this.ZoomOut = function(){this.SwfInstance.ZoomOut();};
this.SetBright = function(num){this.SwfInstance.SetBright(num);}
this.SetContrast = function(num){this.SwfInstance.SetContrast(num);};
this.SetSaturation = function(num){this.SwfInstance.SetSaturation(num);};
this.ResetFilter = function()
	{
		if(confirm("Padrão de brilho, contraste, saturação?"))
		{
			Bar1.setSldPoint(255);
			Bar2.setSldPoint(500);
			Bar3.setSldPoint(150);
			this.SwfInstance.ResetFilter();

		}
	};
this.ZoomIn  = function(){this.SwfInstance.ZoomIn();};

this.GetAuthor = function(){return this.SwfInstance.GetAuthor();};
this.GetSite = function(){return this.SwfInstance.GetSite()}
this.GetProductName = function(){return this.SwfInstance.GetProductName()}
this.GetNowVersion = function(){return this.SwfInstance.GetNowVersion()}
this.GetCameras = function(){return this.SwfInstance.GetCameras();};
this.About=function()
	{
		var msg = "";
		var msg2 = ""
		msg += "Nome do produto:"+this.GetProductName()+"\n";
		var nowVer = this.GetNowVersion();
		var lastVer = this.LastVersion;
		msg += "Versão:"+nowVer+"\n";
		if(lastVer=="")
			msg += "Versão mais recente número:null.Não é possível acessar, por favor, verifique a sua rede.\n";
		else
			msg += "Versão mais recente número:"+lastVer+"\n";
		if( lastVer!="" && nowVer!=lastVer )	
			msg2 = "Erro: " + this.LastVersion + " ？"
		msg += "Autor:"+this.GetAuthor()+"\n";
		msg += "Website:"+this.GetSite()+"\n";

		alert(msg);
		if(msg2!="")
			if(confirm(msg2))
				location.href=this.LastUpGradeURL;
	}
this.Upgrade = function()
{
	var nowVer = this.GetNowVersion();
	var lastVer = this.LastVersion;
	var msg = "";
	msg += "Versão:"+nowVer+"\n";
	if(lastVer=="")
	{
		msg += "Update:null.numero.\n";
		alert(msg);
	}
	else if(nowVer!=lastVer)
	{
		msg += "Ultima versão:"+lastVer+"\n";
		msg += "Versão: " + this.LastVersion + " ？"
		if(confirm(msg))
			location.href=this.LastUpGradeURL;
	}
	else
	{
		msg += "Versão:"+lastVer+"\n";
		msg += "Versão.";
		alert(msg);
	}

}

}



function WinsUpDTTcompleteHandler(filename)
{
winsDttInstance.UpFileName = filename;
}
function GetWinsDttLastVersioncompleteHandler(ver)
{
winsDttInstance.LastVersion = ver;
}
function GetWinsDttUpGradeURLcompleteHandler(path)
{
winsDttInstance.LastUpGradeURL = path;
}
function CheckhaveCameraHandler(v)
{
winsDttInstance.haveCamera = v;
}




function WinsDttFlashDebug(str)
{
alert(str);
}


function InitWinsDtt(id)
{
winsDttInstance=new winsDtt(id);
winsDttInstance.SetActionFile(winsDttActionFile);
winsDttInstance.GetLastVersion();
winsDttInstance.GetUpGradeURL();
if(swfWinsDttReady)
{
	SetWinsDttMode();
}
else
{
	setTimeout("WaitWinsDttReady()",50); 
}
}

function SetWinsDttMode()
{
if(winsDttInstance.CheckhaveCamera())
	winsDttInstance.CameraMode=1;
else
	winsDttInstance.CameraMode=2;
ChangeWinsDttMode(winsDttInstance.CameraMode);
}


function ChangeWinsDttMode(mode)
{
if(mode==1)
{
	if(!winsDttInstance.haveCamera)
	{
		alert("Erro");
		ChangeWinsDttMode(2);
		return false;
	}
	else
	{
		winsDttInstance.CameraMode=1;
		document.getElementById("rdidttSource1").checked = true;
		document.getElementById("rdidttSource2").checked = false;
		document.getElementById("trfileup").style.display = "none";

		document.getElementById(TakePhotoID).disabled  = false;
		document.getElementById(ResetTakePhotoID).disabled  = false;


	}
}
else
{
	winsDttInstance.CameraMode=2;
	document.getElementById("rdidttSource1").checked = false;
	document.getElementById("rdidttSource2").checked = true;
	document.getElementById("trfileup").style.display = "";

	document.getElementById(TakePhotoID).disabled  = true;
	document.getElementById(ResetTakePhotoID).disabled  = true;

}
}



function WaitWinsDttReady()
{
if((!swfWinsDttReady) && WaitWinsDtti<200)
{
	WaitWinsDtti++;
	setTimeout("WaitWinsDttReady()",50); 
}
else
{
	SetWinsDttMode();
}
}


function LoadWinsDttFile(pic)
{
winsDttInstance.LoadLocalPic(pic);
winsDttInstance.isUpLoadLocalFile = true;
document.frmfileup.reset();
document.getElementById("upmsgspan").innerHTML="";

}





function BeforeUpLocalDttImg(frm)
{
if(frm.txtfile.value=="")
{
	alert("Selecione uma imagem local e, em seguida, fazer upload botão!");
	frm.txtfile.focus();
	return false;
}
var fname = frm.txtfile.value.toUpperCase();
var   sExp   =   fname.substring(fname.lastIndexOf('.'),fname.length);   
if(!(sExp==".JPG" || sExp==".GIF"))
{
	alert("Apenas suporta jpg e gif!");
	frm.txtfile.focus();
	return false;
}
document.getElementById("upmsgspan").innerHTML="Carregando……";
frm.action = winsDttActionFile + "?action=upfile";
}

Fagner Dos Santos · Abril 18, 2012

olha este exemplo, você consegue pegar a imagem de uma webcam

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Utf-8" />
<title>Fotos em molduras</title>
<script type="text/javascript" src="winsJs/winsDtt.js"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="WinsCss/SliderBar.css" rel="stylesheet" type="text/css" />
<link href="WinsCss/button.css" rel="stylesheet" type="text/css" />
</head>
<body onload="InitWinsDtt('winsCamera')">

<table width="780" height="27" border="0" align="center" cellpadding="0" cellspacing="0"
   background="img/2_18.jpg" class="mu" style="margin-top:8px">
 <tr>
   <td width="9" height="27"><font size="2" face="Arial"><img src="img/2_17.jpg" width="5" height="32" /></font></td>
   <td  align="left">
	<font size="2" face="Arial">|  
	<a href="">Inicio</a>
	  |  
	<a href="produzir.asp">Produzir</a> 		</font>		</td>
   <td width="100">
<font size="2" face="Arial">
<script type="text/javascript"> 
function getDate()
{ 
	var d = new Date(); 
	var year = d.getYear(); 
	var month = d.getMonth()+1; 
	var date = d.getDate(); 
	document.write(date+"/"+month+"/"+year); 
} 
function getTime()
{ 
	var t=new Date(); 
	var hour=t.getHours(); 
	var minutie=t.getMinutes(); 
	var second=t.getSeconds(); 
	document.write(hour+"Horas" +minutie+"Minutos"+second+"Segundos") 
} 
getDate(); 
//getTime(); 
</script>
   </font>
   </td>
   <td width="12"><div align="right"> <font size="2" face="Arial"> <img src="img/2_20.jpg" width="6" height="32" /></font></div></td>
 </tr>
</table>



<table width="780" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-top:10px">

 <tr>
   <td width="320" align="center">
<div  style="border: #cccccc 1px solid;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" name="Camera" width="320" height="240" id="winsCamera">
 <param name="movie" value="swf/Camera.swf" />
 <param name="quality" value="high" />
 <embed src="swf/Camera.swf" width="320" height="240" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="winsCamera"></embed>
</object>
</div>

     <table width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
         <td><font size="2" face="Arial">Selecione:</font></td>
     <td width="180">
  <font face="Arial">
  <input type="radio" name="rdidttSource" id="rdidttSource1" onclick="ChangeWinsDttMode(1)"><label for="rdidttSource1" onfocus="this.blur();"><font size="2">Câmera</font></label><font size="2">
	</font>
<input type="radio" name="rdidttSource" id="rdidttSource2" onclick="ChangeWinsDttMode(2)"><label for="rdidttSource2" onfocus="this.blur();"><font size="2">Foto local</font></label><font size="2">
	</font></font>	  </td>
     <td>	  </td>
</tr>
 <tr  style="display:none" id="trfileup">
     <td colspan="3">
	<iframe src="about:blank" name="iframeup" frameborder="0" vspace="0" width="0" height="0" hspace="0" marginheight="0" marginwidth="0" scrolling="No"></iframe>
  <form name="frmfileup"  method="post" enctype="multipart/form-data" style="margin:0px" target="iframeup" onsubmit="return BeforeUpLocalDttImg(this)">
  <input type="file" name="txtfile" id="txtfile"  style="width:180px;font-size:12px">
  <input type="submit" value="Enviar"  style="font-size:12px">
  <span id="upmsgspan" ></span>
  </form>	  </td>
   </tr>

       <tr>
         <td><font size="2" face="Arial">Brilho:</font></td>
     <td width="180"><div id="s1"></div></td>
     <td><input name="btnResetFilter" type="button"  class="btn3_mouseout" id="btnResetFilter" style="width:60px" title="Redefinir brilho, contraste, saturação" onclick="winsDttInstance.ResetFilter()" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" value="Padrão" onfocus="this.blur();"/></td>
   </tr>

       <tr>
         <td><font size="2" face="Arial">Contraste:</font></td>
     <td><div id="s2"></div></td>
     <td> </td>
   </tr>
       <tr>
         <td><font size="2" face="Arial">Saturação:</font></td>
     <td><div id="s3"></div></td>
     <td> </td>
   </tr>
     </table><br />
     <input name="btnTakePhoto" type="button" style="width:40px" title="Clique neste botão para tirar fotos com a câmera"  class="btn3_mouseout" id="btnTakePhoto"   onclick="winsDttInstance.TakePhoto()"  onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  value="Foto" onfocus="this.blur();" />
     <input type="button" value="+" onClick="winsDttInstance.ZoomOut()" style="width:40px" title="Ampliar Foto"  class="btn3_mouseout" id="btnTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/>
     <input type="button" name="b3" value="-" onClick="winsDttInstance.ZoomIn()" style="width:40px" title="Diminuir Foto"  class="btn3_mouseout" id="btnTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/>
     <input type="button" name="btnResetTakePhoto" value="Remake" onclick="winsDttInstance.ResetPhoto()" style="width:40px" title="Desista do remake"  class="btn3_mouseout" id="btnResetTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/>

<input type="button" name="Submit1" value="Apagar" onclick="winsDttInstance.ResetBg()" style="width:60px" title="Remover fundo"  class="btn3_mouseout" id="btnTakePhoto"     onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'"  onfocus="this.blur();"/> 

     <br />
  <script type="text/javascript">
  var flagnum=0;
  function beforeSubmit(frm)
  {
  	var msginfoobj = document.getElementById("msginfo");
	if(winsDttInstance.CameraMode == 1)
	{
  		if(!winsDttInstance.CheckhaveCamera())
		{
			alert("Não detectou câmera ou câmera ocupada. Por favor conecte a câmera/webcam e, em seguida, atualize a página e tente novamente.");
			return false;
		}
		if(!winsDttInstance.isInPhoto)
		{
			alert("Por favor, ponto câmera botão.");
			return false;
		}
	}
	else if(winsDttInstance.CameraMode == 2)
	{
		if(!winsDttInstance.isUpLoadLocalFile)
		{
			alert("Favor enviar foto do local.");
			return false;
		}
	}
	if(frm.title.value == "")
	{
		alert("Preencha o título!");
		frm.title.focus();
		return false;
	}
	if(frm.delpass.value == "")
	{
		alert("Preencha a senha administrativa!");
		frm.delpass.focus();
		return false;
	}
	msginfoobj.innerText = "Enviando e criando foto, por favor aguarde...";
	msginfoobj.style.display = "";
	winsDttInstance.SavePhoto();
	setTimeout("GetUpDttFileName()",1000);
	return false;
  }
  function GetUpDttFileName()
  {
  	var msginfoobj = document.getElementById("msginfo");
	var filename = winsDttInstance.UpFileName;
  	if(filename!="")
	{
		msginfoobj.innerText = "Foto enviada com sucesso, a informação é guardada no banco de dados...";
		msginfoobj.style.display = "";
		document.form1.dttfilename.value = filename;
		document.form1.submit();
	}
	if(flagnum>90)
	{
		alert("Erro, por favor, verifique as configurações de rede e servidor, existem dúvidas, entre em contato com o administrador.");
		msginfoobj.style.display = "none";
		return false;
	}
	setTimeout("GetUpDttFileName()",1000);
  	flagnum++;
  }
  </script>
   <form id="form1" name="form1" method="post" action="savewinsdttdb.asp" style="margin:0px" onsubmit="return beforeSubmit(this)">
     <table width="99%" border="0" cellspacing="1" cellpadding="2">
       <tr>
         <td><font face="Arial" size="2">Título：</font></td>
         <td width="79%" align="left"><input name="title" type="text" id="title" size="20" maxlength="40" /></td>
       </tr>
       <tr>
         <td><font face="Arial" size="2">Descrição：</font></td>
         <td align="left"><input name="intro" type="text" id="intro" size="30" maxlength="200" /></td>
       </tr>
	<tr>
         <td><font face="Arial" size="2">Senha：</font></td>
         <td align="left"><input name="delpass" type="password" id="intro" size="15" maxlength="20" /><br>	<font face="Arial" size="2">Senha para exclusão da imagem</font></td>
       </tr>
       <tr>
         <td> </td>
         <td align="left"><input name="imageField" type="image" src="img/TIJIAO.gif" align="middle" width="78" height="19" border="0" />
           <input name="dttfilename" type="hidden" id="dttfilename" /></td>
       </tr>
     </table>
     </form>
   <div id="msginfo" style="width:300px;height:25px;line-height:25px;border:#ff6600 2px solid;margin:2px;text-align:center;display:none">	</div>	</td>
   <td width="450" height="480" valign="top">

     <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td align="right"><iframe src="MoImg/pro.asp" frameborder="0" vspace="0" width="450" height="480" hspace="0" marginheight="0" marginwidth="0" scrolling="No"></iframe></td>
   </tr>
</table>	</td>
 </tr>
</table>
<script type="text/javascript" src="winsJs/SliderBar.js"></script>
<table cellspacing="0" cellpadding="0" width="10" align="center" 
background="img/2_72.jpg" border="0" style="margin-top:10px">

</table>
<br>
</body>
</html>

e aqui o js

//
var winsDttInstance = new Object();
var jsWinsDttReady = false;
var swfWinsDttReady = false;
var WaitWinsDtti = 0;
var winsDttActionFile="savewinsdtt.asp";
var TakePhotoID = "btnTakePhoto";
var ResetTakePhotoID = "btnResetTakePhoto";



function isWinsDttReady()
{	
return jsWinsDttReady;
}
function setWinsDttSwfIsReady()
{
swfWinsDttReady = true;
}



function winsDtt(id)
{
jsWinsDttReady = true; 

this.UpFileName = "";
this.LastVersion = "";
this.LastUpGradeURL = "";
this.haveCamera = false;

if (navigator.appName.indexOf("Microsoft") != -1)
{
	this.SwfInstance = window[id];
}
else
{
	this.SwfInstance = document[id];
}
this.UpFileName = "";
this.isInPhoto = false;
this.LastVersion = "";
this.LastUpGradeURL = "";
this.CameraMode = 1; 
this.isUpLoadLocalFile = false;
this.CheckhaveCamera = function(){return this.SwfInstance.CheckhaveCamera()};
this.GetLastVersion = function(){this.SwfInstance.GetLastVersion();};
this.GetUpGradeURL = function(){this.SwfInstance.GetUpGradeURL();};
this.ResetBg = function(){this.SwfInstance.ResetBg();};
this.ChangeBg = function(pic){this.SwfInstance.ChangeBg(pic);};
this.LoadLocalPic = function(pic){this.SwfInstance.LoadLocalPic(pic);};
this.SetActionFile = function (file){this.SwfInstance.SetActionFile(file);};
this.ResetPhoto = function()
	{
		if(this.isInPhoto)
		{
			this.isInPhoto = false;
			this.SwfInstance.ResetPhoto();
		}
	};
this.SavePhoto = function()
	{
		if(this.CameraMode == 1)
		{
			if(this.isInPhoto)
				this.SwfInstance.SavePhoto();
			else
				alert("Por favor, selecione o botão foto.");
		}
		else if(this.CameraMode == 2)
		{
			if(this.isUpLoadLocalFile)
				this.SwfInstance.SavePhoto();
			else
				alert("Favor enviar foto do local.");
		}
	};
this.TakePhoto = function()
	{
		if(!this.isInPhoto)
		{
			this.isInPhoto = true;
			this.SwfInstance.TakePhoto();
		}
		else
		{
			if(confirm("Clique em Re-e para tirar outra Foto"))
				this.ResetPhoto();
		}
	};
this.ZoomOut = function(){this.SwfInstance.ZoomOut();};
this.SetBright = function(num){this.SwfInstance.SetBright(num);}
this.SetContrast = function(num){this.SwfInstance.SetContrast(num);};
this.SetSaturation = function(num){this.SwfInstance.SetSaturation(num);};
this.ResetFilter = function()
	{
		if(confirm("Padrão de brilho, contraste, saturação?"))
		{
			Bar1.setSldPoint(255);
			Bar2.setSldPoint(500);
			Bar3.setSldPoint(150);
			this.SwfInstance.ResetFilter();

		}
	};
this.ZoomIn  = function(){this.SwfInstance.ZoomIn();};

this.GetAuthor = function(){return this.SwfInstance.GetAuthor();};
this.GetSite = function(){return this.SwfInstance.GetSite()}
this.GetProductName = function(){return this.SwfInstance.GetProductName()}
this.GetNowVersion = function(){return this.SwfInstance.GetNowVersion()}
this.GetCameras = function(){return this.SwfInstance.GetCameras();};
this.About=function()
	{
		var msg = "";
		var msg2 = ""
		msg += "Nome do produto:"+this.GetProductName()+"\n";
		var nowVer = this.GetNowVersion();
		var lastVer = this.LastVersion;
		msg += "Versão:"+nowVer+"\n";
		if(lastVer=="")
			msg += "Versão mais recente número:null.Não é possível acessar, por favor, verifique a sua rede.\n";
		else
			msg += "Versão mais recente número:"+lastVer+"\n";
		if( lastVer!="" && nowVer!=lastVer )	
			msg2 = "Erro: " + this.LastVersion + " ？"
		msg += "Autor:"+this.GetAuthor()+"\n";
		msg += "Website:"+this.GetSite()+"\n";

		alert(msg);
		if(msg2!="")
			if(confirm(msg2))
				location.href=this.LastUpGradeURL;
	}
this.Upgrade = function()
{
	var nowVer = this.GetNowVersion();
	var lastVer = this.LastVersion;
	var msg = "";
	msg += "Versão:"+nowVer+"\n";
	if(lastVer=="")
	{
		msg += "Update:null.numero.\n";
		alert(msg);
	}
	else if(nowVer!=lastVer)
	{
		msg += "Ultima versão:"+lastVer+"\n";
		msg += "Versão: " + this.LastVersion + " ？"
		if(confirm(msg))
			location.href=this.LastUpGradeURL;
	}
	else
	{
		msg += "Versão:"+lastVer+"\n";
		msg += "Versão.";
		alert(msg);
	}

}

}



function WinsUpDTTcompleteHandler(filename)
{
winsDttInstance.UpFileName = filename;
}
function GetWinsDttLastVersioncompleteHandler(ver)
{
winsDttInstance.LastVersion = ver;
}
function GetWinsDttUpGradeURLcompleteHandler(path)
{
winsDttInstance.LastUpGradeURL = path;
}
function CheckhaveCameraHandler(v)
{
winsDttInstance.haveCamera = v;
}




function WinsDttFlashDebug(str)
{
alert(str);
}


function InitWinsDtt(id)
{
winsDttInstance=new winsDtt(id);
winsDttInstance.SetActionFile(winsDttActionFile);
winsDttInstance.GetLastVersion();
winsDttInstance.GetUpGradeURL();
if(swfWinsDttReady)
{
	SetWinsDttMode();
}
else
{
	setTimeout("WaitWinsDttReady()",50); 
}
}

function SetWinsDttMode()
{
if(winsDttInstance.CheckhaveCamera())
	winsDttInstance.CameraMode=1;
else
	winsDttInstance.CameraMode=2;
ChangeWinsDttMode(winsDttInstance.CameraMode);
}


function ChangeWinsDttMode(mode)
{
if(mode==1)
{
	if(!winsDttInstance.haveCamera)
	{
		alert("Erro");
		ChangeWinsDttMode(2);
		return false;
	}
	else
	{
		winsDttInstance.CameraMode=1;
		document.getElementById("rdidttSource1").checked = true;
		document.getElementById("rdidttSource2").checked = false;
		document.getElementById("trfileup").style.display = "none";

		document.getElementById(TakePhotoID).disabled  = false;
		document.getElementById(ResetTakePhotoID).disabled  = false;


	}
}
else
{
	winsDttInstance.CameraMode=2;
	document.getElementById("rdidttSource1").checked = false;
	document.getElementById("rdidttSource2").checked = true;
	document.getElementById("trfileup").style.display = "";

	document.getElementById(TakePhotoID).disabled  = true;
	document.getElementById(ResetTakePhotoID).disabled  = true;

}
}



function WaitWinsDttReady()
{
if((!swfWinsDttReady) && WaitWinsDtti<200)
{
	WaitWinsDtti++;
	setTimeout("WaitWinsDttReady()",50); 
}
else
{
	SetWinsDttMode();
}
}


function LoadWinsDttFile(pic)
{
winsDttInstance.LoadLocalPic(pic);
winsDttInstance.isUpLoadLocalFile = true;
document.frmfileup.reset();
document.getElementById("upmsgspan").innerHTML="";

}





function BeforeUpLocalDttImg(frm)
{
if(frm.txtfile.value=="")
{
	alert("Selecione uma imagem local e, em seguida, fazer upload botão!");
	frm.txtfile.focus();
	return false;
}
var fname = frm.txtfile.value.toUpperCase();
var   sExp   =   fname.substring(fname.lastIndexOf('.'),fname.length);   
if(!(sExp==".JPG" || sExp==".GIF"))
{
	alert("Apenas suporta jpg e gif!");
	frm.txtfile.focus();
	return false;
}
document.getElementById("upmsgspan").innerHTML="Carregando……";
frm.action = winsDttActionFile + "?action=upfile";
}

Aí xanburzum, tentei aqui mas dá a mesagem de erro quando eu marco a opção de câmera, será que é por que estão faltando arquivos aqui na biblioteca!... Valeu!

xanburzum · Abril 18, 2012

verifique se tem todos os CSS

Fagner Dos Santos · Abril 18, 2012

verifique se tem todos os CSS

Não tenho nenhum, tem algum link onde a gente possa pegar os css e o swf?

womaos · Abril 20, 2012

Valeu!

xanburzum · Abril 20, 2012

vou colocar os CSS, mas não tenho eles aqui comigo, posto assim que chegar em casa.

Fagner Dos Santos · Maio 2, 2012

Vou tentar montar a captura da webcam com Jquery mesmo, esse código vai me ajudar a resolver o meu problema sem stress!

http://www.xarg.org/project/jquery-webcam-plugin/

gcamara · Janeiro 23, 2013

xanburzum,

Tem como você disponibilizar os CSS??

xanburzum · Janeiro 23, 2013

vou localizá-los e postarei aqui

Morpheus#2005 · Janeiro 23, 2013

Xan como sempre....sensacional... parabéns :yes:

xanburzum · Janeiro 24, 2013

galera tenho também uma app ASP com flash, muito boa, quem quiser me manda um email

xanburzum@terra.com.br

Arquivado

Capturar imagem direto da webcam

Recommended Posts

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eduardo Villa 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

womaos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fagner Dos Santos 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

gcamara 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

Morpheus#2005 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

xanburzum 169

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante