بناء تطبيق asp webcam باقل سطور ممكنة

 في  مشواري البرمجي بنيت  العديد من تطبيقات الويب كام لكن بقي فضولي  كيف ابني  تطبيقي للويب كام ب asp   فاغلب  التطبيقات التي تم بنائها تعتمد  بشكل كبير  على الجافاسكربت التي  افضلها  بدوري  لسهولة بناء تطبيقات الويب كام  او غيرها من التطبيقات التي تعتمد على الصفحة الواحدة  ،  في هذا  التطبيق سأعتمد على اضافة من الجيكواري ثم سيتم  حفظ الصورة في ملف من  خلال  السي شارب او vb.net  الامر الذي  سييسر عملية النقل بين وحدات الويب وasp  


قبل  القيام بكتابة اي سطر  من الكود  سنحتاج  الى  تحميل  الاضافة بشكل  يدوي من الموقع  الرسمي  jquery webcam plugin  او يمكنك ادراجها ضمن الاضافات الخاصة  ide  الذي تستخدمه  عن افضل  العمل اليدوي حتى  اتفادا  مشاكل التحديثات  والاخطاء الناجمة عن التركيب 

في صفحة home   او markup سنكتب  الكود التالي لادراجها في العادة  نستخدم وسم div ثم وسم submit لكن في asp  سنستخدم المتوفر لدينا  ويفضل مبرمجي asp  ترتيب عمله  باستخدام الجدولة اوالجداول كما في  الكود التالي :  

<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <u>بث مباشر</u>
        </td>
        <td>
        </td>
        <td align="center">
            <u>التقط صورة</u>
        </td>
    </tr>
    <tr>
        <td>
            <div id="webcam">
            </div>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <asp:Image ID="imgCap" runat="server" Style="visibility: hidden; width: 320px;
                height: 240px" />
        </td>
    </tr>
</table>
<br />
<asp:Button ID="btnCap" Text="Capt" runat="server" OnClientClick="return Cap();" />
<br />
<span id="camStatus"></span>
</form>

سنقوم باستدعاء المكتبات  في كل من اللغتين  السي شارب وvb.net 

'C#
using System.IO;
using System.Web.Services;
 
'VB.Net
Imports System.IO

Imports System.Web.Services 


الصورة  الملتقطة  يتم  تداولها على شكلraw  بيانات  من Hexadecimalمتغير عبر اضافة الجيكواري  وبما  ان مكونات الويب تحولها  الى  streamreader  لكي تضهر  فانهاتحول  Hexadecimal  ويتم تحويل هذه الاخيرة الى byte لكي يمكننا حفظها على امتداد صورة لاحقا ، الصورة في  الاصل تكون عبارة  عن  رابط  تم  تشكيله  لتسهيل عملية الحفظ  

C#
protected void Page_Load(object senderEventArgs e)
{
    if (!this.IsPostBack)
    {
        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);
                File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
                Session["CapturedImage"] = ResolveUrl(imagePath);
            }
        }
    }
}
 
private static byte[] ConvertHexToBytes(string hex)
{
    byte[] bytes = new byte[hex.Length / 2];
    for (int i = 0i < hex.Lengthi += 2)
    {
        bytes[i / 2] = Convert.ToByte(hex.Substring(i2), 16);
    }
    return bytes;
}
 
[WebMethod(EnableSession = true)]
public static string GetCapturedImage()
{
    string url = HttpContext.Current.Session["CapturedImage"].ToString();
    HttpContext.Current.Session["CapturedImage"] = null;
    return url;
}


VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        If Request.InputStream.Length > 0 Then
            Using reader As New StreamReader(Request.InputStream)
                Dim hexString As String = Server.UrlEncode(reader.ReadToEnd())
                Dim imageName As String = DateTime.Now.ToString("dd-MM-yy hh-mm-ss")
                Dim imagePath As String = String.Format("~/Captures/{0}.png", imageName)
                File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString))
                Session("CapturedImage") = ResolveUrl(imagePath)
            End Using
        End If
    End If
End Sub
 
Private Shared Function ConvertHexToBytes(hex As String) As Byte()
    Dim bytes As Byte() = New Byte(hex.Length / 2 - 1) {}
    For i As Integer = 0 To hex.Length - 1 Step 2
        bytes(i / 2) = Convert.ToByte(hex.Substring(i2), 16)
    Next
    Return bytes
End Function
 
<WebMethod(EnableSession:=True)> _
Public Shared Function GetCapturedImage() As String
    Dim url As String = HttpContext.Current.Session("CapturedImage").ToString()
    HttpContext.Current.Session("CapturedImage") = Nothing
    Return url
End Function


  • دور  اضافة الجيكواري محصور في  الاساس على صفحة الويب او مرتبط بالاخص باحد الاوسم الخاصة بالصفحة  ما قمت به هو الاستفادة  من هذه الاضافة  للجيكواري باستخدام ajax   مع المميزات التالية :  
  • امكانية التحكم في  الطول والعرض للكامرة الويب  width  and  height  
  • هناك العديد من الخصائص كالاتصال العكسي  callback  او الحفظ او غيره  استخدمت الحفظ لاني  احتاجه في هذه الحالة  
  • استخدام الفلاش كحالة طارئة ان لم يكن المتصفح يدعم الويب كام  رغم  اني اعرف ان اغلب الحواسيب  تستخدم  متصفحات حديثة  تدعم خصائص مطورة  html5  
  • التصحيح  اثناء   العمل  لوجود  خلل برمجي  الجميل  في  الاصافة  ان  الموقع يوفر لك كل  الحلول  التي قد  تواجها وان لم يكن فهناك  الدعم او اسال احد الاصدقاء  في  المنتديات البرمجية فهي  ليست  باضافة جديدة  على الويب  هذ   في ما  يحص debug
  • سهولة الحفظ  مقارنة بالتطبيقات الويب كام التي بنيتها  تعد هذه الاسهل  في حفظ  الصورة  بدقة  عالية  وجودة متوسطة  حسب  الاختيار وقوت الحاسوب تبعك  ، اي انها  تلقائيا تقوم بانشاء صور حسب جودة النت وحاسوبك   المشكلة التي كنت اوجها  في برمجتي  لتطبيقات الويب كام 
  • عملية التصوير سلسة  عند الضغط على زر  asp  للاتقاط الصورة فانه يمرر الاوامر الى  كود js  من خلال مكتبة jqury ، بمجرد الضغط يتك حفظ  الصورة في  السرفر ورفعها تلقائيا 


الاضافة  تحتاج  الى  الفلاش لكي تعمل عليك بالسماج للفاش  في متصفحك  حتى يتسنى لك التقاط صورة من الويب كام


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript"></script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/Default.aspx") %>';
$(function () {
    jQuery("#webcam").webcam({
        width320,
        height240,
        mode"save",
        swffile'<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
        debugfunction (typestatus) {
            $('#camStatus').append(type + ": " + status + '<br /><br />');
        },
        onSavefunction (data) {
            $.ajax({
                type"POST",
                urlpageUrl + "/GetCapturedImage",
                data'',
                contentType"application/json; charset=utf-8",
                dataType"json",
                successfunction (r) {
                    $("[id*=imgCapture]").css("visibility""visible");
                    $("[id*=imgCapture]").attr("src"r.d);
                },
                failurefunction (response) {
                    alert(response.d);
                }
            });
        },
        onCapturefunction () {
            webcam.save(pageUrl);
        }
    });
});
function Capture() {
    webcam.capture();
    return false;
}
</script>

النتيجة  تكون كالتالي :  




يمكنكم  تحميل  السورس  من github  او عمل fork  لاختصار  الوقت 

Post a Comment

0 Comments