Here I have created sample that will help you out.
I have just used Dummy base64 image,you can use webcam image,just umcomment few code(I have mentioned in code).also I have used aspx engine,you can rather use razor engine
Contact.aspx(View)
<div>
<% using (Html.BeginForm())
{%>
<%: Html.ValidationSummary(true) %>
<fieldset>
<legend>Email:</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.FromEmail) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.FromEmail) %>
<%: Html.ValidationMessageFor(model => model.FromEmail) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Message) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Message) %>
<%: Html.ValidationMessageFor(model => model.Message) %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.FromName) %>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.FromName) %>
<%: Html.ValidationMessageFor(model => model.FromName) %>
</div>
<div class="editor-label">
<%: Html.HiddenFor(model => model.Base64String, new { id = "UploadBase64" })%>
</div>
<br />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="../../Scripts/scriptcam.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
$("#webcam").scriptcam({
showMicrophoneErrors: false,
onError: onError,
cornerRadius: 20,
cornerColor: 'e3e5e2',
onWebcamReady: onWebcamReady,
uploadImage: 'upload.gif',
onPictureAsBase64: base64_tofield_and_image
});
});
function base64_tofield() {
$('#formfield').val($.scriptcam.getFrameAsBase64());
$('#UploadBase64').val($.scriptcam.getFrameAsBase64());
return false;
};
function base64_toimage() {
// $('#image').attr("src", "data:image/png;base64," + $.scriptcam.getFrameAsBase64());
// $('#UploadBase64').val($.scriptcam.getFrameAsBase64());
//Note: Uncomment Above line and remove below three lines, I have just used dummy base64 image
var base64 = 'iVBORw0KGgoAAAANSUhEUgAAAfQAAADICAYAAAAeGRPoAAAM3ElEQVR4nO3dP6gl130H8G+xxRYbUKHiFSouRIULEVy4SPGKhahQ4dLFFiqWWAYVG1iIDCpUjCPFgQii0kX+PEgKQVzIpElAhQKKcKFiDS42qVwIswYZXiEbKSRkU8wb9u68c+bO3Dv33X+fD5zm7ZkzZ26xvzlnzvmdBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKDsVpLvXpVbO+4LALCG20k+TfL0qnx+9bdteCXJ/RXFSwUArOGNPAvmXXlj5nucJfm4cJ9a2eZLBQAcpSbXA2ozY/tnSR4X7rGqzP1SAQBHrcl2A/rnhfbHlIcz9gEAjl6T7QX080LbY8plkpdm6gMAnIQm1wPqB1ts+6skFwPl/SSLme4PACejtCjuMskLM7TdFNp+d4Z2AYCesyRf53rgfX2Gtv+q0G4zQ7sAQMFPMn/gvZ3kSaHdBxu2CwBUNJn/O/r3Cm12Lwr3C0VCGQDY0Da+ozeFNiWUAYAtmvod/U7aEfX9QulG2k2hPUEdACrmOlil9B39x3k+cL+Z5KOUg38/KL+1oo6gDsBJ6QL2/aXy/bTfuC+S/CbPAuGXV3/7u6t//37aA1HGaHI9sP5P4W9jyw9TXhQ3tkj9CsDR6J+Etm75OKtH8H8xw32Wy8O0CWLez3AimVrQbyb+VgCwl+YK5mOmsm8n+cWM95mSuvXllIN6M/J6ANhrpZXnc5TSVHZti9lQ+TLJh5kndWtTaL+Z2AYA7KUm2wnozRr3+mWeD9ivZt4946X7l/oJAAenSXkq+yLJT9MG2V8l+b9CvakB/eGKay7Tbm3blmZkPwHg4DQZF+T+rFBvakB/Kc9/xy69JDzKdjK5vZJ2K5yADsBRajIuyN1K8ttC3Vp5WLnfIu10+vtJ/r5y7Zz7w8/Srr6f8uIBAFtX2i++bvluytvImsq9z9OeM74qmI9dff5i2kVv2wrqZ0ker+jrvQ3vAQCTbWOL2a8Lf2sG+tCfNu/KN0n+OdNXnw9lepua9GX5ZeftSj+Xy5eRKQ7gpMyV9nRT29piNnUaepHnE7l0QXw5oI79rWovCEPT9iVTX3Yu0844AHAi+oFil/m/V60Sn6usc6RpKaCO/a1KSV+mJI1Jxr3sfJX2BeRB2oNfADghpUCxq/zfQ6PZOctlpn+PLx26MuW3WuTZqH+dpDGrXna+ihE5wEkrBYopU8FzW6QNeJ+lHLg+y3BO80eFazY5HGVVuanfauhl56O0swAAnLB+oJg6FbwttRFpM3DNKymv+v55pa05Rvo3+Vst8vy3/XeTfPsG7w/Anlvk2d7pxU578kxtRNr06r2Sdkp8aC/2D1LfPnYIo3MAOGhNrgfRn+XZd+2hIN6VbuvWedoR9aGOzgHgYG26ja2/UOxO2hXgFxuWfZrJAICt66bDh8rQfu6ztAld1h1BW/UNAGvqkq+MmQ7vytB+7t9MaKcL5PZhA8AGNkndWtrP/Z2R13bHoQrkALChbyX5Udb/3t0U2nxtoL4gDgAz+zCbrxpvCu3eSnll+mexKA0AZrVqWrwbSS+XUja3ptL+exPqAgAVq05iWzUtvrxXu2urlM2tqdy/mVAXACgYcxLbrSRf5HrQ/SbJH+X5I0eHFszdq/ShKdRtNn4yADghY09iO0/ydaHuexm36r3L5lbSFOo3Gz4XAJyUJteDae0s8b8u1P114W/9surYz1IfmnUfCABOUWmEfpk2g1vfWcqj9FUL5lZlc2sK1zVrPxEAnKBakH5Uqf+TQt2xC+ZqmsK1zRrPAgAHaUwe9ftX9YZ8kHJAvluo+6BSdzmIX2Ta4SZNoZ1HqX9zB4CjcJZpedSfXtWvbUt7MeWzxJtC3T/O8LT7W2s8T1Npq7Q4DwCOxueZFsyXS+2QlHcLdWvT7qWkMVOm2PseVtozSgfgaJ1n/WDelU9zfdHbvUrdu4U+vFOo1+1JX8dLSZ5U7m+UDsBRarJ5QC+Nvm+lHFSbQh9qC+le3+C5aqP00v0B4OA1KQfni0opHXxSG32/VajzsNKP0mr3Dzd4rtoovXZ/ADhIXXrVn2baKHZoOrt/Xb/u0Dfx0v71p1d9XNfLE+4PAAenn2996rT0IsknhetKi84Wabecrdp29mLaDHD9Nr9I8sLqRxrs65j7A8DBqY2Gp3xnbirXbrLozHdvALiyfFJZV/r7xZusXuBWStW6bFtbw0oj/1rqWAA4SkNT6cv7xWtbyoZWrfdta2vYIuUV74+T3NmgXQA4GKum0rtAW9tStmrVet+2pshrqWM3bRcADkKT4QC9vGXr9RV1xwTQbW0Nq6WOvcxmC+QAYO/dTvLz1INzf8vWmFF6M+K+29oadp7y1PuYPgHATow95axUugVvten2R6lv2Solfllngdsi29kaVpp6t0AOgL2xvBJ96ilntQVv71X+bWj6e2hh2xwL3DZVSwn7OII6ADu2KqnLuuVfKn9/J+Wta51F2pF1KanLPkxx1xbIrVqFDwBbtWol+rrl30fUqR11mpSPO92HwFlbIPc0yZspv6QAcER+lORP036f3ie1rV6bln8bWa901GkyvEL+7kzPvq7z1GcQhl5SADgCy//pf5z9+eZa+279v0n+MfVTzi6S/Gvhuq78TaXdUnmcdhp++WVn6EWjmfUXWM/QNjtnnAMcsVIQ25egvkh5RD0UmM7SPsNQUFuk/R4+dMRpv3QvO9vK/DaXoW12ze66BcC21Uam2wzqpTzqy2V5YVpT6F9TaXdVMH+S55/rTpIHaUf1Y0bt3XfyRa6/EPTb3qXzlF9WnHEOcMSGppvPM/9iqrGr17tvvk2lb6V85Z8PtPdR2uQuNYsMr2Lvyt2la15IGySb7N/54VPOWAfgCKwKrJ9mvsM+zjJtK9obqR+Q0ly12SWbebtS76uMW6zWtfO3K/rUlC/fS4s44xzgZIwJrM1M9xoaQZfKw9S/Cf8+5SNE+8H8vNCP/pT/lKQ1zeY/AwDMbzlY/XfKQWyONKLnlbZrZXmK+DzJNxOvf5p2z/iybhS+ScKafVj4BgDXLAerf0h95femC+WaSruXub7trJsi7kbSbyf5XeX6VSP8XPV7jtSx+7TwDQCe059OvpPkn1IOaJtkQ2sK7X2S+rfdTVO/Lo/wh05XG1tWLaoDgJ3qB/RkOI3o3TXv0xTaGjqlbErq19+nPMJPku9MaKc0W/Bukm+v+cwAcGNKAT2ppxH9MOulEK2tVn+Sdkr91V67U1K//njgvq+tuLYL4g8y32p+ALhxtYCeDB9EMvVb8lAGs35wv5/kTyr1S4lj+v3u3/dXuR7A+yN5ADhoQ4FxaNp7nUVybw20Vyr/ketT302hXr/ffbfTnjj2MG0yGAA4OkOB8SzJFxkO6rXzw0uG8qAPleVDY5rCv38w9mEB4FitGumepV3hPRRw+0dzdtvNSsF+kXaqe+hEtNo0f1KeNbiMkTcAJ27s1PXdDOc5//Mk38v1xC1D53B3U+hjg/vdtC8YXxf+bajvAHD0loPiz1I/Ae1+kr/MehnbxmRX64L7RerJbbptbh8U/s0oHYCTNjU4r1Oayr1rx6g+SH024I3UR+kXG/wOAHDQbiKgd4es9IP3Opngmqt+l0bpT6/uAQAnZ9vB/DLJH2azNK79l4OkHaWXRvFfxNQ7ACdozuD9n2nzwF/k+cQtU9K4rno56PKzJ+3U/FDQB4CTsRwIH+V6LvNSeZRyIK0tfpuSxrUUxJdfDvo+KVzz6eRfAQAO3HIgbEZeUwvQtdPYxiSUKR2MMia/+rcq7b00dBEAHJt1AvpQgL5buWaRdpRdGvFvmlO9NGNg2h2Ak7JOQE/aAFwK6lPamMs7hX6YdgfgpGwSjEuHrexiZPxyoR9P4yQ1AE7IJgG9P/XeX4V+k0rT7uucCAcAB2nT0fUi7TfwXZ8tXpp2f5rklxl/GhwAHKzl4PfqjvuyiReSfJlyUH9zh/0CgBuxvIjs0Eey5ylnj/tol50CgJvQBb33d92RmbyW8h53ADhqu9xutg1/kOS/Mn5/PAAchWML6Ek7xb4P2+kA4MYcY0Bvsh8JbwDgxhxjwGsioANwYo5xSrqJgA7Aidl1hrdtaDL+JDgAOAq7zvC2Dfcy7SQ4AGAP3Ur5JLh7u+wUADDdedpPCV0wf5Lk9k57BACs5XbaPO4P0+Z6BwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAE/T/tyGRRmqgL5AAAAABJRU5ErkJggg==';
$('#image').attr("src", "data:image/png;base64," + base64);
$('#UploadBase64').val(base64);
return false;
};
function base64_tofield_and_image(b64) {
$('#formfield').val(b64);
$('#image').attr("src", "data:image/png;base64," + b64);
$('#UploadBase64').val(b64);
return false;
};
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
return false;
}
function onError(errorId, errorMsg) {
$("#btn1").attr("disabled", true);
$("#btn2").attr("disabled", true);
alert(errorMsg);
return false;
}
function onWebcamReady(cameraNames, camera, microphoneNames, microphone, volume) {
$.each(cameraNames, function (index, text) {
$('#cameraNames').append($('<option></option>').val(index).html(text))
});
$('#cameraNames').val(camera);
return false;
}
</script>
<div class="editor-label">
<div>
<div id="webcam">
</div>
<div style="margin: 5px;">
<img src="../../webcamlogo.png" style="vertical-align: text-top" />
<select id="cameraNames" size="1" onchange="return changeCamera()" style="width: 245px;
font-size: 10px; height: 25px;">
<option label="Select" value="0"></option>
</select>
</div>
</div>
<div>
<p>
<input type="button" class="btn btn-small" value="Snapshot to form" onclick="return base64_tofield()" />
<p>
<input type="button" class="btn btn-small" value="Snapshot to image" onclick="return base64_toimage()" />
</div>
<div>
<p>
<textarea id="formfield" style="width: 190px; height: 70px;"></textarea></p>
<p>
<img id="image" style="width: 200px; height: 153px;" /></p>
</div>
</div>
<div class="ededitor-label">
<br />
<p>
<input type="submit" value="Send Email" />
</p>
</div>
</fieldset>
<% } %>
</div>
EmailController(Controller)
[HttpGet]
public ActionResult Contact()
{
return View();
}
[HttpPost]
public ActionResult Contact(EmailFormModel model)
{
if (ModelState.IsValid)
{
var body = "<p>Email From: {0} ({1})</p><p>Message:</p><p>{2}</p>";
var message = new MailMessage();
message.To.Add(model.FromEmail);
message.Subject = "Your email subject";
message.Body = string.Format(body, model.FromName, model.FromEmail, model.Message);
message.IsBodyHtml = true;
string base64 = model.Base64String;
byte[] imagebytes = Convert.FromBase64String(base64);
message.Attachments.Add(new Attachment(new MemoryStream(imagebytes), "Image1"));
using (var smtp = new SmtpClient())
{
smtp.SendAsync(message, null);
return RedirectToAction("Sent");
}
}
return View(model);
}
EmailFormModel(Model)
public class EmailFormModel
{
[Required]
public string FromEmail { get; set; }
[Required]
public string Message { get; set; }
[Required]
public string FromName { get; set; }
public string Base64String { get; set; }
}
Screenshot
