در این مقاله نحوه گرفتن عکس از وب کم در ASP.Net MVC را به همراه یک مثال شرح خواهیم داد.برای گرفتن عکس از پلاگین وب کم jQuery استفاده خواهیم کرد.

هدف این مقاله آموزش عکس برداری از وب کم در ASP.Net MVC است. عکس گرفته شده در یک فولدر ذخیره خواهد شد و در یک view در ASP.Net MVC نمایش داده خواهد شد .

توجه:فایل jQuery webcam plugin در ضمیمه مقاله موجود است .

محتوای فایل view

فایل view باید شامل المان های زیر باشد.

1- div : جهت نمایش تصویر زنده ی وب کم
2- img : جهت نمایش عکس گرفته شده از وب کم
3- span :جهت نمایش وضعیت وب کم
4- Button :جهت گرفتن عکس از وب کم

در متد jQuery load event handler پلاگین jQuery webcam را به المان div که جهت نمایش زنده وب کم در نظر گرفته بودیم متصل می کنیم .

مشخصه ها (properties) و رویداد های پلاگین jQuery webcam

مشخصه ها

۱- width : عرض المان div که تصویر زنده را نمایش خواهد داد.

۲- height : ارتفاع المان div که تصویر زنده را نمایش خواهد داد.

۳- mode : برای این مشخصه مقادیر مختلفی موجود است. مانند : save,call back و... .در این مقاله برای گرفتن عکس و آپلود آن در سرور ما از مقدار save برای این مشخصه استفاده خواهیم کرد.

۴- swffile : آدرس فایل flash که جهت نمایش تصویر زنده در صفحه استفاده خواهد شد.

رویداد ها

1- debug : این رویداد یک رویداد رفع باگ می باشد. که بعد از انجام هر عملیات توسط پلاگین jQuery webcam فرا خوانی خواهد شد این رویداد میتواند وضعیت پلاگین jQuery webcam را نمایش دهد.

۲- onSave : این رویداد پس از عکس برداری و ارسال عکس برای سرور فرا خوانی خواهد شد.

۳- onCapture : این رویداد زمانیکه تابع capture از پلاگین jQuery webcam اجرا شد فراخوانی خواهد شد.

زمانیکه کاربر بر روی دکمه کلیک کند در جاوا اسکریپت تابع capture که متد capture را از پلاگین jQuery webcam فراخوانی میکند اجرا خواهد شد.و یک عکس گرفته میشود عکس گرفته شده توسط متد save از پلاگین jQuery webcam که رویداد Oncapture فراخوانی میکند به سرور ارسال خواهد شد .زمانیکه عکس مورد نظر با موفقیت در سرور آپلود شد یک jQuery ajax اکشن getcapture را که آدرس عکس ذخیره شده در سرور را باز میگرداند فراخوانی کرده و آدرس به دست آمده از نتیجه فراخوانی را به مشخصه src از المان img میدهد.

View


@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center"><u>Live Camera</u></td>
            <td></td>
            <td align="center"><u>Captured Picture</u></td>
        </tr>
        <tr>
            <td><div id="webcam"></div></td>
            <td>&nbsp;</td>
            <td><img id="imgCapture" style="visibility: hidden; width: 320px;height: 240px"/></td>
        </tr>
    </table>
    <br/>
    <input type="button" value="Capture" onclick="Capture();"/>
    <br/>
    <span id="camStatus"></span>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="~/Webcam_Plugin/jquery.webcam.js"></script>
    <script type="text/javascript">
        $(function () {
            jQuery("#webcam").webcam({
                width: 320,
                height: 240,
                mode: "save",
                swffile: '/Webcam_Plugin/jscam.swf',
                debug: function (type, status) {
                    $('#camStatus').append(type + ": " + status + '<br /><br />');
                },
                onSave: function (data, ab) {
                    $.ajax({
                        type: "POST",
                        url: '/Home/GetCapture',
                        data: '',
                        contentType: "application/json; charset=utf-8",
                        dataType: "text",
                        success: function (r) {
                            $("#imgCapture").css("visibility", "visible");
                            $("#imgCapture").attr("src", r);
                        },
                        failure: function (response) {
                            alert(response.d);
                        }
                    });
                },
                onCapture: function () {
                    webcam.save('/Home/Capture');
                }
            });
        });
        function Capture() {
            webcam.capture();
        }
    </script>
</body>
</html>

Controller


public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        Session["CapturedImage"] = "";
        return View();
    }
 
    [HttpPost]
    public ActionResult Capture()
    {
        if (Request.InputStream.Length > 0)
        {
            using (StreamReader reader = new StreamReader(Request.InputStream))
            {
                string hexString = Server.UrlEncode(reader.ReadToEnd());
                string imageName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
                string imagePath = string.Format("~/Captures/{0}.png", imageName);
                System.IO.File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
                Session["CapturedImage"] = VirtualPathUtility.ToAbsolute(imagePath);
            }
        }
 
        return View();
    }
 
    [HttpPost]
    public ContentResult GetCapture()
    {
        string url = Session["CapturedImage"].ToString();
        Session["CapturedImage"] = null;
        return Content(url);
    }
 
    private static byte[] ConvertHexToBytes(string hex)
    {
        byte[] bytes = new byte[hex.Length / 2];
        for (int i = 0; i < hex.Length; i += 2)
        {
            bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
        }
        return bytes;
    }
}

این کنترلر شامل سه اکشن می شود.

اکشنی با نوع Get

در این اکشن یک متغییر Session برای ذخیره کردن Url عکس مقدار دهی اولیه خواهد شد و یک View بازگشت داده می شود.

اکشن Capture با نوع Post برای ذخیره کردن

عکس گرفته شده توسط متد saveاز پلاکین jQuery webcam به صورت یک سطر داده ی رشته ای هگزادسیمال ارسال خواهد شد . این سطر داده توسط کلاس streamreader به یک رشته ی هگزادسیمال تبدیل خواهد شد در نهایت رشته هگزادسیمال به آرایه ای از بایت ها تبدیل خواهد شد و این آرایه به عنوان عکس در یک فولدر ذخیره خواهد شد آدرس urlعکس ذخیره شده در متغیر session که بدین منظور فراهم شده است قرار میگیرد .

اکشن GetCapture با نوع Post برای به دست آوردن آدرس Url عکس

این اکشن توسط یک jQuery ajax فراخوانی خواهد شد و از متغیر Session آدرس عکس ذخیره شده را گرفته بازگشت داده وحافظه اشغال شده توسط متغیر Session را آزاد میکند.

توجه:مقدار بازگشتی این اکشن از نوع ContentResult بوده که به صورت ساده یک رشته را بازگشت میدهد . ContentResult نوع داده ای است که برای بازگشت دادن محتواهایی مانند رشته ، رشته هایxml و رشته های از این قبیل در ASP.Net MVC استفاده می شود.

توجه :

با توجه به این که فایل Falsh تنها باید از ریشه سایت شما فراخوانی شود تا اجرا شود. از طرفی مرورگر های FireFox و Chrome از ریشه localhost فایل فلش را اجرا نخواهند کرد. پس در صورتی که قصد آزمایش این روش را دارید از مرورگر اینترنت اکسپلورر استفاده کنید.

آموزش asp.net mvc

فایل های ضمیمه

5888_WebCam.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

گرفتن تصویر ازWebcam در ASP.Net MVC

View

Controller

توجه :

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید