jquery webcam plugin postet das aufgenommene Bild nicht

Ich benutze jquery Webcam-Plugin in einer MVC4-Seite. Das Plugin ist hier: http://www.xarg.org/project/jquery-webcam-plugin/.jquery webcam plugin postet das aufgenommene Bild nicht

Ich verwende Save-Methode für das Plugin nach dem Erfassen des Bildes, aber es ist nicht auf die Controller-Aktion gebucht.

Dies ist die cshtml Seite:

@{ 
    ViewBag.Title = "Index"; 
} 

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>@ViewBag.Title - Prueba WebCam</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/styles/base") 
    @Scripts.Render("~/scripts/jquery", "~/scripts/jqueryui", "~/scripts/webcam") 

    <script type="text/javascript"> 
     $(function() { 
      $("#camera").webcam({ 
       width: 320, 
       height: 240, 
       mode: "save", 
       swffile: "@Url.Content("~/Scripts/WebCam/jscam_canvas_only.swf")", 
       onTick: function() { }, 
       onSave: function() { alert('Almacenamiento realizado') }, 
       onCapture: function() { webcam.save("@Url.Action("Save")"); alert('Captura realizada'); }, 
       debug: function() { }, 
       onLoad: function() { } 
      }); 
     }); 

     function CaptureAndSave() { 
      webcam.capture(); 
     } 
    </script> 
</head> 
<body class="home desytec"> 
    <header> 
    </header> 
    <!-- MAIN --> 
    <div id="main"> 
     <!-- wrapper-main --> 
     <div class="wrapper"> 
      <!-- headline --> 
      <div class="clear"></div> 
      <div id="headline"> 
       <span class="main"></span> 
       <span class="sub"></span> 
      </div> 
      <!-- ENDS headline --> 

      <!-- content --> 
      <div id="content"> 
       <div id="camera"></div> 
       <br /><br /><br /> 
       <input type="button" onclick="CaptureAndSave();" value="Capturar" /> 
      </div> 
      <!-- ENDS content --> 
     </div> 
     <!-- ENDS wrapper-main --> 
    </div> 
    <!-- ENDS MAIN --> 
    <footer> 
    </footer> 
</body> 
</html>

Und dies ist der Controller:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace Capture.Controllers 
{ 
    public class CaptureController : Controller 
    { 
     // 
     // GET: /Capture/ 

     public ActionResult Index() 
     { 
      return View(); 
     } 

     [HttpPost] 
     public JsonResult Save(HttpPostedFileBase file) 
     { 
      try 
      { 
       if (file != null) 
       { 
        string pic = System.IO.Path.GetFileName(file.FileName); 
        string path = System.IO.Path.Combine(Server.MapPath("~/Captures"), pic); 
        file.SaveAs(path); 
        return Json(true, JsonRequestBehavior.AllowGet); 
       } 
      } 
      catch 
      { 

      } 
      return Json(true, JsonRequestBehavior.AllowGet); 
     } 
    } 
}

Save-Methode der Steuerung nie und in der Tat aufgerufen, von Firebug, kein POST erfolgt .

Übrigens. Die Kamera funktioniert, weil ich es in der Leinwand sehen kann (DIV id = Kamera).

Und OnCapture Rückruf wird aufgerufen, nachdem ich die Capture-Taste drücken.

Irgendwelche Hilfe, bitte?

Dank Jaime

Quelle

2013-12-07 jstuardo

Können Sie mir helfen .. Kannst du einen normalen Beitrag zur Speicheraktion machen? Lass es so geschrieben wie es ist, und benutze cURL oder eine Erweiterung deines Browsers, um einige Daten zu der Aktion zu posten und zu sehen, ob du einen Treffer bekommst? –

Nemesv ... sorry .. Ich werde die Lösung testen, wenn ich nach 3 Stunden wieder nach Hause komme. Grüße. – jstuardo

Ihre Save Aktion wird nicht aufgerufen, da die jscam_canvas_only.swf nur den "callback" Modus enthält. Für die vollständige API (also für den "save" Modus) müssen Sie herunterladen und verwenden Sie die jscam.swf.

$("#camera").webcam({ 
    //... 
    swffile: "@Url.Content("~/Scripts/WebCam/jscam.swf")", 
    //... 
});

Jetzt werden Ihre Save Aktion aufgerufen, aber der file Parameter wird immer null sein, weil die jscam.swf die Bilddaten als Hexadezimalstring im Körper Anfrage senden:

So Ihre webcam Setup ändern.

Das Standardmodell Bindung Infrastruktur ist der Umgang mit dem nicht so müssen Sie einige zusätzliche Code schreiben:

if (Request.InputStream.Length > 0) 
{ 
    string pic = System.IO.Path.GetFileName("capture.jpg"); 
    string path = System.IO.Path.Combine(Server.MapPath("~/Captures"), pic); 
    using (var reader = new StreamReader(Request.InputStream)) 
    { 
     System.IO.File.WriteAllBytes(path, StringToByteArray(reader.ReadToEnd())); 
    } 
    return Json(true, JsonRequestBehavior.AllowGet); 
}

Sie müssen den file Parameter entfernen und die Rohdaten von der Request.InputStream zugreifen, sondern weil es ein hexadezimal Zeichenfolge müssen Sie es in eine byte[] konvertieren, bevor Sie es speichern.

Es gibt keine Standardkonvertierung in .NET gebaut, aber SO ist voll von guten Lösungen:

How do you convert Byte Array to Hexadecimal String, and vice versa?

In meinem Beispiel habe ich this method verwendet:

public static byte[] StringToByteArray(String hex) 
{ 
    int NumberChars = hex.Length/2; 
    byte[] bytes = new byte[NumberChars]; 
    using (var sr = new StringReader(hex)) 
    { 
    for (int i = 0; i < NumberChars; i++) 
     bytes[i] = 
     Convert.ToByte(new string(new char[2]{(char)sr.Read(), (char)sr.Read()}), 16); 
    } 
    return bytes; 
}

Quelle

2013-12-12 21:22:38 nemesv

Danke !!!! es hat perfekt funktioniert !! – jstuardo

jquery webcam plugin postet das aufgenommene Bild nicht

Antwort

Verwandte Themen