بسم الله الرحمن الرحيم,,

nodejs-1280x1024

في هذا الدرس ان شاء الله سوف نقوم بالتعرف على كيفية تنصيب “نود” و “مدير اضافات نود” (NPM) و انشاء أول سيرفر بسيط, تابع الفيديو ولا تنسى نشره بين اصدقائك حتى تعم الفائدة:

الكود المستخدم:

1
2
3
4
5
6
var http = require('http');
http.createServer(function(req,res) {
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end("hello world!");
}).listen(1337, '127.0.0.1');
console.log("Server is now running on http://127.0.0.1:1337");

بسم الله الرحمن الرحيم

nodejs-1280x1024

في هذا الدرس سوف نتعرف أكثر على ماهية الNodejs واختلافاتها وماذا نعني بالasynchronous programming, الفيديو التالي يقوم بشرح الدرس, مشاهدة ممتعة:

اذا كنت تريد الفائدة لغيرك الرجاء نشر الفيديو…

بسم الله الرحمن الرحيم,

 

 


nodejs-1280x1024

تعريف Node.js

لغة “Node.js” هي منصة برمجية حديثة العهد الا أنها بداية الى عصر جديد من الويب من ناحية السرعة و القوة و التفاعل, هذه اللغة بسيطة جدا للتعلم فهي تستخدم نفس الsyntax المستخدم في لغة المتصفحات “javascript” فهذا يجعلك تكتب نفس اللغة في الجهتين؛ جهة المستخدم وجهة السيرفر, وما يجعل هذه اللغة قوية جدا هي أنها لغة تفاعلية غير متزامنة (Asynchronous) وفي كلمات أخرى هي لا تعتمد على ترتيب الأسطر البرمجية في التنفيذ, بل تماما كما في “جافاسكربت”, اذا لم تتضح الصورة بعد فإنها سوف تتضح في الدرس القادم ان شاء الله.

الموقع الرسمي: http://nodejs.org/

 

مميزات Node.js

  • سريعة الاستجابة بشكل خيالي
  • مناسبة للتطبيقات الكبيرة والتفاعلية
  • تستخدم “الأحداث” (events)
  • لا تعتمد في التنفيذ على ترتيب الأسطر البرمجية مما يجعلها خفيفة وسريعة الاستجابة
  • مناسبة للتطبيقات التي تحتاج الى تخزين\استرداد بيانات بشكل سريع وكثيف والتي تعتمد على الويب.

 

مقارنات

ملاحظة: الأقل أفضل

 


abc100

مقارنة مع لغة “GO” المصنوعة من قِبل جوجل على سرعة الاستجابة

 


nodejs_vs_apache-php

 

مقارنة مع سيرفر “Apache” ولغة “php” على سرعة الاستجابة

 

مواقع تم تطبيقها على لغة Node.js

learnboost

linkedin-mobile-app

myspace

التعليقات : 0

بسم الله الرحمن الرحيم

كلاس جاهز

قد تحتاج أثناء عملك على مشروعك أن تقوم باستخدام class خارجي أو اضافي غير موجود في easycode ككلاس تحميل الصور أو غيره وما عليك في هذه الحالة الا ان تضع هذا الكلاس في مجلد يدعى classes و تقوم بعمل ما في المثال:

لنفترض أن لدينا كلاس اسمه upload نقوم بحفظه في ملف php يدعى upload.php بداخل مجلد classes

عندها نستطيع استخدامه ببساطة كالتالي:

1
$u = new upload()

كلاس جديد

اذا أردت صنع كلاس خاص بك لسبب ما؛ كل ما عليك هو انشاء ملف جديد بإسم الكلاس الذي تريد وليكن checkLogin وتكتب به التالي:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php


class CheckLogin
{
   
        public static function check() {
                $model = new ModelBase();
                $model->query("select * from users where (email='%s' or uname='%s')",array(
                        @$_SESSION['uname'],@$_SESSION['uname'],@$_SESSION['upass']
                ));
               
                if($model->rowCount() > 0 && @$_SESSION['ip'] == $_SERVER['REMOTE_ADDR']) {
                        $u = $model->fetch();
                        return $u['id'];
                }
               
                return false;
        }

}

هذا الكلاس به دالة واحدة فقط تقوم بالتحقق من ما اذا كان المستخدم مسجلاً للدخول أم لا, وقد لا تحبذ استخدام هذه الطريقة في بعض المشاريع لأنها تتحقق من قاعدة البيانات في كل عملية طلب للصفحات المحمية الا أنها محمية أكثر.

وبما أن الدالة check() هي من نوع static فبالإمكان حتماً أن نستدعيها كالتالي:

1
2
3
4
if(CheckLogin::check())
// you are logged in
else
// you are not logged in

ولاحظ أنك تستطيع الوصول الى الموديل الأساسي المدعو ModelBase من الكلاسات الخارجية للوصول الى قواعد البيانات والاستفادة منها مباشرة وهي خاصية قد تحتاجها فيما بعد.

أي اقتراحات بناءة للتطوير مرحب بها في التعليقات

بسم الله الرحمن الرحيم

الموديل هو الكلاس الذي يتعامل مع قاعدة البيانات و يعالج المعلومات منها ويرسلها الى الكونترولر.

لو أن لدينا جدول في قاعدة البيانات يسمى users؛ نذهب الى مجلد models ونقوم بإنشاء ملف جديد بإسم users.php:

1
2
3
4
5
<?php

class Users extends ModelBase {
// your code here
}

داخل هذا الكلاس نقوم بكل العمليات التي نريدها من جدول users في قاعدة البيانات, فمثلا لو أردنا اضافة مستخدم جديد, نقوم بإنشاء function أو تسمى (method) بإسم newUser:

1
2
3
4
5
6
7
8
9
10
11
    function newUser($name,$email) {
        $this->query("insert into users (name,email) values('%s','%s')",array(
            $name,$email
        ));
       
        if($this->sqlErrorNo() == 0) {
            return 1;
        }
       
        return 0;
    }

وفي الكونترولر؛ نقوم باستدعائها كالتالي:

1
2
3
4
5
    $users = new Users();
   
    if($users->newUser($name,$email)) {
        echo "a new user has been added";
    }

وفيما يلي قائمة بالدوال المتاحة للاستخدام في الموديلات:

1
2
3
4
5
6
7
configure ($host, $Dbname, $username, $password)// اذا كنت تريد تغيير أي من اعدادات قاعدة البيانات
query($sql, $params = array())
fetchAll()// تستخرج البيانات المطلوبة على شكل مصفوفة
fetch() // ترجع أول قيمة من البيانات
rowCount() // ترجع عدد الصفوف المطلوبة
sqlError() // ترجع نص الخطأ ان وجد
sqlErrorNo() // ترجع 0 اذا لم يوجد خطأ وإن وجد خطأ ترجع رقمه

أي اقتراحات بناءة للتطوير مرحب بها في التعليقات

بسم الله الرحمن الرحيم

بعد تحميل Easycode؛ أول شيء تحتاجه هو تعديل اعدادات اطار العمل بما يناسب مشروعك وذلك عن طريق ملف config.php الموجود في /includes/config.php, بعد فتح الملف سوف تجد ما يلي:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
$config = array(
    "test"=>"test",
    "db"=>array(
        "host"=>"localhost",
        "name"=>"hotspot",
        "user"=>"root",
        "pass"=>"",
        "port"=>"3306",
        ),
        "lang"=>array(
                "default"=>"en",
                "folder"=>"langs",
                "getString"=>"lang"
        ),
        "template"=>array(
                "siteTitle"=>"Hotspot - News Social Network",
                "folder"=>"templates",
                "layout"=>"layouts/layout",
        ),
        "cache"=>array(
                "cache"=>true,
                "maxLife"=> 760,//sec
        ),
        "actions"=>array(
                "mainController"=>"main",
                "mainAction"=>"index",
        ),
        // "smtp"=>array(
                // "host"=>"smtp.gmail.com",
                // "username"=>"",
                // "password"=>"",
                // "from"=>"",
        // ),

        "error404"=>"error",
);

اعدادات Easycode هي عبارة عن مصفوفة متعددة الأبعاد, تستطيع اضافة اعدادات اضافية كما تشاء فمثلاً لو أردت اضافة اعدادات “SMTP” الخاصة بالبريد الالكتروني -وهي اعدادات اضافية- فقط اقوم بوضع التالي في المصفوفة:

1
2
3
4
5
6
        "smtp"=>array(
                "host"=>"smtp.gmail.com",
                "username"=>"",
                "password"=>"",
                "from"=>"",
        ),

و عندها أستطيع استخدام هذه الاعدادات في الControllers والViews كالتالي:

1
2
3
4
 $this->config['smtp']['host'];
//or
 $this->config['smtp']['username'];
// etc...

شرح الاعدادات الأساسية:
1- اعدادات قاعدة بيانات mysql

1
2
3
4
5
6
7
"db"=>array(
        "host"=>"localhost",
        "name"=>"hotspot",
        "user"=>"root",
        "pass"=>"",
        "port"=>"3306",
        ),

2- اعدادات اللغة – اذا كنت تستخدم لغة واحدة يمكنك تركها كما هي

1
2
3
4
5
"lang"=>array(
                "default"=>"en",
                "folder"=>"langs",
                "getString"=>"lang"
        ),

deafult هو ملف اللغة الاساسية للموقع
folder هو مكان وجود مجلد اللغات
getString هو الquery string الخاص باللغة – مثل $_GET['lang']

3- اعدادات الشكل أو Views

1
2
3
4
5
        "template"=>array(
                "siteTitle"=>"Hotspot - News Social Network",
                "folder"=>"templates",
                "layout"=>"layouts/layout",
        ),

و في easycode كلمة template هي ما يحوي الviews لأننا لاحقا سوف نستخدم “layout” و “view” بدلا من view فقط.
siteTitle هي عنوان الموقع – يمكن تركها فارغة عند تعدد اللغات
folder هي مكان وجود مجلد الtemplates
layout هو مكان وجود ملف الlayout الرئيسي نسبة الى المجلد السابق

4- الكاش او cache
لتخزين ملفات الجافاسكربت والcss و غيرها على جهاز الزائر وعدم تحميلها في كل مرة

1
2
3
4
"cache"=>array(
                "cache"=>true,
                "maxLife"=> 760,//sec
        ),

5- الـ controller الرئيسي و الaction الأساسي

1
2
3
4
        "actions"=>array(
                "mainController"=>"main",
                "mainAction"=>"index",
        ),

6- صفحة خطأ 404
وهي اسم الcontroller الذي يتم التحويل اليه عند الدخول الى صفحة غير موجودة

1
"error404"=>"error",

أي اقتراحات بناءة للتطوير مرحب بها في التعليقات

التعليقات : 0

بسم الله الرحمن الرحيم

Controller جديد:

لإنشاء controller جديد؛ نقوم بإنشاء ملف جديد بالإسم الذي نريد داخل مجلد controllers وليكن Test.php والجدير ذكره هنا أن الحرف الأول يفضل أن يكون حرفاً كبيراً لأن اسم الملف هو نفس اسم الcontroller كما هو موضح:

1
2
3
4
class Controller_Test Extends ControllerBase
    {
// your code here
    }

لاحظ أن اسم الcontroller يجب أن يكون مبدوءاً بـ”Controller_” ومن ثم اسم الملف, ولاحظ أيضاً أنه extended من ControllerBase.

Actions :

اذا كنت لا تعرف ما هو الـ Action, فإنه اسم الfunction الذي تريد تنفيذه وهو يمثل صفحة كاملة.

كما تم توضيحه في شرح ملف config.php, فإننا بحاجة الى تعريف action رئيسي يتم استدعاءه تلقائياً اذا لم نستدعي اي action آخر, وكان اسمه index

1
2
3
4
5
6
7
8
9
    class Controller_Test Extends ControllerBase
    {

        function index()// use this as a default action
        {
 
        }
       
    }

حتى نستطيع مشاهدة هذه الصفحة؛ نقوم بكتابة الرابط التالي في شريط العنوان:
localhost/Test/ أو localhost/Test/index/

حيث تقوم باستبدال “localhost” بدمين موقعك و Test هو اسم الcontroller و index هو اسم الaction.

لو كان لدينا action آخر اسمه login؛ فإن الرابط سيكون كالتالي: localhost/Test/login/

الparameters التي يتم تمريرها عن طريق الرابط (URL)

لنفترض أن لدينا صفحة تعرض خبر معين ونريد تمرير الid الخاص بالخبر عن طريق الurl, كل ما علينا فعله هو اضافة /id بعد اسم الaction كالتالي:
localhost/News/show/1/
أي أن لدينا كونترولر بإسم News و أكشن بإسم show و نريد عرض الخبر صاحب id رقم 1

ونقوم بالتقاط هذا الparameter كالتالي:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    class Controller_News Extends ControllerBase
    {

        function index()// use this as a default action
        {
 
        }

        function show($id)
        {
 // use $id here
        }
       
    }

وان كان لدينا أكثر من parameter واحد فإننا نقوم بتمريرهم جميعاً للأكشن بالترتيب كالتالي:

1
2
3
4
        function action($p1,$p2,$p3)
        {
 // your code here
        }

أي اقتراحات بناءة للتطوير مرحب بها في التعليقات

التعليقات : 0

بسم الله الرحمن الرحيم

في ملف config.php يوجد اعدادات للtemplate او شكل الموقع, والtemplate هو أي شيء يكتب بلغة HTML, Javascript وا Css وكل أكشن يجب أن يحوي على view خاص به ليظهر للمستخدم ما تم معالجته بالأكشن:

config.php

1
2
3
4
5
        "template"=>array(
                "siteTitle"=>"Hotspot - News Social Network",
                "folder"=>"templates",
                "layout"=>"layouts/layout",
        ),

كما هو موضّح يوجد لدينا layout اساسي موجود في /templates/layouts/layout.php, وهذا المكان يمكن تغييره لاحقاً حسب الحاجة.

استخدام layout.php

نقوم بإنشاء ملف layout.php في المكان السابق ذكره, ونقوم بشكل أساسي كتابة التالي بداخله:

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title><?php echo $this->siteTitle; ?> - <?php echo $this->pageTitle; ?></title>
        <?php echo $header_for_layout; ?>
    </head>
    <body>
        <?php echo $content; ?>
    </body>
</html>

في المكان الذي نريد أن نُظهر به الview الخاص بالصفحة (المكان الذي يظهر به محتوى الصفحة المتغير) نقوم بكتابة

1
echo $content;

وفي داخل وسم “head” نقوم بكتابة:

1
echo $header_for_layout;

لأننا قد نحتاج استدعاء ملفات javascript او css في صفحة دون الأخرى وهذا السطر سوف يحل هذه المشكلة.

Views

الآن نقوم بالذهاب الى مجلد controllers ونقوم باختيار أي كونترولر نريد للعمل عليه, وليكن الأساسي main, في الأكشن index نريد أن ننفذ الview المسمى main_view.php و هو موجود في مجلد templates كل ما علينا هو كتابة التالي:

1
$this->template->setTemplate("main_view");

في الأكشن المطلوب:

1
2
3
4
5
6
7
8
9
10
11
12
    class Controller_Main Extends ControllerBase
    {

        function index()// use this as a default action
        {

            $this->template->setTemplate("main_view",array (

            ));
        }
       
    }

ولاحظ أننا اذا اردنا الوصول الى أي خاصية من خواص الtemplate من خلال الكونترولر فإننا نستخدم $this->template ومن ثم اسم الخاصية او الfunction.

فبالإمكان تغيير الlayout لهذا الأكشن عن طريق

1
$this->template->layout = "path/to/layout";

ولكن داخل الview فإن هذه الخواص والfunctions يشار اليها بـ $this فقط.

تمرير متغيرات الى الـviews

لو أردنا ارسال المتغير $name الى الview لاظهاره للمستخدم فما علينا سوى القيام بالتالي:

1
2
3
$data['name'] = "Salah Assi";
 
$this->template->setTemplate("main_view", $data);

لاحظ أن المتغيرات ترسل الى الviews على أنها مصفوفة.

وفي الجهة الأخرى (في main_view.php) نقوم باستخراجه كالتالي:

1
2
3
<div>
<?php echo $name; ?>
</div>

خصائص ودوال Template

1
2
3
4
5
6
7
8
9
10
11
12
13
folder; // المجلد الذي يحوي الviews والlayouts
layout; // المكان الموجود به الlayout
   
pageTitle; // عنوان الصفحة
siteTitle; // عنوان الموقع
   
description // وصف الصفحة او الموقع
keywords // الكلمات المفتاحية للصفحة أو الموقع

setTemplate($template, $array = array())  // لتحديد الview الخاص بالأكشن وتمرير المتغيرات له
setJs($url) // لتخصيص ملف جافاسكربت لصفحة معينة من داخل view
setCss($url) // لتخصيص ملف css لصفحة معينة من داخل view
writeInHead($str) // للكتابة داخل وسم "head" من داخل view

أي اقتراحات بناءة للتطوير مرحب بها في التعليقات

بسم الله الرحمن الرحيم

 

Easycode هو اطار عمل مجاني ومفتوح المصدر مبرمج بلغة PHP لتطوير وصنع مواقع الانترنت باستخدام تقنية MVC المشهورة والمصممة لتسهيل عملية التطوير بين الفرق البرمجية المختلفة و ترتيب كتابة الكود, صممت Easycode لتكون سريعة الأداء وصغيرة الحجم ومناسبة لكل المشاريع وسوف تكون متاحة قريباً على github.

تم تطوير Easycode من العدم على يد المطور “صلاح عاصي” الذي يعمل كمطور لصفحات الويب منذ بدايات عام 2009 وذلك تلبية لحاجات المطورين بالحصول على اطار عمل سهل وبسيط وسريع في لتطوير مشاريعهم.

 

 

mvc

لماذا Easycode؟

  • بساطة التعامل معها.
  • صغيرة الحجم.
  • تناسب جميع المشاريع, صغيرة-كبيرة.
  • سريعة الأداء.

تحميل EasyCode:

تحميل النسخة النهائية

 

بسم الله الرحمن الرحيم,

في هذه التدينة ان شاء الله سوف نتحدث عن الوصول الى الكاميرا الخاصة بجهازك الكومبيوتر و أخذ صورة فورية باستخدام html5.

اضغط هنا لترى مثال
ملاحظة:- هذا المثال يعمل 100% على متصفح كروم, وقد تجد به مشاكل على متصفحات أخرى وذلك لأن HTML5 لا تزال قيد التطوير.

في الماضي القريب كان الوصول الى الكاميرا الخاصة بالكمبيوتر مرتبط باستخدام أحد الاضافات للتطبيق مثل flash أو silverlight, لكن في الوقت الحاضر أصبح بالإمكان الوصول بسهولة الى الكاميرا والمايكروفون على حد سواء ولكن بعد طلب الاذن من المستخدم (للحفاظ على الأمان).

خاصية getUserMedia()

getUserMedia() هي الخاصية التي تمت اضافتها في html5 حتى تتيح لنا الوصول الى الكاميرا والمايكروفون عند المستخدم, ولأنها حديثة العهد فإنها قد لا تعمل على بعض المتصفحات القديمة نسبياً او متصفح الانترنت الخاص بمايكروسوفت وسوف نحتاج الى فحص ما اذا كان المتصفح الخاص بالمستخدم يحوي هذه الخاصية أم لا.

التأكد من أن المتصفح يدعم getUserMedia()

1
2
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;

الكود السابق يقوم بالتأكد من أن الخاصية موجودة على المتصفح مع الأخذ بعين الاعتبار نوع المتصفح المُستخدم.

بعد ذلك نقوم بفحص النتيجة اذا ما كانت false أو null أو ان بها قيمة أخرى (وهذا يعني دعم المتصفح لgetUserMedia):

1
2
3
4
5
if (navigator.getUserMedia) {
// your code here
} else {
  alert('getUserMedia() is not supported in your browser');
}

اذا كانت النتيجة هي عدم وجود الخاصية فإننا نقوم اخبار المستخدم بأن المتصفح الخاص به قديم.

الوصول الى الكاميرا

نقوم باستبدال التعليق بالكود السابق بالكود التالي:

1
2
3
4
5
  navigator.getUserMedia({audio: false, video: true}, function(stream) {
    // success!
  }, function() {
        alert('could not access your camera!');
  });

navigator.getUserMedia تأخذ 3 parameters:
الأول: الأجهزة التي نريد الوصول اليها, وهي في حالتنا الكاميرا ولا نحتاج للوصول الى المايكروفون.
الثاني: callback function يتم تنفيذه عند نجاح العملية, ويحوي على المعلومات القادمة من الكاميرا.
الثالث: هو أيضاً callbcak function يتم تنفيذه عند فشل الوصول الى الكاميرا, وأحياناً يحدث عند محاولة الوصول الى الكاميرا من متصفحين مختلفين في نفس الوقت.

مثال توضيحي

نقوم بكتابة الكود التالي:

1
2
3
4
<video autoplay >Sorry, your browser does not support "video" tag!. Please Download "Google Chrome"</video>
<img src=""/>
<canvas style="display:none;"> </canvas>
<div><button id="btn">Take a Snapshot</button></div>

حيث سيتم عرض الصور القادمة من الكاميرا عن طريق وسم video, وسوف نأخذ لقطة الصورة عن طريق وسم canvas و نعرضها من خلال img بعد الضغط على زر btn.

بعدها نقوم بفتح وسم script ونكتب به التالي:

1
2
3
4
5
6
7
8
9
10
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var img = document.querySelector('img');
var btn = document.getElementById('btn');
var ctx = canvas.getContext('2d');
var localMediaStream = false;

السطر الأول: لتعريف خاصية URL لنستخدمها في ما بعد.
السطر الثاني: التأكد من وجود خاصية getUserMedia.
السطر الثالث – السابع: تعريف متغيرات ترمز الى الوسوم للوصول اليها.
السطر الأخير: متغير ذو قيمة “false”, سوف يتم تغيير هذه القيمة الى “true” بمجرد نجاح عملية الوصول الى الكاميرا, وسوف نستفيد منها لاحقاً.

ثم نضيف الكود التالي:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: false, video: true}, function(stream) {
        //console.log(stream);
    video.src = window.URL.createObjectURL(stream);
    video.play();//for firefox
    localMediaStream = true;
   
  }, function() {
        alert('could not access your camera!');
  });

} else {
  alert('getUserMedia() is not supported in your browser');
}

و هو الكود الذي تم شرحه سابقاً مع اضافة ما نحتاج؛ داخل الدالة التي تفيد نجاح العملية, وهي كالتالي:
السطر الأول: يقوم بإنشاء رابط آني ويضعه في وسم الفيديو والذي بدوره يظهر الكاميرا على الشاشة.
السطر الثاني: يقوم بتشغيل الفيديو.
السطر الثالث: يقوم بتعيين true للمتغير localMediaStream الذي تحدثنا عنه سابقاً.

بعد ذلك سوف ننتظر حتى يتم تحميل الفيديو ووصول معلوماته الى المتصفح:

1
video.addEventListener("loadedmetadata", dimensionFunction, false);

dimensionFunction هو function يقوم بتعيين حجم صورة الكاميرا والصورة الملتقطة على حسب حجم الفيديو, وبه أيضاً نضع event التقاط الصورة عند الضغط على الزر:

1
2
3
4
5
6
7
8
function dimensionFunction () {
        canvas.width=video.videoWidth;
        canvas.height=video.videoHeight;
        img.height=video.videoHeight;
        img.width=video.videoWidth;
        //console.log(video.videoWidth,video.videoHeight);
        btn.addEventListener('click', snapshot, false);
}

عند الضغط على الزر btn, يتم تنفيذ الsnapshot, والتي تقوم برسم الصورة على الـcanvas ومن ثم عرضها في وسم img على انها صورة بامتداد png, طبعاً هذا بعد التأكد من أن الكاميرا تعمل عن طريق المتغير localMediaStream:

1
2
3
4
5
6
function snapshot() {
  if (localMediaStream) {
    ctx.drawImage(video, 0,0);
    img.src = canvas.toDataURL();
  }
}

اضغط هنا لترى مثال
ملاحظة:- هذا المثال يعمل 100% على متصفح كروم, وقد تجد به مشاكل على متصفحات أخرى وذلك لأن HTML5 لا تزال قيد التطوير.

ss2

الصفحة 1 of 512345