عرض الكاميرا وأحفظ لقطة على سطح المكتب

عرض الكاميرا وأحفظ لقطة على سطح المكتب

سوف نخرج قليلاً عن المألوف وذلك بإنشاء برنامج يقوم بعرض كاميرا الكمبيوتر وباستخدام مؤشر الفأرة نقوم بالضبط لأخذ لقطة وحفظها على سطح المكتب. هذا البرنامج سوف نقوم بعملة باستخدام تقنية أدوبي الجديدة وهي AIR والتي تتيح لنا تطوير وتصميم برامج منفصلة عن المتصفح كـ برامج سطح المكتب والأندرويد والأيفون.

الخطوات التي سوف نقوم بها هي:

1) عرض كاميرا الكمبيوتر باستخدام الأكشن سكريبت 3.

2) كيفية استخدام الكلاس PNGEncoder.

3) كيفية حفظ الملفات على سطح المكتب بواسطة تقنية AIR.

في البداية يجب أن نقوم بتحميل الكلاس PNGEncoder لأنها لا تأتي متضمنه في مكتب الأكشن سكريبت 3 من خلال الرابط التالي:

https://code.google.com/p/as3corelib/

وحتى يكون العمل منظم سوف أقوم بوضع جميع الملفات في مجلد واحد فقط. بعد تحميل الملف قم بفتحة ثم أدخل إلى المجلد as3corelib-.93 ثم src وفك الضغط عن المجلد com بداخل هذا المجلد جميع الأوامر التي نحتاجها لهذا الكلاس. ثم قم بإنشاء ملف AIR باسم webcam وسوف تكون ابعاد الملف 320 x 240. هذا الملف سوف يحتوي على طبقة واحدة فقط باسم Actions لنضع فيها أوامر الأكشن سكريبت فقط لأننا سوف نقوم بكل شيء باستخدام الأوامر فقط.

في البداية يجب أن نقوم باستيراد ملف الكلاس الذي نحتاجه وهو PNGEncoder وذلك من خلال كتابة الأمر import ثم مسافة ونكتب اسم المجلد وهو com ثم نقطة ونكتب اسم المجلد الفرعي الذي يحتوي على جميع الملفات وهو adobe ثم نقطة ونكتب images ثم نقطة ونكتب اسم الكلاس الذي نريده وهو PNGEncoder بالإضافة لاستيراد هذا الكلاس نحن بحاجة لاستيراد بعض الكلاسات لملف الفلاش والتي نحتاجها لحفظ الملفات على سطح المكتب. ليكون الأمر في النهاية بهذا الشكل:

import com.adobe.images.PNGEncoder;
import flash.filesystem.File;
import flash.filesystem.FileStream;
import flash.filesystem.FileMode;

حسناً والآن نريد عرض كاميرا الكمبيوتر في البرنامج لذلك سوف نبدأ بإنشاء متغير باسم cam نوعه Camera وللحصول على الكاميرا بإمكاننا استخدام الأمر getCamera من الكلاس Camera وذلك بكتابة اسم الكلاس وهو Camera ثم نقطة ونكتب اسم الخاصية أو السلوك وهو getCamera وسوف يقوم هذا الأمر بالحصول على الكاميرا الافتراضية لجهازك أو بإمكانك كتابة اسم الكاميرا بين القوسين. ليكون الأمر في النهاية بهذا الشكل:

var cam:Camera = Camera.getCamera();

والآن بعد أن حصلنا على الكاميرا نحن بحاجة لعرضها ويمكن القيام بذلك عن طريق كائن من نوع Video والذي سوف يتولى عملية عرض الكاميرا في ملف الفلاش. إذاً لنقم أولاً بتعريف متغير vdo نوعة Video ثم يساوي ونقوم بإنشاء كائن نوعه Video عن طريق كتابة الأمر new ثم اسم الكائن وهو Video وبين القوسين نحدد أبعاد الفيديو لتكن 320x240 ليكون الأمر في النهاية بهذا الشكل:

var vdo:Video = new Video(320,240);

بعد إنشاء الفيديو يجب أن نحدد الكاميرا التي نريد عرضها والمرتبط بها المتغير cam وذلك باستخدام الأمر attachCamera فكل ما علينا القيام به هو كتابة اسم المتغير وهو vdo ثم نقطة ونكتب أسم الخاصية أو السلوك وهو attachCamera وبين القوسين نكتب اسم المتغير المرتبط به الكاميرا وهو cam ليكون الأمر في النهاية بهذا الشكل:

vdo.attachCamera(cam);

عندما تقوم باختبار العمل لن ترى شيء وذلك ببساطة أنك لم تقم بعرض الكائن لقائمة Display List لكي يعرض أثناء تشغيل ملف الفلاش ويمكن القيام بذلك بسهولة عن طريق الخاصية addChild وذلك بكتابة اسم الموفي كليب الذي تريد إضافة هذا الكائن له وبما أننا نريد عرض هذا الكائن في الموفي كليب الرئيسي يمكن أن نشير له باستخدام الأمر this ثم نقطة ونكتب الأمر addChild وبين القوسين نقوم بكتابة اسم الكائن الذي نريد عرضة وهو vdo ليكون الأمر في النهاية كما يلي:

this.addChild(vdo);

وبذلك عند اختبار للعمل سوف تلاحظ عرض الكاميرا الافتراضية لجهازك. الآن نريد أن نقوم بإنشاء حدث وهو عندما يقوم المستخدم بالضغط بزر الفأرة على المشهد الرئيسي stage سوف يتم أخذ لقطة من الفيديو في هذه اللحظة وحفظها على سطح المكتب. إذاً بما أننا نريد إضافة الحدث للمشهد الرئيسي نكتب الأمر stage ثم نقطة ونكتب الأمر addEventListener ونحدد الحدث وهو MouseEvent.MOUSE_DOWN وعند تنفيذ الحدث نقوم باستدعاء الدالة snapshot لذلك سوف نقوم بإنشاء الدالة snapshot تستقبل متغير من نفس نوع الحدث وهو MouseEvent ولا تقوم بإعادة أي قيمة void ليكون الأمر في النهاية بهذا الشكل:

stage.addEventListener(MouseEvent.MOUSE_DOWN, snapshot);
function snapshot(e:MouseEvent):void
{
               
}

في داخل هذه الدالة سوف نقوم بإنشاء كائن من نوع BitmapData لأنه عندما الأمر PNGEncoder سوف يستقبل قيمة من نوع BitmapData لذلك سوف نقوم بتعريف متغير باسم bmp نوعه BitmapData ثم يساوي وننشيء هذا الكائن عن طريق استخدام كلمة new ثم اسم الكائن وهو BitmapData وبداخل القوسين نقوم بكتابة حجم اللقطة التي نريد أخذها ولتكن 320x240 ليكون الأمر في النهاية:

var bmd:BitmapData = new BitmapData(320,240);

الآن يجب أن نأخذ لقطة من الكائن Video حتى نستطيع حفظها على سطح المكتب ونقوم بذلك عن طريق كتابة اسم المتغير الذي نوعه BitmapData وهو bmp ثم نقطة ونكتب الأمر draw وبين القوسين نكتب اسم كائن Video وهو vdo ليكون الأمر في النهاية بهذا الشكل:

bmp.draw(vdo);

وبهذا المتغير bmp الآن سوف يحتوي على لقطة من كائن Video. والآن لكي نستخدم PNGEncoder يجب أن نقوم بتعريف متغير باسم ba نوعه ByteArray وذلك لأن الأمر PNGEncoder يقوم بإعادة مصفوفة نوعها ByteArray إذاً نقوم بإنشاء متغير باسم ba من نوع ByteArray ثم يساوي ونكتب الأمر PNGEncoder ثم نقطة ونكتب encode وبين القوسين نكتب اسم الكائن الذي من النوع BitmapData وهو bmp ليكون الأمر كما يلي:

var ba:ByteArray = PNGEncoder.encode(bmp);

الآن يجب أن نحفظ هذه البيانات على سطح المكتب بصيغة .png في البداية سوف نقوم بإنشاء الملف على سطح المكتب وذلك عن طريق إنشاء متغير باسم fle نوعه File ثم يساوي ونريد الآن الوصول لمجلد سطح المكتب ولفعل ذلك هناك خاصية desktopDirectory الموجودة في الكلاس File إذاً سوف نقوم بكتابة اسم الكلاس وهو File ثم نقطة ونكتب الخاصية desktopDirectory ثم نقطة ونكتب السلوك resolvePath والذي يرى ما إذا كان الملف قم تم إنشائه فإنه سوف يحفظ الملف الجديد فوقة أما إن لم يكن موجوداً فإنه يقوم بإنشائه هذا السلوك يستقبل اسم الملف الذي نريد استخدامه متبوعاً بصيغة الملف. ولكي نحفظ كل لقطة باسم مختلف نحن بحاجة لإنشاء متغير int باسم count خارجة الدالة snapshot ونسند القيمة صفر لهذا المتغير بعد ذلك نقوم بزيادة القيامة بداخل الدالة عند إنشاء الملف يكون الأمر في النهاية بهذا الشكل:

stage.addEventListener(MouseEvent.MOUSE_DOWN, snapshot);
var count:int = 0
function snapshot(e:MouseEvent):void
{
                var bmd:BitmapData = new BitmapData(320,240);
                bmd.draw(vdo);
                var ba:ByteArray = PNGEncoder.encode(bmd);
                var fle:File = File.desktopDirectory.resolvePath("webcam" + count++ + ".png");
}

الآن لدينا الملف الذي نريده يجب أن نقوم بعد ذلك بكتابة بيانات الـ ByteArray الذي يحتوي على اللقطة والمتمثلة في المتغير ba من خلال استخدام كائن FileStream إذاً سوف نقوم بإنشاء متغير باسم fStream نوعه FileStream ثم يساوي ونشئ هذا المتغير عن طريقة كتابة الأمر new ثم نوع المتغير وهو FileStream ليكون الأمر في النهاية كما يلي:

var fStream:FileStream = new FileStream();

بعد ذلك نريد أن نقوم بفتح الملف الذي نريد الكتابة فيه وذلك عن طريق كتابة اسم المتغير fStream ثم نقطة ونكتب الأمر open وبين القوسين نكتب اسم المتغير الذي يقوم بإنشاء الملف وهو fle ثم فاصلة ونكتب نوع الوضع الذي نريد فتح الملف فيه وهو وضع القراءة إذاّ نكتب FileMode.WRITE ليكون الأمر كما يلي:

fStream.open(fle, FileMode.WRITE);

والآن سوف نكتب بيانات ByteArray والمخزنة بالمتغير ba لذلك سوف نستخدم الخاصية writeBytes إذاً سوف نكتب اسم المتغير وهو fStream ثم نقطة نكتب الأمر writeBytes وبين القوسين نكتب اسم المتغير ba والذي يحتوي على بيانات الصورة ليكون الأمر كما يلي:

fStream.writeBytes(ba);

وفي النهاية يجب أن نغلق الملف بعد الكتابة عن طريق استخدام الأمر close ليكون الأمر كما يلي:

fStream.close();

الآن قم باختبار العمل واستمتع بالنتيجة...

تمنياتي لكم بالتوفيق