في مشواري البرمجي بنيت العديد من تطبيقات الويب كام لكن بقي فضولي كيف ابني تطبيقي للويب كام ب 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>
</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 sender, EventArgs 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 = 0; i < hex.Length; i += 2)
{
bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 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(i, 2), 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({
width: 320,
height: 240,
mode: "save",
swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '<br /><br />');
},
onSave: function (data) {
$.ajax({
type: "POST",
url: pageUrl + "/GetCapturedImage",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("[id*=imgCapture]").css("visibility", "visible");
$("[id*=imgCapture]").attr("src", r.d);
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save(pageUrl);
}
});
});
function Capture() {
webcam.capture();
return false;
}
</script>
النتيجة تكون كالتالي :
يمكنكم تحميل السورس من github او عمل fork لاختصار الوقت
0 تعليقات