jquery complemento de la cámara web con asp.net mvc 3

Question

alguien ha recibido este http://www.xarg.org/project/jquery-webcam-plugin/, para trabajar con aps.net mvc 3? Parece que no puedo decodificar la imagen, usando la clase WebImage o BitmapImage.

Estoy cansado de hacer esto con Silverlight, pero realmente no estoy seguro de cómo subir la imagen. No necesito guardar la imagen, solo quiero procesarla, lo que realmente quiero hacer es leer un código de barras a través de la aplicación web.

Parece que no puedo encontrar una buena guía para subir una imagen desde Silverlight o flash a mi aplicación MVC.

Gracias de antemano.

Answer 1

El documentation contiene muchos ejemplos. Todo lo que se necesita es leer y probar.

Así que aquí es como su punto de vista Index.cshtml podría ser similar utilizando el elemento canvas de HTML5 del navegador para codificar los datos de imágenes en bruto procedentes de la cámara web en una imagen PNG que se enviará al servidor mediante una petición AJAX en:

<script src="@Url.Content("~/Scripts/jquery.webcam.js")" type="text/javascript"></script> 

<div id="webcam"></div> 
<a href="#" id="upload">Capture image and send for processing</a> 

<script type="text/javascript"> 
    var pos = 0, ctx = null, saveCB, image = []; 
    var canvas = document.createElement('canvas'); 
    canvas.setAttribute('width', 320); 
    canvas.setAttribute('height', 240); 
    ctx = canvas.getContext('2d'); 
    image = ctx.getImageData(0, 0, 320, 240); 

    var saveCB = function (data) { 
     var col = data.split(';'); 
     var img = image; 
     for (var i = 0; i < 320; i++) { 
      var tmp = parseInt(col[i]); 
      img.data[pos + 0] = (tmp >> 16) & 0xff; 
      img.data[pos + 1] = (tmp >> 8) & 0xff; 
      img.data[pos + 2] = tmp & 0xff; 
      img.data[pos + 3] = 0xff; 
      pos += 4; 
     } 

     if (pos >= 4 * 320 * 240) { 
      ctx.putImageData(img, 0, 0); 
      $.post('@Url.Action("Upload")', { type: 'data', image: canvas.toDataURL("image/png") }, function (result) { 
       if (result.success) { 
        alert('The image was successfully sent to the server for processing'); 
       } 
      }); 
      pos = 0; 
     } 
    }; 

    $('#webcam').webcam({ 
     width: 320, 
     height: 240, 
     mode: 'callback', 
     swffile: '@Url.Content("~/scripts/jscam_canvas_only.swf")', 
     onSave: saveCB, 
     onCapture: function() { 
      webcam.save(); 
     } 
    }); 

    $('#upload').click(function() { 
     webcam.capture(); 
     return false; 
    }); 
</script> 

y su controlador principal:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Upload(string image) 
    { 
     image = image.Substring("data:image/png;base64,".Length); 
     var buffer = Convert.FromBase64String(image); 
     // TODO: I am saving the image on the hard disk but 
     // you could do whatever processing you want with it 
     System.IO.File.WriteAllBytes(Server.MapPath("~/app_data/capture.png"), buffer); 
     return Json(new { success = true }); 
    } 
} 

Answer 2

podría darle una oportunidad www.scriptcam.com, existe una amplia documentación disponible en este plugin jQuery.