Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I found a 3rd party open-source Flash + JavaScript library that made this fairly simple called '<a href="http://code.google.com/p/jpegcam/" rel="nofollow" title="jpegcam">jpegcam</a>'. </p> <p>The following code is built against <code>Asp.Net MVC 3 (Razor View + T4MVC)</code>.</p> <hr> <p><strong>Step 1</strong>: Include the javascript library</p> <pre><code>&lt;script type="text/javascript" src="@Url.Content("~/Scripts/jpegcam/htdocs/images.js")"&gt;&lt;/script&gt; </code></pre> <p><strong>Step 2</strong>: Setup jpegcam and wire up the necessary hooks</p> <pre><code>&lt;script type="text/javascript"&gt; webcam.set_api_url('@Url.Action(MVC.Images.Snapshot())'); webcam.set_swf_url('@Url.Content("~/Scripts/jpegcam/htdocs/webcam.swf")'); webcam.set_quality(90); // JPEG quality (1-100) webcam.set_shutter_sound(false, '@Url.Content("~/Scripts/jpegcam/htdocs/shutter.mp3")'); webcam.set_hook('onComplete', 'upload_complete'); document.write(webcam.get_html(320, 240)); function upload() { webcam.freeze(); // Snapshot the image from the camera webcam.upload(); // POST the data w/ content type 'image/jpeg' } function upload_complete(response) { var json = jsonParse(response); if (json.Redirect) { window.location.replace(json.Redirect); } else if (json.Error) { Notifier.Error('Error', json.Error.Message); webcam.reset(); } else { Notifier.Error('Error', 'An unknown error has occurred.'); webcam.reset(); } } &lt;/script&gt; </code></pre> <p>Note: The <code>webcam.set_api_url()</code> call sets up the POST url.</p> <p><strong>Step 3</strong>: Wire up the buttons in the view</p> <pre><code>&lt;p class="actions"&gt; &lt;input id="capture-configure" class="secondary-button" type="button" value="Configure..." onclick="webcam.configure()" /&gt; &lt;input id="capture-submit" class="primary-button" type="button" value="Snap Mugshot" onclick="upload()" /&gt; &lt;span class="alternate"&gt; or &lt;a class="cancel" href="@Url.Action(MVC.Images.View())"&gt;Cancel&lt;/a&gt; &lt;/span&gt; &lt;/p&gt; </code></pre> <p><strong>Step 4</strong>: Create the controller action to service the POST</p> <pre><code>[HttpPost] public virtual ActionResult Snapshot() { var image = new System.Web.Helpers.WebImage(Request.InputStream); // Do fun, amazing things with the jpeg image return RedirectToAction(MVC.Images.View()); } </code></pre> <p>Note: <code>System.Web.Helpers.WebImage</code> is part of the 'microsoft-web-helpers' NuGet package.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload