Si necesitas caputurar imagenes / fotos desde la WebCam del usuario, esta es la mejor solucion que he encontrado por ahora. El unico problema que tiene es que el tamaño de la imagen es siempre el mismo 320x240 y por mucho que intentes cambiarlo no puedes. El problema se puede solucionar si tienes posibilidad de editar el fichero FLASH y cabiar los valores ahi dentro.
Primero descargate el plugin desde
aqui El HTML que usaremos en el ejemplo
En este ejemplo utilizaremos un DIV para mostrar el contenido de la camara, un control de imagen para mostrar la captura una vez realizada, un SPAN donde se mostrara un pequeño log y un boton para realizar la capura. Muy simple todo.
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<u>Live Camerau>
td>
<td>
td>
<td align="center">
<u>Captured Pictureu>
td>
tr>
<tr>
<td>
<div id="webcam">
div>
td>
<td>
td>
<td>
<asp:Image ID="imgCapture" runat="server" Style="visibility: hidden; width: 320px;
height: 240px" />
td>
tr>
table>
<br />
<asp:Button ID="btnCapture" Text="Capture" runat="server" OnClientClick="return Capture();" />
<br />
<span id="camStatus">span>
form>
A por el codigo C# (y VB.NET)
Namespaces
C#
using System.IO;
using System.Web.Services;
VB.NET
Imports System.IO
Imports System.Web.Services
La implementacion del codigo
La imagen capturada se envía como datos sin formato en forma de cadena hexadecimal por el jQuery Webcam Flash al servidor y por lo tanto debe ser capturada en el evento Page Load de la página ASP.Net.
Si el Request.InputStream tiene datos, entonces se lee utilizando StreamReader y luego se convierte en una cadena hexadecimal y, a continuación, la cadena hexadecimal se convierte en matriz de bytes que se guarda como un archivo de imagen.
La ruta de la imagen también se guarda como URL en una variable de sesión, ya que se utilizará más adelante cuando se realiza la llamada AJAX a GetCapturedImage WebMethod para obtener la dirección URL de la imagen guardada.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
if (Request.InputStream.Length > 0)
{
using (StreamReader reader = new StreamReader(Request.InputStream))
{
string hexString = Server.UrlEncode(reader.ReadToEnd());
string imageName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
string imagePath = string.Format("~/Captures/{0}.png", imageName);
File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
Session["CapturedImage"] = ResolveUrl(imagePath);
}
}
}
}
private static byte[] ConvertHexToBytes(string hex)
{
byte[] bytes = new byte[hex.Length / 2];
for (int i = 0; i < hex.Length; i += 2)
{
bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
}
return bytes;
}
[WebMethod(EnableSession = true)]
public static string GetCapturedImage()
{
string url = HttpContext.Current.Session["CapturedImage"].ToString();
HttpContext.Current.Session["CapturedImage"] = null;
return url;
}
VB.NET
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
If Request.InputStream.Length > 0 Then
Using reader As New StreamReader(Request.InputStream)
Dim hexString As String = Server.UrlEncode(reader.ReadToEnd())
Dim imageName As String = DateTime.Now.ToString("dd-MM-yy hh-mm-ss")
Dim imagePath As String = String.Format("~/Captures/{0}.png", imageName)
File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString))
Session("CapturedImage") = ResolveUrl(imagePath)
End Using
End If
End If
End Sub
Private Shared Function ConvertHexToBytes(hex As String) As Byte()
Dim bytes As Byte() = New Byte(hex.Length / 2 - 1) {}
For i As Integer = 0 To hex.Length - 1 Step 2
bytes(i / 2) = Convert.ToByte(hex.Substring(i, 2), 16)
Next
Return bytes
End Function
<WebMethod(EnableSession:=True)> _
Public Shared Function GetCapturedImage() As String
Dim url As String = HttpContext.Current.Session("CapturedImage").ToString()
HttpContext.Current.Session("CapturedImage") = Nothing
Return url
End Function
Integrandolo el jQuery Webcam Plugin en ASP.NET
Dentro del controlador de eventos jQuery load, he aplicado el plugin jQuery Webcam al HTML DIV para que la grabación en vivo de la cámara web pueda ser reproducida en la página web.
A continuación se muestran las propiedades de configuración del complemento jQuery Webcam.
- width - Ancho de la DIV que muestra la cámara en vivo.
- height - Altura del DIV que muestra la cámara en vivo.
- mode - Hay diferentes modos, como la devolución de llamada, guardar, etc Estoy usando el modo de guardar como necesito para guardar la imagen capturada en el servidor.
- swffile - La ruta del archivo Flash que se utilizará para mostrar la cámara web en la página.
Además de las propiedades de configuración anteriores, se han utilizado los siguientes eventos.
- debug -: este evento es un evento de depuración y se activa después de cada vez que el complemento jQuery Webcam realiza alguna operación. Este evento se puede utilizar para mostrar el estado del complemento jQuery Webcam.
- onSave - Este evento se activa después de que la imagen es capturada y cargada en el servidor.
- onCapture - Este evento se activa cuando se ejecuta la función de captura del complemento jQuery Webcam.
Cuando se hace clic en el botón ASP.Net, se ejecuta la función JavaScript llamada Capture, que realiza una llamada al método de captura del plugin.
Una vez que la imagen es capturada, se carga en el servidor utilizando el método de guardado de jQuery Webcam plugin que se llama dentro del controlador de eventos OnCapture.
Finalmente, el controlador de eventos OnCapture realiza una llamada jQuery AJAX al método GetCapturedImage que obtiene la dirección URL de la imagen capturada desde el servidor y la URL se asigna al control ASP.Net Image.
Codigo JAVASCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript">script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/Default.aspx") %>';
$(function () {
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "save",
swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '
');
},
onSave: function (data) {
$.ajax({
type: "POST",
url: pageUrl + "/GetCapturedImage",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("[id*=imgCapture]").css("visibility", "visible");
$("[id*=imgCapture]").attr("src", r.d);
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save(pageUrl);
}
});
});
function Capture() {
webcam.capture();
return false;
}
script>
El articulo original
aqui
Happy coding!!!!
#jquery #AJAX