توضیحات و دانلود

گرفتن عکس از دوربین وب (Webcam) در ASP.Net MVC
0 0
گرفتن عکس از دوربین وب (Webcam) در ASP.Net MVC

با سلام در این مقاله با یک مثال توضیح خواهیم داد که چگونه می توان عکس / تصویر ثابت را از دوربین وب در ASP.Net MVC 5 Razor گرفت .
پلاگین jQuery Webcam برای گرفتن تصاویر (عکس) از دوربین وب استفاده می شود.عکسهای گرفته شده با استفاده ازWebcam در پوشه ذخیره می شوند و در View در ASP.Net MVC 5 Razor نمایش داده می شوند.
پلاگین jQuery Webcam
شما باید پلاگین jQuery Webcam را از لینک زیر دانلود کنید ، در کد منبع پیوست این مقاله نیز موجود است.
دانلود افزونه jQuery وب کم
View
View شامل یک HTML DIV برای نمایش زنده دوربین وب ، یک عنصر HTML تصویر برای نمایش تصویر گرفته شده ، یک SPAN HTML برای نمایش وضعیت دوربین وب و دکمه HTML برای گرفتن تصویر با استفاده از دوربین وب است.
در رویداد jQuery load ، پلاگین jQuery Webcam به HTML DIV اعمال شده است تا ضبط مستقیم دوربین وب در قسمت View قابل پخش باشد.
ویژگی ها و رویدادهای پلاگین jQuery Webcam
ویژگی ها
1. width - عرض DIV که دوربین زنده را نمایش می دهد.
2. height - ارتفاع DIV که دوربین زنده را نشان می دهد.
3. mode - حالت های مختلفی مانند پاسخ به تماس ، ذخیره و غیره وجود دارد که در این مقاله از حالت ذخیره استفاده می شود زیرا تصویر ضبط شده باید روی سرور بارگذاری شود.
4. swffile - مسیر فایل Flash که برای نمایش دوربین وب در صفحه استفاده خواهد شد.
رویداد ها
1. debug - این رویداد یک رویداد اشکال زدایی است و بعد از هر بار پلاگین jQuery Webcam انجام می شود. از این رویداد می توان برای نمایش وضعیت پلاگین jQuery Webcam استفاده کرد .
2. onSave - این رویداد پس از عکس گرفتن و بارگذاری تصویر روی سرور شروع می شود.
3. onCapture - این رویداد هنگامی انجام می شود که عملکرد ضبط افزونه jQuery Webcam انجام شود.
با کلیک بر روی دکمه ، عملکرد جاوا اسکریپت به نام Capture انجام می شود که با روش ضبط پلاگین jQuery Webcam ارتباط برقرار می کند .
پس از گرفتن تصویر ، با استفاده از روش صرفه جویی در پلاگین jQuery Webcam که در قسمت مدیریت رویداد OnCapture است ، روی سرور بارگذاری می شود.
پس از دانلود موفقیت آمیز تصویر در سرور ، یک ارتباط جی کوئری AJAX به روش GetCapture Action که آدرس URL تصویر گرفته شده ذخیره شده بر روی سرور را برمی گرداند و سپس این URL به عنصر HTML Image اختصاص داده می شود.

@{
    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
Controller از سه روش تشکیل شده است.
روش انجام عملیات GET
در داخل این روش ، متغیر Session که آدرس URL تصویر گرفته شده را ذخیره می کند ، تنظیم و نمایش داده می شود.
روش HTTP POST برای ذخیره تصویر ضبط شده
تصویر Captured به عنوان داده خام به صورت رشته Hexadecimal با استفاده از روش ذخیره پلاگین jQuery Webcam ارسال می شود .
داده های خام تصویر گرفته شده با استفاده از کلاس StreamReader خوانده و به یک رشته Hexadecimal تبدیل می شوند.
سپس رشته Hexadecimal به یک بایت Array تبدیل شده که در نهایت به عنوان یک فایل Image در یک پوشه ذخیره و آدرس URL ذخیره شده Captured در متغیر Session ذخیره می شود.
HTTP POST روش برای بازگرداندن تصویر URL ضبط شده
این روش Action با استفاده از jQuery AJAX فراخوانی می شود و URL را از متغیر Session برمی گرداند و سپس متغیر Session را از بین می برد.
توجه : نوع برگشتی این روش Action به عنوان ContentResult تعیین می شود زیرا به سادگی یک رشته را برمی گرداند.

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

عکس صفحه
Adobe Flash از کاربر درخواست می کند تا به دوربین وب دسترسی پیدا کند

 

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :