هذا المشروع عبارة عن أداة متكاملة لتسجيل الشاشة بجودة عالية بالإضافة إلى التقاط الصور الثابتة للشاشة. و يتميز بواجهة بسيطة و أدوات متقدمة للتصدير الفوري.
يمكنك استعمالها في تسجيل الشروحات، الألعاب، الاجتماعات، أو أي نشاط على الشاشة بجودة تصل إلى 4K، مع إمكانية تخصيص الصوت، الكاميرا، و المؤثرات البصرية.
مميزاتها
- تسجيل الشاشة الكاملة أو نافذة محددة أو تبويب المتصفح.
- جودة فيديو متعددة (1080p - 720p - 480p).
- تسجيل الصوت مع اختيار جهاز الميكروفون.
- تسجيل الكاميرا مع اختيار الكاميرا المطلوبة.
- دمج تسجيل الشاشة مع الكاميرا و الصوت.
- إيقاف مؤقت و استئناف التسجيل.
- عداد زمني للتسجيل.
- حفظ تلقائي للتسجيلات.
التقنيات المستخدمة
- HTML: لبناء الصفحة.
- CSS: لتنسيق محتوى الصفحة و إظهارها بشكل أفضل.
- JavaScript: لقراءة مدخلات المستخدم و توليد القوائم بناءاً على اختيارات المستخدم.
هيكلية المشروع
professional-screen-recorder/ ├── index.html # الصفحة الرئيسية ├── style.css # ملف التنسيقات ├── script.js # الكود الرئيسي ├── 📁 assets/ │ ├── 📁 icons/ # الأيقونات SVG │ │ ├── start.svg │ │ ├── stop.svg │ │ ├── pause.svg │ │ ├── camera.svg │ │ └── video.svg │ └── 📁 images/ # الصور المحفوظة ├── 📁 recordings/ # التسجيلات المؤقتة └── README.md # ملف التوثيق
متطلبات التشغيل
لمتصفح الذي سيتم تشغيل الأداة فيه يجب أن يكون يدعم Screen Capture API.
فيما يلي الإصدارات الأشهر للمتصفحات التي يمكن تجربة الأداة فيها:
- Edge 79 أو أي إصدار أحدث.
- Safari 13 أو أي إصدار أحدث.
- Firefox 66 أو أي إصدار أحدث.
- Chrome 72 أو أي إصدار أحدث.
طريقة التشغيل
- قم بتحميل المشروع.
- فك الضغط عنه.
- قم بوضع ملفات المشروع على خادم محلي (Local Server).
كيفية تشغيل المشروع على خادم محلي
أبسط حل يمكنك فعله لتشغيل المشروع على خادم محلي هو أن تشغله من خلال Live Server المتاح في برنامج VSCode.
- أي قم بفتح المشروع بواسطة برنامج VSCode.
- قم بتثبيت إضافة إسمها Live Server إن لم تكن مثبتة لديك مسبقاً.
- في النهاية قم بالنقر على زر Go Live لكي يشغل لك الأداة كصفحة ويب في المتصفح تماماً كما في الصورة التالية.
ملاحظة: الملف README.md المرفق في المشروع يتضمن شرح لكيفية تشغيل المشروع على أنواع أخرى من الخوادم.
