plug-in jquery per webcam con asp.net mvc 3

Question

qualcuno ha ottenuto questo http://www.xarg.org/project/jquery-webcam-plugin/, per lavorare con aps.net mvc 3? Non riesco a decodificare l'immagine, usando la classe WebImage o BitmapImage.

Mi sono stancato di farlo con Silverlight, ma non sono sicuro di come caricare l'immagine. Non ho bisogno di salvare l'immagine, voglio solo elaborarla, quello che sto davvero cercando di fare è leggere un codice a barre tramite l'app web.

Non riesco a trovare una buona guida per caricare un'immagine da Silverlight o flash sulla mia app MVC.

Grazie in anticipo.

Answer 1

Il documentation contiene molti esempi. Tutto ciò che serve è leggere e provare.

Quindi, ecco come la visualizzazione Index.cshtml potrebbe apparire come l'utilizzo di elemento canvas HTML5 del browser per codificare i dati immagine grezzi provenienti dalla webcam un'immagine PNG che verrà inviato al server utilizzando una richiesta AJAX in:

<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> 

e il controller di casa:

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

si potrebbe dare www.scriptcam.com una prova, v'è ampia documentazione disponibile su questo plugin per jQuery.