٪85 تخفیف

آموزش توسعه و سفارشی‌سازی Jitsi جلد اول

دسته‌بندی: برچسب: تاریخ به روز رسانی: 6 دی 1404 تعداد بازدید: 728 بازدید

دوره 100% عملی و کاربردی تدریس شده

پشتیبانی واتساپ

قیمت اصلی: ۲,۰۰۰,۰۰۰ تومان بود.قیمت فعلی: ۳۰۰,۰۰۰ تومان.

torobpay
هر قسط با ترب‌پی: ۷۵,۰۰۰ تومان
۴ قسط ماهانه. بدون سود، چک و ضامن.

دوره‌های آموزشی توسعه و سفارشی‌سازی Jitsi معمولاً برای افرادی طراحی می‌شود که می‌خواهند پلتفرم Jitsi را به‌طور کامل در پروژه‌های خود به کار ببرند، یا نیاز به تغییرات خاصی در کدهای آن دارند. در این دوره‌ها، بیشتر بر روی توسعه و سفارشی‌سازی ویژگی‌های Jitsi تمرکز می‌شود.

در اینجا یک لیست از سر فصل‌های معمول دوره آموزشی توسعه و سفارشی‌سازی Jitsi آورده شده است:

بخش 1. مقدمه‌ای بر Jitsi

 

فصل 1. معرفی Jitsi به‌عنوان یک پلتفرم ویدیویی متن‌باز
  • تاریخچه پروژه Jitsi و مالکیت فعلی (8×8 Inc.)

  • کاربردهای اصلی Jitsi در دنیای واقعی (آموزش آنلاین، جلسات سازمانی، پلتفرم‌های سفارشی)

  • تفاوت Jitsi با سایر سیستم‌های مشابه مانند Zoom، Google Meet، BigBlueButton

فصل 2. معماری کلی Jitsi
  • اجزای اصلی تشکیل‌دهنده Jitsi و نحوه ارتباط آن‌ها:

    • Jitsi Meet (رابط کاربری تحت وب)

    • Jitsi Videobridge (مدیریت جریان‌های ویدیویی)

    • Jicofo (کنترل‌کننده کنفرانس)

    • Prosody (سرور XMPP)

    • Jigasi (ترجمه صوتی به تلفن)

    • Jibri (ضبط و پخش زنده)

  • بررسی نحوه استفاده Jitsi از WebRTC
فصل 3. بررسی مدل‌های استقرار Jitsi
  • استقرار Local روی یک سرور لینوکسی ساده

  • استقرار در محیط ابری (VPS، AWS، DigitalOcean، Hetzner)

  • استفاده از Docker و Docker Compose برای استقرار سریع

  • معرفی بسته‌های Helm برای استقرار در Kubernetes

فصل 4. نصب اولیه Jitsi Meet (عملی)
  • پیش‌نیازهای سیستم: Ubuntu Server، NGINX، FQDN، SSL

  • نصب Jitsi Meet با استفاده از مخازن رسمی

  • تولید گواهی SSL با Let’s Encrypt
  • تست اولیه اتصال و برگزاری جلسه

فصل 5. بررسی پورت‌ها، فایروال و ارتباطات شبکه
  • پورت‌های مورد استفاده توسط اجزای Jitsi:

    • 80/443 (HTTPS)

    • 10000/UDP (ویدیو)

    • 5222،5280،5347 (XMPP)

  • تنظیم فایروال:

  • عیب‌یابی اتصال در صورت وجود NAT یا Proxy
فصل 6. کاربردهای رایج Jitsi در پروژه‌های مختلف
  • استفاده به‌عنوان زیرساخت ارتباط ویدیویی در وب‌سایت‌ها

  • تلفیق با سیستم‌های آموزش مجازی، CRM، Helpdesk

  • استفاده در سازمان‌ها به‌عنوان راه‌حل جایگزین بومی

فصل 7. بررسی امنیت پایه در Jitsi
  • ارتباطات رمزنگاری‌شده (TLS + DTLS-SRTP)

  • آشنایی با مفهوم E2EE در Jitsi

  • نیاز به پیاده‌سازی لایه‌های اضافی احراز هویت در نسخه‌های سازمانی

بخش 2. آشنایی با Jitsi Meet

 

فصل 1. معرفی Jitsi Meet
  • تعریف Jitsi Meet و تفاوت آن با Jitsi Videobridge و Jicofo

  • کاربردهای Jitsi Meet در پروژه‌های سازمانی و عمومی

  • معماری Jitsi Meet در مقایسه با دیگر پلتفرم‌ها (Zoom, Webex, BBB)

فصل 2. اجزای اصلی Jitsi Meet
  • بررسی سرویس‌های مرتبط:

    • Jitsi Videobridge

    • Jicofo (Jitsi Conference Focus)

    • Prosody (XMPP server)

    • nginx (یا Apache برای روت HTTP)

  • نحوه ارتباط اجزا با یکدیگر در جریان یک تماس تصویری

فصل 3. نصب و راه‌اندازی Jitsi Meet (به‌صورت بسته نصبی)
  • آماده‌سازی سرور (Debian/Ubuntu)

  • نصب Jitsi Meet با استفاده از Repository رسمی

  • تولید گواهی SSL با Let’s Encrypt
  • تست اجرای اولیه و راه‌اندازی موفق

فصل 4. پیکربندی اولیه Jitsi Meet
  • آشنایی با فایل‌های پیکربندی مهم:

    • /etc/jitsi/meet/<domain>-config.js

    • /etc/jitsi/jicofo/sip-communicator.properties

    • /etc/jitsi/videobridge/sip-communicator.properties

    • /etc/prosody/conf.avail/<domain>.cfg.lua

  • تنظیم دامنه، زبان رابط کاربری، رفتار ورود به جلسات و…

فصل 5. آشنایی با رابط کاربری Jitsi Meet
  • بررسی بخش‌های کلیدی رابط:

    • منوی کنترل پایین (قطع صدا، دوربین، اشتراک‌گذاری)

    • منوی تنظیمات کاربر

    • فهرست شرکت‌کنندگان و مدیریت آن‌ها

    • رابط چت داخلی

  • سفارشی‌سازی عنوان صفحه، لوگو و رنگ‌بندی از طریق CSS

فصل 6. استفاده از ویژگی‌های پایه در Jitsi Meet
  • ایجاد جلسه جدید و ارسال لینک دعوت

  • فعال‌سازی گزینه‌هایی مانند Lobby، Waiting Room و Password Protection

  • اشتراک‌گذاری صفحه (Screen Sharing)

  • ارسال پیام در چت و استفاده از ایموجی

فصل 7. مدیریت جلسات به عنوان Host
  • تنظیمات نقش‌ها (Moderator, Guest)

  • نحوه تعیین میزبان پیش‌فرض (JWT/Auth)

  • کنترل دسترسی به میکروفون و دوربین کاربران دیگر

فصل 8. بررسی امنیت اولیه جلسات
  • فعال/غیرفعال کردن رمز ورود جلسه

  • تنظیمات احراز هویت مبتنی بر Prosody

  • محدودسازی دسترسی میهمانان (guest domain vs auth domain)

فصل 9. زبان‌بندی و بومی‌سازی (Localization)
  • تنظیم زبان پیش‌فرض در interface_config.js

  • افزودن پشتیبانی از زبان فارسی یا دیگر زبان‌ها

  • ویرایش رشته‌های نمایشی در UI

فصل 10. کار با نسخه‌های موبایل و اپلیکیشن Jitsi Meet
  • مرور ویژگی‌های نسخه موبایل وب (Responsive)

  • معرفی اپلیکیشن رسمی Jitsi Meet برای iOS و Android

  • نحوه اتصال نسخه موبایل به سرور اختصاصی

بخش 3. سفارشی‌سازی رابط کاربری

 

فصل 1. ساختار رابط کاربری Jitsi Meet
  • آشنایی با معماری رابط کاربری Jitsi (مبتنی بر React)

  • معرفی دایرکتوری‌های اصلی UI:

    • react/features/ (ماژول‌های رابط کاربری)

    • interface_config.js (تنظیمات نمایشی اولیه)

    • config.js (تنظیمات عمومی)

    • images/, css/, lang/

فصل 2. تغییر ظاهر و رنگ‌بندی رابط کاربری
  • ویرایش فایل‌های CSS و SCSS

  • شخصی‌سازی رنگ‌ها، فونت‌ها و دکمه‌ها

فصل 3. تغییر لوگو، favicon و نام برنامه
  • جایگزینی فایل‌های لوگو:

    • مسیر: images/watermark.png, images/favicon.ico

  • تغییر Title صفحه و نام برند:

    • فایل: /usr/share/jitsi-meet/interface_config.js

    • متغیر: APP_NAME, BRAND_WATERMARK_LINK, SHOW_WATERMARK_FOR_GUESTS

فصل 4. سفارشی‌سازی صفحه خوش‌آمدگویی (Welcome Page)
  • فعال/غیرفعال کردن صفحه ورود پیش‌فرض

  • تغییر محتوای خوش‌آمدگویی (title, description, footer)

  • ویرایش فایل React: react/features/welcome/components/WelcomePage.web.js

فصل 5. غیرفعال کردن یا حذف ابزارهای خاص در UI
  • حذف دکمه‌های Record، Livestream، Share، Chat و…

  • تنظیمات مربوطه در interface_config.js

فصل 6. افزودن دکمه یا عملکرد جدید به نوار ابزار (Toolbar)
  • معرفی ساختار دکمه‌ها در Toolbar

  • توسعه یک دکمه جدید با React Component اختصاصی

  • استفاده از Redux برای مدیریت وضعیت

فصل 7. چندزبانه‌سازی و سفارشی‌سازی ترجمه‌ها
  • نحوه تغییر ترجمه‌ها در lang/

  • اضافه کردن زبان جدید و تنظیم آن به صورت پیش‌فرض

فصل 8. واکنش‌گرایی (Responsive) و Mobile Optimization
  • بررسی Breakpointهای پیش‌فرض

  • بهینه‌سازی UI برای صفحه‌نمایش‌های کوچک

  • غیرفعال‌سازی ویژگی‌هایی در موبایل برای سبک‌تر شدن

فصل 9. بارگذاری پویای تنظیمات ظاهر از فایل یا پایگاه‌داده
  • بارگذاری پویا (Dynamic) فایل config/interface_config در هنگام load

  • اعمال تنظیمات متناسب با برند یا شرکت خاص به‌صورت run-time

  • معرفی ساختار Jitsi-as-a-Service

فصل 10. ابزارها و روش‌های تست رابط کاربری
  • استفاده از Storybook برای تست Componentها

  • تست تعاملی UI با Cypress یا Puppeteer

  • تست ریسپانسیو با ابزارهای DevTools و ابزارهای خودکار

بخش 4. توسعه و سفارشی‌سازی ویژگی‌ها

 

فصل 1. سفارشی‌سازی ویژگی‌های پیش‌فرض Jitsi
  • تغییرات در ویژگی‌های اصلی Jitsi مانند اشتراک‌گذاری صفحه، صوت و ویدئو

  • تنظیمات پیش‌فرض برای مدیریت حجم صدا و کیفیت ویدیو

  • استفاده از فایل‌های پیکربندی برای تنظیمات پیشرفته

فصل 2. توسعه ویژگی‌های جدید با JavaScript و React
  • معرفی JavaScript و React در Jitsi Meet

  • روش‌های اضافه کردن کامپوننت‌های جدید به رابط کاربری

  • توسعه ویجت‌های جدید برای رابط کاربری (مثلاً ویجت‌های جدید برای چت، اشتراک‌گذاری صفحه و نظرسنجی‌ها)

  • کار با APIهای Jitsi برای دسترسی به رویدادها و عملکردهای خاص

فصل 3. پیاده‌سازی تنظیمات و افزونه‌های جدید
  • ایجاد افزونه‌ها و پلاگین‌های سفارشی برای Jitsi

  • پیاده‌سازی گزینه‌های جدید در تنظیمات پیشرفته

  • افزودن قابلیت‌های جدید به رابط کاربری برای تنظیمات بیشتر

فصل 4. افزونه‌ها و توسعه APIهای سفارشی
  • آشنایی با APIهای موجود در Jitsi و نحوه استفاده از آن‌ها

  • ایجاد و استفاده از APIهای سفارشی برای گسترش قابلیت‌ها

  • ارتباط با سرویس‌های ثالث از طریق APIهای RESTful و WebSockets

فصل 5. توسعه قابلیت‌های اشتراک‌گذاری صفحه (Screen Sharing)
  • توسعه ویژگی‌های پیشرفته اشتراک‌گذاری صفحه

  • تنظیمات مربوط به کیفیت اشتراک‌گذاری صفحه

  • کنترل و مدیریت اشتراک‌گذاری صفحه در جلسات

فصل 6. پشتیبانی از زبان‌های مختلف و بین‌المللی‌سازی
  • نحوه افزودن زبان‌های جدید به Jitsi

  • تنظیمات زبان پیش‌فرض و تعویض زبان در رابط کاربری

  • بین‌المللی‌سازی رابط کاربری با استفاده از فایل‌های زبان

  • توسعه ویژگی‌های ویژه برای کاربران مختلف در زبان‌های مختلف

فصل 7. افزودن سرویس‌های شخص ثالث (Third-party Integrations)
  • یکپارچه‌سازی Jitsi با سرویس‌هایی مانند Google Meet، Zoom و سایر پلتفرم‌ها

  • راهنمایی برای افزودن APIهای ارتباطی شخص ثالث به Jitsi

  • توسعه پلاگین‌هایی برای یکپارچه‌سازی با سرویس‌های جانبی

  • پیاده‌سازی سرویس‌های ذخیره‌سازی ابری مانند Dropbox برای اشتراک‌گذاری فایل‌ها در جلسات

فصل 8. پیکربندی و سفارشی‌سازی رابط کاربری
  • تغییرات در طراحی و ظاهر رابط کاربری با استفاده از CSS و HTML

  • کار با فایل‌های config.js و interface_config.js برای تغییرات در رابط

  • اضافه کردن دکمه‌ها و ویجت‌های سفارشی در نوار ابزار

  • سفارشی‌سازی صفحه خوش‌آمدگویی و صفحات پیش‌فرض دیگر

فصل 9. اضافه کردن ویژگی‌های نظرسنجی و تعاملات کاربران
  • توسعه سیستم نظرسنجی و سؤالات رای‌گیری در جلسات

  • افزودن گزینه‌های جدید برای تعاملات کاربران مانند تبادل پیام خصوصی

  • پیاده‌سازی گزینه‌هایی برای نظرسنجی در هنگام جلسات و پخش نتایج به‌صورت زنده

فصل 10. تست و عیب‌یابی ویژگی‌های توسعه‌یافته
  • استفاده از ابزارهای دیباگ برای بررسی مشکلات در ویژگی‌های جدید

  • شبیه‌سازی شرایط مختلف در جلسات برای تست ویژگی‌ها

  • روش‌های تست واحد (Unit Testing) برای قابلیت‌های جدید

[cdb_course_lessons title=”بخش 1. مقدمه‌ای بر Jitsi”][cdb_course_lesson title=”فصل 1. معرفی Jitsi به‌عنوان یک پلتفرم ویدیویی متن‌باز”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تاریخچه پروژه Jitsi و مالکیت فعلی (8×8 Inc.)” subtitle=”توضیحات کامل”]

معرفی اولیه

پروژه Jitsi در ابتدا به‌عنوان یک نرم‌افزار ساده برای ارتباطات صوتی و تصویری از طریق اینترنت آغاز شد. نام اولیه آن SIP Communicator بود و تمرکز اصلی آن روی پیاده‌سازی یک کلاینت برای پروتکل SIP (Session Initiation Protocol) بود. با پیشرفت پروژه و گسترش قابلیت‌ها، این نرم‌افزار به Jitsi تغییر نام داد و تبدیل به یکی از محبوب‌ترین پروژه‌های متن‌باز در زمینه کنفرانس ویدیویی شد.

آغاز پروژه توسط دانشگاه

Jitsi توسط Emil Ivov که در آن زمان دانشجوی دکترای دانشگاه استراسبورگ فرانسه بود، پایه‌گذاری شد. هدف او ارائه راهکاری انعطاف‌پذیر و قابل‌گسترش برای ارتباطات بلادرنگ مبتنی بر اینترنت بود. پروژه ابتدا در قالب یک تحقیق دانشگاهی شروع شد و به‌مرور به یک پروژه جدی در سطح جهانی تبدیل شد.

توسعه تحت مجوز متن‌باز

از همان ابتدا، Jitsi تحت مجوز Apache License 2.0 منتشر شد، که یکی از مجوزهای بسیار محبوب و باز است و امکان استفاده، تغییر و توزیع کد منبع را بدون محدودیت خاصی فراهم می‌کند. همین مجوز باعث شد توسعه‌دهندگان بسیاری از سراسر دنیا به پروژه بپیوندند و در توسعه آن نقش داشته باشند.

معرفی Jitsi Videobridge

در سال‌های بعد، Jitsi تمرکز خود را از یک کلاینت چندپروتکلی به یک پلتفرم کامل کنفرانس ویدیویی تغییر داد. یکی از تحولات مهم در این مسیر، معرفی Jitsi Videobridge بود؛ یک MCU (Multipoint Control Unit) سبک و کارآمد که به جای ترکیب ویدیوها، آن‌ها را به صورت جداگانه بین کاربران پخش می‌کرد (SFU یا Selective Forwarding Unit). این رویکرد منجر به کاهش شدید مصرف منابع سرور و بهبود کیفیت تماس شد.

مالکیت فعلی پروژه: شرکت 8×8 Inc.

در سال ۲۰۱۸، شرکت آمریکایی 8×8 Inc. که ارائه‌دهنده راهکارهای ارتباطی سازمانی در فضای ابری است، پروژه Jitsi را خریداری کرد. این شرکت تیم اصلی توسعه Jitsi را نیز جذب کرد تا به توسعه و نگهداری این پروژه ادامه دهند. با وجود این انتقال، Jitsi همچنان به‌صورت متن‌باز باقی ماند و جامعه متن‌باز امکان استفاده و مشارکت در توسعه آن را حفظ کرد.

نقش 8×8 Inc. در توسعه Jitsi

شرکت 8×8 Inc. ضمن حفظ ماهیت متن‌باز Jitsi، سرمایه‌گذاری قابل‌توجهی برای بهبود عملکرد، امنیت و مقیاس‌پذیری این پلتفرم انجام داد. همچنین سرویس Jitsi Meet به‌عنوان نسخه‌ی عمومی و قابل استفاده در مرورگر نیز با قدرت بیشتری توسعه داده شد. در کنار آن، شرکت 8×8 از Jitsi به‌عنوان زیرساخت اصلی پلتفرم‌های کنفرانس ویدیویی تجاری خود نیز استفاده می‌کند.

جمع‌بندی

پروژه Jitsi مسیر رشد چشم‌گیری از یک نرم‌افزار دانشگاهی تا تبدیل‌شدن به زیرساخت اصلی کنفرانس‌های ویدیویی در سطح سازمانی طی کرده است. انتقال مالکیت به شرکت 8×8 Inc. نه‌تنها باعث توقف توسعه آن نشد، بلکه به رشد پایدار و قابل‌اعتماد این پروژه کمک کرد. با وجود مالکیت تجاری، Jitsi همچنان به‌صورت یک پروژه متن‌باز با جامعه‌ای فعال و پویا ادامه دارد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”کاربردهای اصلی Jitsi در دنیای واقعی (آموزش آنلاین، جلسات سازمانی، پلتفرم‌های سفارشی)” subtitle=”توضیحات کامل”]

آموزش آنلاین

یکی از مهم‌ترین کاربردهای Jitsi در سال‌های اخیر، استفاده در آموزش آنلاین بوده است. به دلیل متن‌باز بودن، عدم نیاز به نصب نرم‌افزار، و پشتیبانی کامل از مرورگرهای مدرن، بسیاری از مدارس، دانشگاه‌ها و موسسات آموزشی به سمت استفاده از Jitsi به‌عنوان پلتفرم کلاس مجازی حرکت کرده‌اند.

مزایای استفاده در آموزش:

  • بدون نیاز به ساخت حساب کاربری یا ثبت‌نام
  • قابلیت اشتراک‌گذاری صفحه نمایش، فایل، و وایت‌برد آنلاین
  • امکان ضبط کلاس‌ها روی سرور یا از طریق استریم به YouTube
  • دسترسی آسان برای دانش‌آموزان و معلمان در هر سیستم‌عامل

علاوه‌ بر این، برخی از پلتفرم‌های آموزشی با استفاده از API و کتابخانه‌های Jitsi، رابط‌های سفارشی‌سازی‌شده برای کلاس‌های درس مجازی توسعه داده‌اند که به‌صورت کامل با نیازهای آموزشی منطبق هستند.

جلسات سازمانی و تجاری

Jitsi در محیط‌های سازمانی و تجاری نیز کاربرد گسترده‌ای پیدا کرده است. بسیاری از شرکت‌ها که نگران مسائل امنیتی و حریم خصوصی هستند، ترجیح می‌دهند از نسخه‌ی اختصاصی و نصب‌شده Jitsi روی زیرساخت داخلی (On-Premise) خود استفاده کنند.

دلایل محبوبیت Jitsi در سازمان‌ها:

  • قابلیت استقرار کامل روی سرورهای داخلی سازمان
  • رمزنگاری ارتباطات و کنترل کامل روی داده‌ها
  • امکان یکپارچه‌سازی با LDAP، Active Directory و سیستم‌های مدیریت کاربران سازمانی
  • ادغام با ابزارهایی مانند Slack، Mattermost یا Microsoft Teams به‌صورت مکمل یا جایگزین

در نتیجه، شرکت‌هایی با سیاست‌های سخت‌گیرانه‌ی امنیتی، می‌توانند از Jitsi به‌عنوان جایگزینی مناسب برای سرویس‌هایی مانند Zoom یا Google Meet استفاده کنند.

پلتفرم‌های سفارشی و پروژه‌های متن‌باز

متن‌باز بودن Jitsi این امکان را فراهم کرده است که توسعه‌دهندگان بتوانند از آن به‌عنوان هسته‌ی یک پلتفرم سفارشی برای ساخت اپلیکیشن‌های ارتباطی خاص استفاده کنند. بسیاری از استارتاپ‌ها، شرکت‌های فناوری، و حتی پروژه‌های دولتی در سراسر دنیا، با استفاده از Jitsi یک سرویس اختصاصی طراحی کرده‌اند.

نمونه‌هایی از استفاده سفارشی‌شده:

  • اپلیکیشن‌های مشاوره و درمان آنلاین با ویدیو (Telemedicine)
  • پلتفرم‌های پشتیبانی آنلاین مشتریان با تماس تصویری
  • سیستم‌های ملاقات آنلاین در سازمان‌های دولتی و قضایی
  • جلسات کاری در محیط‌های ایزوله و شبکه‌های بسته (مثل صنایع دفاعی یا انرژی)

برای این منظور، Jitsi امکان سفارشی‌سازی در سطح ظاهر گرافیکی (UI)، احراز هویت، تنظیمات شبکه، رمزنگاری، و حتی مدل اقتصادی پرداخت یا عضویت را فراهم می‌کند. ابزارهایی مانند lib-jitsi-meet و Jitsi API باعث شده‌اند که ادغام Jitsi در هر سیستم دیگر به‌راحتی انجام شود.

جمع‌بندی

Jitsi به دلیل انعطاف‌پذیری، متن‌باز بودن، و عدم نیاز به سرویس‌دهنده مرکزی، به یکی از قدرتمندترین راهکارهای ارتباط ویدئویی در دنیای واقعی تبدیل شده است. از آموزش آنلاین گرفته تا جلسات محرمانه سازمانی و پلتفرم‌های کاملاً سفارشی، Jitsi توانسته در بسیاری از حوزه‌ها به‌عنوان جایگزینی پایدار و امن مورد استفاده قرار گیرد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تفاوت Jitsi با سایر سیستم‌های مشابه مانند Zoom، Google Meet، BigBlueButton” subtitle=”توضیحات کامل”]

مدل استقرار (Self-hosted vs. Cloud)
  • Jitsi: امکان استقرار کامل روی سرورهای اختصاصی بدون نیاز به سرویس ابری، مناسب برای سازمان‌هایی که کنترل کامل روی داده‌ها را می‌خواهند.
  • Zoom / Google Meet: کاملاً ابری و کنترل‌شده توسط شرکت‌های مرکزی. امکان Self-host وجود ندارد.
  • BigBlueButton: نیاز به استقرار روی سرور اختصاصی دارد ولی تنظیمات پیچیده‌تر و منابع بیشتری نیاز دارد.
ساختار متن‌باز
  • Jitsi: کاملاً متن‌باز با مجوز Apache License 2.0، قابل استفاده برای پروژه‌های تجاری و سفارشی‌سازی گسترده.
  • Zoom / Google Meet: کاملاً بسته و تجاری.
  • BigBlueButton: متن‌باز با تمرکز خاص بر آموزش آنلاین، اما با ساختار پیچیده‌تر در توسعه و پشتیبانی.
انعطاف‌پذیری در توسعه
  • Jitsi: پشتیبانی از APIهای متعدد، رابط جاوااسکریپت (lib-jitsi-meet)، پشتیبانی از WebRTC، امکان سفارشی‌سازی UI و معماری.
  • Zoom: ارائه SDK محدود برای برخی زبان‌ها، با محدودیت‌های زیاد در تغییر رفتار سیستم.
  • Google Meet: فاقد SDK یا APIهای باز برای توسعه سفارشی.
  • BigBlueButton: امکان توسعه دارد ولی پیچیدگی بالاتر نسبت به Jitsi دارد.
ویژگی‌های امنیتی
  • Jitsi: رمزنگاری ارتباطات، امکان افزودن رمزعبور، استفاده از JWT برای احراز هویت پیشرفته، و قابل اجرا در شبکه‌های خصوصی.
  • Zoom: رمزنگاری سراسری (در نسخه‌های پولی)، اما گزارش‌هایی از مسائل امنیتی در گذشته داشته.
  • Google Meet: رمزنگاری داخلی ولی بدون کنترل مستقیم کاربر بر سرورها.
  • BigBlueButton: رمزنگاری دارد ولی تمرکز اصلی بر تعامل آموزشی است تا امنیت شبکه‌ای.
منابع سخت‌افزاری و مصرف پهنای باند
  • Jitsi: بهینه برای نصب در محیط‌های کوچک تا متوسط، با امکان مقیاس‌پذیری با JVB چندگانه.
  • Zoom / Google Meet: نیاز به استفاده از سرورهای ابری اختصاصی شرکت‌های ارائه‌دهنده.
  • BigBlueButton: مصرف منابع بسیار بالا، مخصوصاً در کلاس‌های با تعداد بالا، و نیازمند زیرساخت پیچیده.
ویژگی‌های آموزشی و مدیریتی
  • Jitsi: مناسب برای جلسات عمومی، اداری، و ارتباطات روزمره؛ فاقد ویژگی‌های خاص آموزشی مثل مدیریت نمره و تکلیف.
  • BigBlueButton: قابلیت‌های آموزشی پیش‌فرض مانند ریزنمرات، سیستم آزمون، وایت‌برد اشتراکی و سیستم نمره‌دهی.
  • Zoom / Google Meet: ویژگی‌های آموزشی محدود، بیشتر در نسخه‌های پولی و ادغام‌شده با پلتفرم‌های آموزشی سوم.
هزینه استفاده و مدل اقتصادی
  • Jitsi: کاملاً رایگان و بدون نیاز به پرداخت در حالت Self-host.
  • Zoom: نسخه رایگان محدود، نسخه‌های حرفه‌ای با پرداخت ماهانه.
  • Google Meet: رایگان برای استفاده محدود با حساب Google، ویژگی‌های حرفه‌ای با Google Workspace.
  • BigBlueButton: رایگان ولی برای استفاده در سطح حرفه‌ای نیاز به سرور قدرتمند و تیم فنی برای نگهداری دارد.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 2. معماری کلی Jitsi”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Jitsi Meet (رابط کاربری تحت وب)” subtitle=”توضیحات کامل”]Jitsi Meet رابط گرافیکی مبتنی بر وب Jitsi است که به کاربر اجازه می‌دهد بدون نیاز به نصب نرم‌افزار، وارد جلسات ویدیویی شود. این بخش مستقیماً روی مرورگر اجرا می‌شود و با استفاده از WebRTC، ارتباط بلادرنگ را برقرار می‌سازد.

ویژگی‌های اصلی Jitsi Meet:
  • مبتنی بر React و JavaScript
  • پشتیبانی از WebRTC برای ارتباط مستقیم Peer-to-Peer یا از طریق Bridge
  • پشتیبانی از قابلیت‌هایی مانند:
    • اشتراک‌گذاری صفحه
    • چت متنی درون جلسه
    • تغییر پس‌زمینه مجازی
    • تنظیم کیفیت تصویر
    • کنترل میکروفن و دوربین
    • سیستم مدیریت دسترسی (Moderator/Guest)
نحوه ارتباط با سایر اجزا:
  • از طریق WebSocket یا XMPP به Jicofo (Jitsi Conference Focus) متصل می‌شود.
  • رسانه‌ها (صوت و تصویر) از طریق Jitsi Videobridge (JVB) منتقل می‌شوند.
  • احراز هویت کاربران در صورت نیاز از طریق سرور Prosody انجام می‌شود.
  • ارتباط بین مرورگر و Jitsi Meet مستقیماً از طریق HTTPS و WebRTC برقرار می‌شود و نیازی به نصب کلاینت نیست.
ساختار فایل و مسیر پروژه:

اگر قصد نصب و شخصی‌سازی Jitsi Meet را دارید، فایل‌ها معمولاً در مسیر زیر قرار دارند:

/usr/share/jitsi-meet/

برای توسعه یا ویرایش رابط کاربری، از نسخه سورس Jitsi Meet در GitHub استفاده می‌شود:

git clone https://github.com/jitsi/jitsi-meet.git
cd jitsi-meet
تنظیمات محیط توسعه:

برای راه‌اندازی محیط توسعه رابط Jitsi Meet:

npm install
make

برای اجرای سرور توسعه:

make dev

این محیط، یک نسخه لوکال از Jitsi Meet را با Hot Reload و قابلیت ویرایش سریع اجرا می‌کند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Jitsi Videobridge (مدیریت جریان‌های ویدیویی)” subtitle=”توضیحات کامل”]Jitsi Videobridge یا به اختصار JVB، هسته‌ی اصلی مدیریت و انتقال جریان‌های ویدیویی در معماری Jitsi است. برخلاف سایر سیستم‌ها که ویدیوها را ترنس‌کد (transcode) می‌کنند، JVB فقط رسانه‌ها را به‌صورت Selective Forwarding Unit (SFU) هدایت می‌کند؛ این یعنی مصرف منابع بسیار کمتر و تأخیر بسیار پایین‌تر.

وظیفه اصلی:
  • هدایت مستقیم رسانه‌ها (صوت و تصویر) بین کلاینت‌ها
  • بدون ترنس‌کد کردن داده‌ها (برخلاف MCUها)
  • پشتیبانی از simulcast برای بهینه‌سازی پهنای باند
  • پشتیبانی از adaptive streaming بر اساس وضعیت شبکه کاربران
نحوه عملکرد:
  • هر کاربر جریان رسانه‌ای خودش را به JVB ارسال می‌کند.
  • JVB این جریان را بر اساس نیاز و وضعیت سایر کاربران به آن‌ها منتقل می‌کند.
  • تنها یک جریان از هر نوع (ویدیو/صدا) برای هر کاربر ارسال می‌شود، که باعث کاهش مصرف پهنای باند در سمت کلاینت می‌شود.
  • در صورت استفاده از simulcast، JVB نسخه‌های مختلف کیفیت را نگه می‌دارد و بسته به شرایط، کیفیت مناسب را ارسال می‌کند.
ارتباط با اجزای دیگر:
  • با Jicofo برای مدیریت session و signaling هماهنگ می‌شود.
  • از طریق XMPP یا Colibri protocol با Jicofo و Prosody تبادل پیام می‌کند.
  • رسانه‌ها را از مرورگر یا کلاینت از طریق WebRTC دریافت و مجدداً برای سایر کاربران ارسال می‌کند.
مسیر فایل‌ها (در سیستم‌عامل Debian/Ubuntu):
/etc/jitsi/videobridge/

فایل‌های اصلی پیکربندی شامل:

sip-communicator.properties
logging.properties
مثال تنظیمات sip-communicator.properties:
org.jitsi.videobridge.ENABLE_STATISTICS=true
org.jitsi.videobridge.STATISTICS_TRANSPORT=muc
org.jitsi.videobridge.DISABLE_TCP_HARVESTER=true
org.ice4j.ice.harvest.DISABLE_AWS_HARVESTER=true
org.ice4j.ice.harvest.STUN_MAPPING_HARVESTER_ADDRESSES=stun:stun.l.google.com:19302
بررسی سرویس JVB در سیستم:
systemctl status jitsi-videobridge2
ریستارت سرویس پس از ویرایش تنظیمات:
systemctl restart jitsi-videobridge2
نکات مهم:
  • JVB روی پورت‌های UDP 10000 و TCP 4443 (در حالت fallback) فعالیت می‌کند.
  • تنظیمات فایروال برای این پورت‌ها باید باز باشد.
  • در سیستم‌هایی با NAT یا پشت فایروال، استفاده از STUN/TURN پیشنهاد می‌شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Jicofo (کنترل‌کننده کنفرانس)” subtitle=”توضیحات کامل”]Jicofo مخفف Jitsi Conference Focus است و یکی از اجزای کلیدی در ساختار Jitsi محسوب می‌شود که نقش “مدیر هماهنگ‌کننده” را ایفا می‌کند. در واقع Jicofo مغز پشت پرده‌ی راه‌اندازی و مدیریت جلسات است.

وظیفه اصلی:
  • مدیریت signaling بین کاربران و سرور
  • تخصیص منابع در Jitsi Videobridge
  • هندل کردن فرآیندهای join و leave کاربران
  • هماهنگی با سیستم احراز هویت (authentication)
  • انتخاب bridge مناسب در صورت وجود چند Videobridge (multi-bridge environment)
  • هماهنگی با پلتفرم‌های SIP (در صورت فعال بودن Jigasi)
نحوه عملکرد:
  • پس از اتصال کاربر به Jitsi Meet (توسط مرورگر یا کلاینت)، مرورگر از طریق XMPP به Prosody متصل می‌شود.
  • Prosody درخواست ایجاد جلسه را به Jicofo ارسال می‌کند.
  • Jicofo بررسی می‌کند که آیا جلسه‌ای موجود است یا نه، و در صورت نیاز یک جلسه جدید راه‌اندازی می‌کند.
  • سپس Jicofo با Videobridge هماهنگ می‌کند تا جریان رسانه‌ای مدیریت شود.
  • Jicofo همچنین مسئول اجرای policyها (مثلاً تعیین host جلسه، mute کردن همه و…) است.
ارتباط با اجزای دیگر:
  • Prosody: برای signaling از طریق XMPP
  • Jitsi Videobridge: برای تخصیص و مدیریت منابع رسانه‌ای
  • Jitsi Meet: از طریق signaling اولیه
  • Jigasi / Jibri (در صورت فعال بودن): برای تماس‌های SIP و ضبط جلسات
مسیر فایل‌های پیکربندی در سیستم‌های Debian/Ubuntu:
/etc/jitsi/jicofo/

فایل‌های مهم:

sip-communicator.properties
config
نمونه پیکربندی sip-communicator.properties:
org.jitsi.jicofo.auth.URL=XMPP:meet.example.com
org.jitsi.jicofo.BRIDGE_SELECTION_STRATEGY=SplitBridgeSelectionStrategy
org.jitsi.jicofo.ALWAYS_TRUST_MODE_ENABLED=true
بررسی وضعیت سرویس:
systemctl status jicofo
ریستارت سرویس پس از اعمال تغییرات:
systemctl restart jicofo
نکات مهم:
  • در محیط‌هایی با نیاز به احراز هویت، Jicofo با تنظیمات XMPP برای کنترل دسترسی کاربران هماهنگ می‌شود.
  • بدون Jicofo، هیچ جلسه‌ای در Jitsi Meet ایجاد نمی‌شود.
  • در صورتی که چند Videobridge داشته باشید، Jicofo نقش تعیین‌کننده در توزیع کاربران بین bridgeها را بر عهده دارد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Prosody (سرور XMPP)” subtitle=”توضیحات کامل”]Prosody یک سرور سبک و ماژولار برای پروتکل XMPP است که در پروژه Jitsi به‌عنوان هسته ارتباطی برای signaling بین کلاینت‌ها، Jicofo و سایر اجزا عمل می‌کند. این بخش به‌نوعی “زبان مشترک” اجزای Jitsi برای هماهنگی و برقراری ارتباط است.

وظایف اصلی:
  • ایجاد و مدیریت ارتباطات XMPP بین کاربران، Jicofo، Jibri، Jigasi و سایر سرویس‌ها
  • مدیریت نشست‌ها و پیام‌های signaling مثل join، leave، mute، kick و …
  • پشتیبانی از احراز هویت کاربران (LDAP، JWT، کاربران محلی و …)
  • پشتیبانی از ماژول‌های مختلف برای گسترش عملکرد (مثلاً ماژول‌های مربوط به JWT یا BOSH)
  • فراهم کردن پایه‌ای برای تعاملات real-time قبل از انتقال رسانه به Videobridge
نحوه عملکرد:
  • کاربران (مرورگر یا کلاینت موبایل) پس از ورود به رابط Jitsi Meet، ابتدا به Prosody متصل می‌شوند (از طریق BOSH یا WebSocket).
  • Prosody با دریافت signaling از کلاینت‌ها، آن را به Jicofo ارسال می‌کند.
  • Jicofo نیز با Prosody تعامل دارد تا نشست‌ها را ایجاد یا مدیریت کند.
  • سایر اجزای Jitsi مثل Jibri و Jigasi نیز از طریق Prosody به سیستم متصل می‌شوند.
مسیر فایل‌های پیکربندی در سیستم‌های Debian/Ubuntu:
/etc/prosody/

مهم‌ترین فایل پیکربندی:

/etc/prosody/prosody.cfg.lua

و برای دامین شما (مثلاً meet.example.com):

/etc/prosody/conf.avail/meet.example.com.cfg.lua
نمونه پیکربندی اولیه در فایل دامنه:
VirtualHost "meet.example.com"
    authentication = "internal_plain"

Component "conference.meet.example.com" "muc"
    storage = "memory"

Component "auth.meet.example.com" "authentication"
    admins = { "focus@auth.meet.example.com" }

Component "jitsi-videobridge.meet.example.com"
    component_secret = "your_bridge_secret"
بررسی وضعیت سرویس:
systemctl status prosody
ریستارت سرویس پس از اعمال تغییرات:
systemctl restart prosody
نکات مهم:
  • Prosody پیش‌نیاز اصلی کارکرد Jicofo و Jitsi Videobridge است.
  • اگر Prosody درست کار نکند، کاربران نمی‌توانند جلسه‌ای را شروع یا به آن متصل شوند.
  • ماژول‌های زیادی برای Prosody وجود دارد که می‌توان برای مواردی مثل محدود کردن دسترسی، فعال‌سازی JWT، استفاده از LDAP و… از آن‌ها بهره برد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Jigasi (اتصال SIP و ترجمه صوتی به شبکه تلفن)” subtitle=”توضیحات کامل”]Jigasi یک پل نرم‌افزاری مبتنی بر Java برای اتصال بین دنیای SIP (پروتکل Session Initiation Protocol) و سیستم Jitsi است. این ماژول امکان اتصال تماس‌های تلفنی (PSTN یا VoIP) به جلسات Jitsi Meet را فراهم می‌کند. همچنین، برای استفاده از قابلیت تبدیل گفتار به متن (speech-to-text) هم قابل پیکربندی است.

کاربردهای اصلی:
  • اتصال تماس‌های تلفنی (از طریق شماره‌گیری) به کنفرانس Jitsi
  • شماره‌گیری از درون جلسه Jitsi به یک شماره تلفن خاص
  • استفاده به‌عنوان درگاه ترجمه صوتی با اتصال به موتورهای speech recognition مثل Google Speech API یا DeepSpeech
  • کاربرد در سازمان‌ها برای برقراری ارتباط با کاربران غیر آنلاین یا کاربرانی که دسترسی به اینترنت ندارند
نحوه عملکرد:
  • Jigasi به‌صورت یک کلاینت SIP به یک سرور SIP ثبت (Register) می‌شود.
  • از طریق Prosody، به کنفرانس‌های Jitsi متصل شده و تعامل می‌کند.
  • تماس صوتی تلفنی به‌صورت یک جریان صوتی RTP وارد Jitsi Videobridge می‌شود.
  • با اضافه شدن تماس تلفنی، یک کاربر جدید با نماد “تلفن” در جلسه ظاهر می‌شود.
مسیر نصب و پیکربندی در Debian/Ubuntu:

فایل تنظیمات اصلی:

/etc/jitsi/jigasi/sip-communicator.properties
نمونه پیکربندی برای اتصال SIP:
org.jitsi.jigasi.SIP_URI=your-user@sip.provider.com
org.jitsi.jigasi.SIP_PASSWORD=your-password
org.jitsi.jigasi.SIP_SERVER=sip.provider.com
org.jitsi.jigasi.PARENT_PROXY=proxy.sip.provider.com
org.jitsi.jigasi.BREWERY_ENABLED=true
org.jitsi.jigasi.BREWERY_ROOM=jigasi@conference.meet.example.com
org.jitsi.jigasi.XMPP_USER_ID=jigasi
org.jitsi.jigasi.XMPP_PASSWORD=jigasipass
org.jitsi.jigasi.MUC_COMPONENT_DOMAIN=conference.meet.example.com
فعال‌سازی speech-to-text (اختیاری):

برای استفاده از قابلیت تشخیص گفتار، پارامترهای زیر به فایل sip-communicator.properties اضافه می‌شوند:

org.jitsi.jigasi.ENABLE_SPEECH_TO_TEXT=true
org.jitsi.jigasi.transcription.DIRECTORY=/tmp/transcripts
org.jitsi.jigasi.transcription.ENABLE_JSON=true
org.jitsi.jigasi.transcription.USE_GOOGLE_SPEECH_API=true
بررسی وضعیت و راه‌اندازی مجدد سرویس:
systemctl status jigasi
systemctl restart jigasi
نکات مهم:
  • استفاده از Jigasi نیازمند داشتن یک سرور SIP یا سرویس VoIP است.
  • برای ترجمه صوتی، باید به API مناسب متصل شوید که ممکن است نیازمند کلید و پرداخت هزینه باشد.
  • محدودیت‌های صوتی و شبکه در هنگام تماس VoIP باید لحاظ شوند (مانند NAT traversal و کدک‌ها).

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Jibri (ضبط و پخش زنده جلسات)” subtitle=”توضیحات کامل”]Jibri یک ماژول مهم در اکوسیستم Jitsi است که وظیفه ضبط و پخش زنده جلسات Jitsi Meet را بر عهده دارد. این سرویس به‌ویژه برای جلساتی که نیاز به ضبط و ذخیره‌سازی محتوا یا پخش مستقیم دارند، کاربردی است. Jibri از طریق شبیه‌سازی یک کاربر در جلسات Jitsi Meet، قادر به ضبط و پخش زنده محتوای صوتی و ویدیویی جلسات است.

کاربردهای اصلی:
  • ضبط جلسات برای استفاده‌های بعدی یا آرشیو
  • پخش زنده (Live Streaming) جلسات به پلتفرم‌هایی مانند YouTube یا Facebook
  • استفاده از Jibri برای ضبط کلاس‌های آنلاین یا وبینارها
  • انجام تحلیل‌های بعدی بر روی جلسات ضبط‌شده (برای مثال، استخراج داده‌های ویدیویی و صوتی)
نحوه عملکرد:
  • Jibri یک دستگاه مجازی است که به‌عنوان یک شرکت‌کننده در جلسه Jitsi ثبت می‌شود.
  • وقتی که کاربر دستور ضبط یا پخش زنده را می‌دهد، Jibri به جلسه وارد شده و شروع به ضبط یا ارسال محتوای جلسه به مقصد مشخص می‌کند.
  • برای ضبط، Jibri از FFmpeg استفاده می‌کند و برای پخش زنده از RTMP (Real-Time Messaging Protocol) بهره می‌برد.
اجزای مورد نیاز:
  1. XMPP Server (Prosody): برای هماهنگی جلسات و ارتباط با Jitsi Meet.
  2. FFmpeg: برای انجام عملیات ضبط و تبدیل ویدیو.
  3. OpenJDK: برای اجرای برنامه Jibri.
  4. Nginx یا HTTP Server: برای ارسال داده‌های ضبط‌شده به سیستم‌های پخش زنده.
نصب و پیکربندی Jibri در Debian/Ubuntu:
  1. نصب Jibri:
sudo apt update
sudo apt install jibri
  1. پیکربندی Jibri (فایل تنظیمات):

فایل تنظیمات اصلی Jibri:

/etc/jitsi/jibri/jibri.conf
  1. پیکربندی جزییات RTMP برای پخش زنده (در فایل jibri.conf):
# RTMP settings
jibri.recorder.streams=streaming.example.com
jibri.recorder.stream_key=your_stream_key
jibri.recorder.url=https://www.youtube.com/live_streaming_url
  1. ضبط جلسه (به‌طور خودکار یا دستی):

برای ضبط یک جلسه به‌صورت دستی، باید از طریق رابط کاربری Jitsi گزینه “Record” را انتخاب کنید. این گزینه برای مدیر جلسه نمایش داده خواهد شد.

برای ضبط به‌طور خودکار، می‌توانید در فایل تنظیمات Prosody مشخص کنید که چه کاربرانی اجازه ضبط دارند.

  1. فعال‌سازی پخش زنده:

پس از پیکربندی، می‌توانید گزینه پخش زنده را فعال کنید. به‌طور پیش‌فرض، Jibri از پلتفرم‌های RTMP پشتیبانی می‌کند که شامل YouTube، Facebook و دیگر پلتفرم‌ها است.

jibri.streaming.enabled=true
بررسی وضعیت و راه‌اندازی مجدد سرویس:

برای بررسی وضعیت یا راه‌اندازی مجدد سرویس Jibri، از دستورات زیر استفاده می‌کنید:

systemctl status jibri
systemctl restart jibri
نکات مهم:
  • منابع سیستم: ضبط و پخش زنده ممکن است منابع زیادی از سرور مصرف کند، بنابراین باید سیستم‌هایی با منابع پردازشی بالا را برای این منظور انتخاب کنید.
  • پشتیبانی از کدک‌ها: Jibri از کدک‌های خاص برای ضبط و پخش ویدیو استفاده می‌کند، بنابراین ممکن است برای استفاده از پخش زنده، نیاز به پیکربندی دقیق‌تر برای سازگاری با پلتفرم مقصد باشد.
  • RTMP پشتیبانی: برای پخش زنده، پلتفرم‌های مقصد باید از RTMP پشتیبانی کنند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”بررسی نحوه استفاده Jitsi از WebRTC” subtitle=”توضیحات کامل”]Jitsi از WebRTC برای برقراری تماس‌های ویدیویی و صوتی در زمان واقعی استفاده می‌کند. WebRTC یک استاندارد وب است که به مرورگرها و برنامه‌های وب این امکان را می‌دهد که ارتباطات صوتی، ویدیویی و داده‌ای را بدون نیاز به افزونه‌های اضافی یا نرم‌افزارهای جانبی برقرار کنند. نحوه استفاده Jitsi از WebRTC به‌طور کلی به این صورت است:

نحوه کارکرد WebRTC در Jitsi

  1. Jitsi Meet و WebRTC:
    • Jitsi Meet از WebRTC برای ارسال و دریافت ویدیو، صدا و داده‌ها استفاده می‌کند. مرورگرهایی که از WebRTC پشتیبانی می‌کنند، مانند Chrome، Firefox، Safari و Edge، به‌طور مستقیم ارتباطات ویدیویی را از طریق Jitsi Meet برقرار می‌کنند.
  2. سیگنالینگ و ارتباطات:
    • برای ارتباط و تنظیمات اولیه، Jitsi از پروتکل XMPP و سرور Prosody برای سیگنالینگ استفاده می‌کند. این پروتکل مسئول ارسال اطلاعات برای راه‌اندازی تماس و تعیین پارامترهای ارتباطی (مثل کیفیت ویدیو، تنظیمات صوتی و غیره) است.
  3. Jitsi Videobridge و WebRTC:
    • Jitsi Videobridge در اینجا نقش مدیریت جریان‌های ویدیویی را ایفا می‌کند. این ماژول به‌طور مستقیم با WebRTC کار می‌کند و ویدیوها را بین شرکت‌کنندگان مختلف مدیریت می‌کند. Videobridge جریان‌های ویدیویی مختلف را دریافت کرده و به‌طور بهینه به کاربران منتقل می‌کند.
  4. WebRTC و رسانه‌ها:
    • رسانه‌ها (صدا و ویدیو) از طریق WebRTC در شبکه‌ای peer-to-peer ارسال می‌شوند، به این معنی که تماس‌های ویدیویی به‌طور مستقیم بین مرورگرها برقرار می‌شود. در مواردی که نیاز به مقیاس‌پذیری و پشتیبانی از تعداد زیادی شرکت‌کننده باشد، Jitsi Videobridge این فرآیند را به‌وسیله‌ی انتقال رسانه‌ها از یک سرور مرکزی تسهیل می‌کند.
  5. Jicofo و WebRTC:
    • Jicofo برای کنترل نشست‌ها و مدیریت جلسه استفاده می‌شود. این ماژول از WebRTC برای هماهنگ‌سازی و ایجاد ارتباطات بین شرکت‌کنندگان مختلف در تماس‌های ویدیویی استفاده می‌کند.

خلاصه:

Jitsi با بهره‌گیری از WebRTC به کاربران این امکان را می‌دهد که تماس‌های صوتی و ویدیویی با کیفیت بالا را به‌صورت مستقیم از طریق مرورگرهای وب برقرار کنند. ارتباطات داده‌ای و سیگنالینگ از طریق XMPP و WebRTC برای انتقال داده‌ها، صوت و تصویر بین اعضای کنفرانس مدیریت می‌شود.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 3. بررسی مدل‌های استقرار Jitsi”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استقرار Local روی یک سرور لینوکسی ساده” subtitle=”توضیحات کامل”]در این بخش از آموزش های ارائه شده توسط فرازنتورک، مراحل استقرار Jitsi به‌صورت Local روی یک سرور لینوکسی ساده (مثلاً Ubuntu Server 20.04 یا 22.04) به‌صورت کامل، کاربردی و با مثال عملی ارائه می‌گردد.


پیش‌نیازها

۱. یک سرور لینوکسی با دسترسی root یا sudo
۲. دامنه تنظیم‌شده روی سرور (برای مثال meet.example.com)
۳. نصب بودن curl، gnupg2 و apt-transport-https
۴. پورت‌های باز در فایروال:

  • TCP 80, 443 (برای HTTP/HTTPS)
  • UDP 10000 (برای WebRTC media)
  • TCP 4443 (اختیاری برای WebRTC fallback)

نصب بسته‌های موردنیاز
sudo apt update
sudo apt install -y curl gnupg2 apt-transport-https

اضافه‌کردن مخازن Jitsi
curl https://download.jitsi.org/jitsi-key.gpg.key \
| sudo gpg --dearmor \
-o /usr/share/keyrings/jitsi-keyring.gpg

echo 'deb [signed-by=/usr/share/keyrings/jitsi-keyring.gpg] \
https://download.jitsi.org stable/' \
| sudo tee /etc/apt/sources.list.d/jitsi-stable.list

به‌روزرسانی و نصب Jitsi Meet
sudo apt update
sudo apt install -y jitsi-meet

در حین نصب:

  • از شما خواسته می‌شود نام دامنه را وارد کنید (مثلاً meet.example.com)
  • می‌توانید گزینه Let’s Encrypt SSL را رد کنید و بعداً تنظیم کنید

دریافت گواهی SSL از Let’s Encrypt
sudo /usr/share/jitsi-meet/scripts/install-letsencrypt-cert.sh

در این مرحله:

  • ایمیل خود را وارد می‌کنید
  • گواهی به‌صورت خودکار نصب می‌شود

مسیر فایل‌های پیکربندی
  • پیکربندی دامنه و وب:
    /etc/nginx/sites-available/meet.example.com.conf
  • پیکربندی Jitsi Videobridge:
    /etc/jitsi/videobridge/sip-communicator.properties
  • پیکربندی Prosody (XMPP):
    /etc/prosody/conf.avail/meet.example.com.cfg.lua
  • پیکربندی Jicofo:
    /etc/jitsi/jicofo/sip-communicator.properties

فعال‌سازی و راه‌اندازی سرویس‌ها
sudo systemctl restart prosody
sudo systemctl restart jicofo
sudo systemctl restart jitsi-videobridge2

بررسی اجرا بودن سرویس‌ها
sudo systemctl status prosody
sudo systemctl status jicofo
sudo systemctl status jitsi-videobridge2

جمع‌بندی

Jitsi Meet را می‌توان به‌سادگی روی یک سرور لینوکسی با چند دستور نصب و راه‌اندازی کرد. تمامی اجزای کلیدی به‌صورت خودکار نصب می‌شوند و با دریافت گواهی Let’s Encrypt، دسترسی امن از طریق HTTPS فراهم می‌شود. با فعال بودن پورت‌های موردنیاز و سرویس‌های وابسته، سرویس آماده بهره‌برداری خواهد بود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استقرار در محیط ابری (VPS، AWS، DigitalOcean، Hetzner)” subtitle=”توضیحات کامل”]در این قسمت، نحوه استقرار Jitsi Meet در محیط‌های ابری مختلف مانند VPSهای عمومی یا ارائه‌دهندگان بزرگی مانند AWS، DigitalOcean و Hetzner بررسی می‌شود. مراحل نصب تقریباً مشابه حالت Local است، اما تنظیمات شبکه، DNS و امنیت ممکن است نیاز به دقت بیشتری داشته باشد.


انتخاب سرور مناسب

حداقل منابع توصیه‌شده برای استفاده گروهی متوسط:

  • CPU: حداقل 2 vCPU (ترجیحاً 4)
  • RAM: حداقل 4 GB
  • Disk: حداقل 20 GB
  • پهنای باند: مناسب تماس‌های ویدیویی همزمان

پلتفرم‌های قابل استفاده
  • DigitalOcean: دارای Marketplace Image مخصوص Jitsi Meet
  • Hetzner Cloud: امکان ساخت سریع VPS با نصب دستی
  • AWS EC2: انتخاب AMI Ubuntu و راه‌اندازی دستی
  • Vultr، Linode و دیگران: مشابه VPS معمولی با دسترسی root

مراحل نصب اولیه (مشترک بین همه پلتفرم‌ها)

۱. راه‌اندازی VPS با سیستم‌عامل Ubuntu 20.04 یا 22.04 ۲. اتصال به سرور از طریق SSH:

ssh root@your-server-ip

۳. تنظیم hostname و دامنه:

hostnamectl set-hostname meet.example.com

۴. افزودن رکورد A برای دامنه در پنل DNS (مثلاً در Cloudflare یا DNS ثبت‌کننده دامنه):

meet.example.com -> <Server Public IP>

نصب بسته‌ها و Jitsi Meet (همانند حالت Local)
sudo apt update

sudo apt install -y \
    curl \
    gnupg2 \
    apt-transport-https

curl https://download.jitsi.org/jitsi-key.gpg.key \
  | sudo gpg --dearmor \
  -o /usr/share/keyrings/jitsi-keyring.gpg

echo 'deb [signed-by=/usr/share/keyrings/jitsi-keyring.gpg] \
https://download.jitsi.org stable/' \
  | sudo tee /etc/apt/sources.list.d/jitsi-stable.list
sudo apt update<br /><br />
sudo apt install -y jitsi-meet<br /><br />

در زمان نصب:

  • دامنه وارد شود (مثلاً meet.example.com)
  • نصب گواهی Let’s Encrypt بعد از آن:
sudo /usr/share/jitsi-meet/scripts/install-letsencrypt-cert.sh

تنظیمات فایروال (برای تمام پلتفرم‌ها)
ufw allow 80/tcp
ufw allow 443/tcp
ufw allow 10000/udp
ufw allow 22/tcp
ufw enable

در AWS یا دیگر پلتفرم‌هایی که Security Group دارند، باید همین پورت‌ها را در Inbound Rules باز کنید.


بررسی عملکرد

بعد از نصب کامل و دریافت گواهی:

  • مرورگر را باز کنید
  • آدرس https://meet.example.com را وارد نمایید
  • باید رابط Jitsi Meet نمایش داده شود و امکان ایجاد جلسه فراهم باشد

جمع‌بندی

استقرار Jitsi در محیط‌های ابری با استفاده از سرورهایی مانند VPS یا پلتفرم‌هایی مثل AWS و DigitalOcean بسیار ساده و سریع است. با پیکربندی دامنه، باز کردن پورت‌های لازم و اجرای نصب Jitsi، می‌توان در کمتر از ۳۰ دقیقه یک بستر کنفرانس ویدیویی مستقل و امن راه‌اندازی کرد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استفاده از Docker و Docker Compose برای استقرار سریع” subtitle=”توضیحات کامل”]در این بخش به نحوه استقرار سریع Jitsi با استفاده از Docker و Docker Compose پرداخته می‌شود. این روش به شما امکان می‌دهد تا با کمترین پیکربندی دستی، تمامی سرویس‌های Jitsi را به‌صورت یکپارچه اجرا کنید.

پیش‌نیازها

  • نصب Docker و Docker Compose روی سرور لینوکسی
  • دسترسی به پورت‌های مورد نیاز (TCP 80, 443 و UDP 10000)

دریافت سورس Docker Jitsi Meet

git clone https://github.com/jitsi/docker-jitsi-meet.git
cd docker-jitsi-meet

کپی فایل محیطی نمونه و تنظیم آن

cp env.example .env
nano .env

در فایل .env مقادیر زیر را حداقل باید تنظیم کنید:

  • PUBLIC_URL آدرس دامنه یا IP شما (مثلاً: https://meet.example.com)
  • ENABLE_LETSENCRYPT=1 اگر می‌خواهید SSL خودکار فعال شود
  • LETSENCRYPT_DOMAIN دامنه مورد استفاده
  • LETSENCRYPT_EMAIL ایمیل جهت دریافت هشدارهای Let’s Encrypt

اجرای کانتینرها با Docker Compose

docker-compose up -d

این دستور سرویس‌های اصلی زیر را راه‌اندازی می‌کند:

  • web برای Jitsi Meet
  • prosody برای ارتباط XMPP
  • jicofo کنترل‌کننده کنفرانس
  • jvb برای مدیریت جریان‌های ویدیو

مسیر فایل‌ها

  • فایل پیکربندی: ~docker-jitsi-meet/.env
  • فایل docker-compose: ~docker-jitsi-meet/docker-compose.yml
  • پوشه volumeها: ~docker-jitsi-meet/.jitsi-meet-cfg/

بررسی وضعیت کانتینرها

docker-compose ps

برای مشاهده لاگ‌ها:

docker-compose logs -f

جمع‌بندی

استفاده از Docker برای استقرار Jitsi، یک روش سریع، ایزوله و ماژولار است که امکان اجرای محیط آزمایشی یا عملیاتی را بدون نیاز به پیکربندی دستی اجزای مختلف فراهم می‌کند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”معرفی بسته‌های Helm برای استقرار در Kubernetes” subtitle=”توضیحات کامل”]برای استقرار Jitsi بر روی خوشه Kubernetes، می‌توان از بسته‌های Helm استفاده کرد که فرایند نصب و مدیریت سرویس‌ها را ساده‌تر می‌کنند. اگرچه تیم Jitsi به‌صورت رسمی پشتیبانی Helm ارائه نمی‌دهد، اما پروژه‌های متن‌باز متعددی از طرف جامعه توسعه‌دهندگان وجود دارد که بسته‌های Helm آماده برای Jitsi فراهم کرده‌اند.

منابع معروف بسته‌های Helm برای Jitsi:
  • jitsi-contrib/jitsi-helm: یکی از پروژه‌های معتبر و به‌روزرسانی‌شده برای نصب Jitsi در محیط Kubernetes.
  • emrahcom/jitsi-helm: نسخه‌ای سفارشی‌سازی‌شده با پیکربندی‌های آماده برای تولید (production-ready).
  • saamerm/jitsi-on-kubernetes: پروژه‌ای قدیمی‌تر اما کاربردی، با مستندات ساده.
اجزای موجود در بسته Helm:

بسته‌های Helm معمولاً شامل نمودارهایی برای اجزای زیر هستند:

  • jitsi-meet: راه‌اندازی رابط کاربری تحت وب
  • jicofo: مدیریت جلسات و signaling
  • jitsi-videobridge: انتقال رسانه‌ها
  • prosody: سرور XMPP
  • jibri و jigasi: به‌صورت اختیاری (برای ضبط و اتصال SIP)
مراحل کلی نصب با Helm:

۱. نصب Helm (در صورت نصب نبودن):

curl https://raw.githubusercontent.com/helm/helm/master/scripts/get-helm-3 \
  | bash

۲. افزودن ریپازیتوری بسته (در صورت استفاده از ریپازیتوری اختصاصی):

helm repo add jitsi https://<your-helm-repo-url>
helm repo update

۳. نصب Jitsi با استفاده از Helm:

helm install my-jitsi jitsi/jitsi-meet \
  --namespace jitsi \
  --create-namespace

۴. تنظیمات سفارشی با استفاده از فایل values.yaml:

helm install my-jitsi jitsi/jitsi-meet \
  -f custom-values.yaml \
  --namespace jitsi
مسیر فایل‌های پیکربندی و ذخیره‌سازی:
  • مسیر فایل values.yaml که تنظیمات کلی در آن انجام می‌گیرد:
    /path/to/your/helm/charts/jitsi/values.yaml
  • در این فایل می‌توان نام دامنه، گواهینامه SSL، پورت‌ها، محدودیت منابع، و تنظیمات محیطی را تعریف کرد.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 4. نصب اولیه Jitsi Meet (عملی)”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”پیش‌نیازهای سیستم برای نصب اولیه Jitsi Meet” subtitle=”توضیحات کامل”]برای اجرای بدون مشکل Jitsi Meet به‌صورت پایدار و امن، سیستم میزبان باید دارای حداقل‌های نرم‌افزاری و تنظیمات زیر باشد:

۱. سیستم‌عامل: Ubuntu Server
  • نسخه پیشنهادی: Ubuntu 20.04 LTS یا Ubuntu 22.04 LTS
  • پشتیبانی رسمی Jitsi بیشتر بر پایه توزیع‌های Debian-based است، لذا استفاده از Ubuntu بهترین سازگاری را فراهم می‌کند.
۲. وب سرور: NGINX
  • Jitsi Meet به‌صورت پیش‌فرض با NGINX نصب و پیکربندی می‌شود.
  • در صورتی که Apache روی سیستم فعال است، باید حذف یا غیرفعال شود تا با پورت‌های مورد نیاز تداخل نداشته باشد.
۳. نام دامنه کامل (FQDN)
  • برای راه‌اندازی Jitsi به یک نام دامنه عمومی معتبر نیاز است (مثلاً: meet.example.com)
  • این دامنه باید به آی‌پی سرور (VPS یا سرور فیزیکی) اشاره کند.
  • بدون FQDN، راه‌اندازی SSL و بخش‌های ویدیویی WebRTC با مشکل مواجه می‌شود.
۴. گواهینامه SSL معتبر
  • برای رمزنگاری ارتباطات ویدیوکنفرانس‌ها، وجود SSL ضروری است.
  • Let’s Encrypt به‌صورت خودکار هنگام نصب Jitsi تنظیم می‌شود، به شرط آنکه:
    • دامنه روی آی‌پی سرور ست شده باشد.
    • پورت 80 و 443 باز باشند و توسط فایروال یا سرویس دیگری اشغال نشده باشند.
۵. باز بودن پورت‌های لازم در فایروال

باید اطمینان حاصل شود که پورت‌های زیر در فایروال باز هستند:

TCP 80     (HTTP)
TCP 443    (HTTPS)
UDP 10000  (رسانه WebRTC)
TCP 4443   (پشتیبان WebRTC در صورت نیاز)
۶. منابع سخت‌افزاری پیشنهادی (برای نصب پایه)
نوع منبع حداقل مقدار پیشنهادی
CPU ۲ هسته مجازی (vCPU)
RAM ۴ گیگابایت
فضای ذخیره‌سازی حداقل ۱۰ گیگابایت SSD
شبکه اتصال پایدار با پینگ کم
مسیرهای مهم سیستم:
  • مسیر تنظیمات NGINX:
    /etc/nginx/sites-available/
    
  • مسیر پیکربندی Jitsi Meet:
    /etc/jitsi/meet/
    

در درس‌های بعدی، نصب عملی Jitsi Meet، تنظیم NGINX، فعال‌سازی SSL و رفع مشکلات رایج هنگام نصب آموزش داده خواهد شد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نصب Jitsi Meet با استفاده از مخازن رسمی” subtitle=”توضیحات کامل”]در این قسمت، مراحل نصب Jitsi Meet از طریق مخازن رسمی Jitsi روی سیستم Ubuntu Server آموزش داده می‌شود. فرض بر این است که پیش‌نیازهای اولیه شامل دامنه، SSL و پورت‌های باز فراهم شده‌اند.

مرحله ۱: به‌روزرسانی سیستم و نصب ابزارهای پایه
sudo apt update
sudo apt install -y \
    curl \
    gnupg2 \
    apt-transport-https
مرحله ۲: افزودن کلید امنیتی Jitsi
curl https://download.jitsi.org/jitsi-key.gpg.key \
    | sudo gpg --dearmor \
    -o /usr/share/keyrings/jitsi-keyring.gpg
مرحله ۳: افزودن مخزن Jitsi به سیستم
echo 'deb [signed-by=/usr/share/keyrings/jitsi-keyring.gpg] \
https://download.jitsi.org stable/' \
| sudo tee /etc/apt/sources.list.d/jitsi-stable.list
مرحله ۴: به‌روزرسانی لیست بسته‌ها و نصب Jitsi Meet
sudo apt update
sudo apt install -y jitsi-meet
مرحله ۵: پیکربندی دامنه و گواهینامه SSL

در طول نصب، اسکریپت به‌صورت خودکار از شما می‌خواهد:

  • نام دامنه (FQDN) مورد نظر خود را وارد کنید.
  • در صورت تمایل، از Let’s Encrypt برای صدور گواهینامه SSL استفاده کنید.
مسیرهای مهم پس از نصب:
  • پیکربندی دامنه:
    /etc/jitsi/meet/YOUR-DOMAIN-config.js
    
  • فایل‌های NGINX مرتبط با Jitsi:
    /etc/nginx/sites-available/YOUR-DOMAIN.conf
    
  • تنظیمات Jicofo:
    /etc/jitsi/jicofo/config
    
  • تنظیمات Videobridge:
    /etc/jitsi/videobridge/sip-communicator.properties
    

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تولید گواهی SSL با Let’s Encrypt” subtitle=”توضیحات کامل”]برای فعال‌سازی ارتباط امن HTTPS در Jitsi Meet، استفاده از Let’s Encrypt یک روش رایگان، سریع و استاندارد است. این مرحله معمولاً بعد از نصب Jitsi Meet و تعریف دامنه (FQDN) انجام می‌شود.

پیش‌نیازها
  • دامنه فعال (مثلاً: meet.example.com) که به IP سرور اشاره می‌کند.
  • پورت‌های 80 و 443 در فایروال باز باشند.
  • بسته certbot و پلاگین nginx نصب باشند.
مرحله ۱: نصب Certbot
sudo apt update
sudo apt install -y certbot python3-certbot-nginx
مرحله ۲: دریافت گواهی SSL برای دامنه
sudo certbot --nginx \
    -d meet.example.com

در طی این مرحله:

  • دامنه را تأیید می‌کند.
  • فایل‌های پیکربندی NGINX را بررسی می‌کند.
  • گواهینامه معتبر را از Let’s Encrypt دریافت و نصب می‌کند.
مرحله ۳: تنظیم تمدید خودکار گواهی
sudo systemctl list-timers | grep certbot

برای اطمینان از اینکه تمدید خودکار فعال است، می‌توانید این دستور را بررسی کنید. در صورت نیاز می‌توانید دستور تست تمدید دستی را اجرا کنید:

sudo certbot renew --dry-run
مسیر گواهی‌ها
  • کلید خصوصی:
    /etc/letsencrypt/live/meet.example.com/privkey.pem
    
  • گواهینامه اصلی:
    /etc/letsencrypt/live/meet.example.com/fullchain.pem
    
نکته امنیتی

برای جلوگیری از دسترسی غیرمجاز به کلیدها، فقط سرویس‌هایی مانند NGINX یا Jitsi باید به مسیر گواهی‌ها دسترسی داشته باشند. همچنین پس از نصب، سرویس NGINX و Jitsi Meet باید ریستارت شوند:

sudo systemctl restart nginx
sudo systemctl restart jitsi-videobridge2
sudo systemctl restart jicofo

در صورت استفاده از دامنه جدید یا جابه‌جایی سرور، مراحل بالا باید مجدداً اجرا شوند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تست اولیه اتصال و برگزاری جلسه” subtitle=”توضیحات کامل”]پس از نصب کامل و تنظیم گواهی SSL، باید عملکرد سرویس Jitsi Meet را تست کرده و مطمئن شوید همه اجزا به درستی کار می‌کنند. مراحل زیر به‌صورت گام‌به‌گام توضیح داده شده‌اند:

مرحله ۱: بررسی وضعیت سرویس‌ها
sudo systemctl status nginx
sudo systemctl status prosody
sudo systemctl status jicofo
sudo systemctl status jitsi-videobridge2

اگر همه سرویس‌ها فعال (active) و بدون ارور باشند، سرور آماده استفاده است.

مرحله ۲: باز کردن مرورگر و ورود به دامنه

در مرورگر، دامنه‌ای که به Jitsi Meet اختصاص داده‌اید را وارد کنید:

https://meet.example.com

باید رابط کاربری Jitsi Meet با طراحی ساده ظاهر شود.

مرحله ۳: شروع یک جلسه جدید
  • یک نام برای جلسه وارد کنید (مثلاً: mytestmeeting)
  • روی دکمه Start meeting کلیک کنید.
  • اگر مرورگر از شما اجازه دسترسی به میکروفون و دوربین خواست، آن را تأیید کنید.
  • صفحه کنفرانس با ویدیو، صدا و کنترل‌های جلسه باز خواهد شد.
مرحله ۴: بررسی اتصال ویدیو و صدا
  • بررسی کنید که تصویر و صدای شما قابل مشاهده و شنیدن باشد.
  • اگر از سیستم دیگری وارد شوید (مثلاً با موبایل یا تب دیگر)، اتصال چند کاربر را تست کنید.
  • با فعال‌کردن Chat، Share screen و Raise hand عملکرد دکمه‌ها را نیز بررسی کنید.
مرحله ۵: تست آدرس HTTPS و امنیت
  • مطمئن شوید که سایت از طریق HTTPS باز می‌شود و قفل امنیتی مرورگر فعال است.
  • با کلیک روی آیکون قفل، اطلاعات گواهی را مشاهده کنید.
مرحله ۶: تست با کاربران خارجی

اگر سرور پشت NAT یا فایروال باشد، یک کاربر بیرونی (مثلاً از اینترنت دیگر) وارد جلسه شود تا مطمئن شوید WebRTC و NAT traversal به‌درستی کار می‌کند. در صورت وجود مشکل در ارسال یا دریافت ویدیو، پیکربندی پورت‌ها، STUN/TURN یا NAT در فایروال بررسی شود.

ابزار بررسی کیفیت تماس

در محیط جلسه، روی دکمه “Connection quality” کلیک کرده و لاگ‌ها و اطلاعات مربوط به تأخیر، بیت‌ریت و بسته‌های ازدست‌رفته را مشاهده کنید.

در صورت بروز مشکل در ارتباط، بررسی لاگ‌های زیر مفید است:

/var/log/jitsi/jvb.log
/var/log/jitsi/jicofo.log
/var/log/prosody/prosody.log
/var/log/nginx/access.log

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 5. بررسی پورت‌ها، فایروال و ارتباطات شبکه”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”پورت‌های مورد استفاده توسط اجزای Jitsi” subtitle=”توضیحات کامل”]در این بخش به پورت‌هایی که توسط اجزای مختلف Jitsi برای برقراری ارتباط و انتقال داده‌ها استفاده می‌شوند، اشاره خواهیم کرد:

  • 80/443 (HTTPS):
    این پورت‌ها برای ارتباطات امن (HTTPS) و دسترسی به وب‌سایت Jitsi و اجزای آن استفاده می‌شوند.
  • 10000/UDP (ویدیو):
    این پورت برای انتقال داده‌های ویدیویی در جلسات ویدیو کنفرانس از طریق پروتکل UDP استفاده می‌شود.
  • 5222، 5280، 5347 (XMPP):
    این پورت‌ها برای ارتباطات پروتکل XMPP مورد استفاده قرار می‌گیرند.

    • پورت 5222 برای ارتباطات XMPP اصلی (چت و پیام‌رسانی) استفاده می‌شود.
    • پورت 5280 برای دسترسی به رابط وب XMPP و مدیریت اتصال‌ها به کار می‌رود.
    • پورت 5347 برای پروتکل‌های خارجی XMPP (مانند تنظیمات ورود یا جابجایی اطلاعات) استفاده می‌شود.

این پورت‌ها برای کارکرد صحیح سیستم Jitsi بسیار مهم هستند و باید در تنظیمات فایروال و سرویس‌های شبکه به درستی پیکربندی شوند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیم فایروال: عیب‌یابی اتصال در صورت وجود NAT یا Proxy” subtitle=”توضیحات کامل”]در این بخش، نحوه تنظیم فایروال برای کارکرد صحیح سیستم Jitsi توضیح داده می‌شود. این تنظیمات به‌ویژه در مواقعی که اتصال با مشکلاتی مواجه است، مانند وجود NAT یا Proxy، اهمیت بیشتری پیدا می‌کنند.

تنظیمات فایروال برای Jitsi
  1. باز کردن پورت‌های ضروری:
    • اطمینان حاصل کنید که پورت‌های زیر در فایروال باز هستند:
      • پورت 80 و 443 برای ارتباطات HTTPS
      • پورت 10000/UDP برای انتقال ویدیو
      • پورت‌های 5222، 5280 و 5347 برای XMPP
    • این پورت‌ها برای عملکرد صحیح سیستم Jitsi ضروری هستند و باید در فایروال شبکه شما باز باشند.
  2. تنظیمات NAT (Network Address Translation):
    • در صورتی که شبکه شما پشت NAT قرار دارد، باید پورت‌های خاص را به‌طور مناسب در تنظیمات NAT فوروارد کنید.
    • فوروارد کردن پورت 10000 به مقصد سرور Jitsi برای انتقال ویدیو ضروری است.
    • پورت 443 نیز باید به‌طور ویژه برای ترافیک HTTPS در دسترس باشد.
  3. تنظیمات Proxy:
    • اگر از یک سرور Proxy استفاده می‌کنید، باید اطمینان حاصل کنید که ارتباطات از طریق این Proxy به درستی مسیریابی می‌شوند.
    • باید اجازه دهید که پورت‌های 443 و 80 از طریق Proxy عبور کنند.
    • در صورتی که از پروکسی برای XMPP یا ارتباطات دیگر استفاده می‌شود، پورت‌های 5222، 5280 و 5347 نیز باید از طریق Proxy باز شوند.
عیب‌یابی اتصال در صورت وجود NAT یا Proxy
  1. مشکلات اتصال از طریق NAT:
    • اگر پس از تنظیم فایروال و پیکربندی، همچنان با مشکلاتی در اتصال مواجه شدید، ابتدا باید اطمینان حاصل کنید که سرور از طریق پورت‌های مناسب برای ارتباطات NAT در دسترس است.
    • در صورت نیاز، می‌توانید از ابزارهایی مانند STUN یا TURN برای کمک به مسیریابی ترافیک از طریق NAT استفاده کنید.
  2. مشکلات اتصال از طریق Proxy:
    • در صورتی که مشکلات اتصال از طریق Proxy مشاهده می‌کنید، اطمینان حاصل کنید که سرور Jitsi به‌طور صحیح با Proxy پیکربندی شده است.
    • بررسی کنید که هیچگونه محدودیت یا فیلتر در Proxy برای پورت‌های مورد نیاز Jitsi وجود نداشته باشد.

با تنظیمات صحیح فایروال، NAT و Proxy، اتصال به سرور Jitsi به‌طور پایدار و بدون مشکل انجام خواهد شد.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 6. کاربردهای رایج Jitsi در پروژه‌های مختلف”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استفاده به‌عنوان زیرساخت ارتباط ویدیویی در وب‌سایت‌ها” subtitle=”توضیحات کامل”]Jitsi به‌عنوان یک پلتفرم ویدیویی منبع باز، گزینه‌ای مناسب برای توسعه‌دهندگان وب است که می‌خواهند قابلیت تماس ویدیویی را به وب‌سایت‌های خود اضافه کنند. این ویژگی به‌ویژه برای وب‌سایت‌هایی که نیاز به ارتباطات ویدیویی با کاربران دارند، بسیار مفید است.

  1. ارتباطات ویدیویی در وب‌سایت‌های تجاری:
    • شرکت‌ها می‌توانند از Jitsi برای برگزاری جلسات آنلاین، ویدیو کنفرانس‌ها و پشتیبانی مشتری استفاده کنند.
    • این سیستم به‌ویژه برای جلسات تیمی، مشاوره آنلاین و تعامل با مشتریان مفید است.
  2. ادغام با سیستم‌های موجود:
    • Jitsi به راحتی می‌تواند با دیگر سیستم‌ها و پلتفرم‌ها ادغام شود. توسعه‌دهندگان می‌توانند آن را به عنوان بخشی از وب‌سایت خود با API‌های موجود یا از طریق SDK‌ها ادغام کنند.
  3. ایجاد اتاق‌های ویدیویی اختصاصی:
    • کاربران می‌توانند به‌طور خودکار یا به‌صورت دستی اتاق‌های ویدیویی اختصاصی برای برگزاری جلسات، کلاس‌ها و جلسات مشاوره ایجاد کنند.
    • این ویژگی باعث می‌شود که کاربران بتوانند به‌راحتی ارتباطات گروهی یا فردی را برقرار کنند.
  4. انعطاف‌پذیری و مقیاس‌پذیری:
    • از آنجا که Jitsi یک پلتفرم متن‌باز است، می‌توان آن را برای نیازهای خاص پروژه‌ها و با توجه به مقیاس‌پذیری و نیازهای ترافیکی وب‌سایت‌ها تنظیم کرد.
    • می‌توان از سرورهای خود برای کنترل بهتری بر روی امنیت، داده‌ها و عملکرد استفاده کرد.
  5. آسانی استفاده برای کاربران نهایی:
    • به دلیل اینکه Jitsi هیچ‌گونه نیاز به نصب نرم‌افزار خاصی ندارد و به‌طور مستقیم از طریق مرورگر وب قابل دسترسی است، کاربران نهایی به‌راحتی می‌توانند بدون نصب اپلیکیشن‌های اضافی از آن استفاده کنند.

این ویژگی‌ها باعث می‌شود که Jitsi یکی از گزینه‌های محبوب برای پروژه‌های آنلاین با نیاز به ارتباطات ویدیویی باشد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تلفیق با سیستم‌های آموزش مجازی، CRM، Helpdesk” subtitle=”توضیحات کامل”]

  1. تلفیق با سیستم‌های آموزش مجازی:
    • Jitsi می‌تواند به‌راحتی به سیستم‌های مدیریت یادگیری (LMS) مانند Moodle، Canvas یا دیگر پلتفرم‌های مشابه متصل شود تا امکان برگزاری جلسات آنلاین و ویدیو کنفرانس‌های آموزشی فراهم شود.
    • این تلفیق به مدرسین و دانش‌آموزان این امکان را می‌دهد تا در فضای مجازی جلسات کلاس آنلاین، تدریس زنده و پرسش و پاسخ برگزار کنند.
    • علاوه بر ویدیو، Jitsi قابلیت به اشتراک‌گذاری اسکرین، ضبط جلسات، و چت‌های گروهی را فراهم می‌کند که به تعامل بیشتر در کلاس‌های آنلاین کمک می‌کند.
  2. تلفیق با سیستم‌های CRM:
    • Jitsi به‌راحتی می‌تواند در سیستم‌های مدیریت ارتباط با مشتری (CRM) مانند Salesforce و HubSpot ادغام شود. این ویژگی به تیم‌های فروش و پشتیبانی این امکان را می‌دهد تا جلسات ویدیویی را برای برقراری ارتباط مؤثرتر با مشتریان خود برقرار کنند.
    • به‌طور مثال، تیم‌های فروش می‌توانند از Jitsi برای برگزاری دموهای محصولات یا مشاوره‌های آنلاین استفاده کنند.
    • پشتیبانی مشتریان نیز می‌تواند با استفاده از تماس‌های ویدیویی، مشکلات پیچیده‌تری را از طریق ارتباط تصویری حل کند، که باعث بهبود تجربه مشتری می‌شود.
  3. تلفیق با سیستم‌های Helpdesk:
    • تلفیق Jitsi با سیستم‌های پشتیبانی آنلاین مانند Zendesk یا Freshdesk امکان برگزاری جلسات ویدیویی یا تماس‌های آنلاین با مشتریان را فراهم می‌آورد.
    • این ابزار می‌تواند برای پشتیبانی فنی یا مشاوره‌های تخصصی از راه دور استفاده شود، که کمک می‌کند تا مشکلات پیچیده مشتریان سریع‌تر و مؤثرتر حل شوند.
    • همچنین، با این تلفیق می‌توان از قابلیت ضبط جلسات و اشتراک‌گذاری اسکرین برای مستندسازی و پیگیری دقیق‌تر مشکلات استفاده کرد.

با توجه به قابلیت‌های انعطاف‌پذیر و مقیاس‌پذیر Jitsi، این پلتفرم می‌تواند به‌طور موثری در سیستم‌های مختلف برای ارتباطات ویدیویی یکپارچه‌سازی شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استفاده در سازمان‌ها به‌عنوان راه‌حل جایگزین بومی” subtitle=”توضیحات کامل”]

  1. استفاده در سازمان‌های کوچک و متوسط:
    • سازمان‌های کوچک و متوسط می‌توانند از Jitsi به‌عنوان یک راه‌حل ارتباطی داخلی و جلسات آنلاین استفاده کنند. به‌جای استفاده از پلتفرم‌های خارجی که هزینه‌های زیادی دارند، می‌توانند Jitsi را به‌صورت محلی نصب کرده و از آن به‌عنوان ابزاری برای ارتباطات تیمی و ویدیویی استفاده کنند.
    • این امر به سازمان‌ها این امکان را می‌دهد که کنترل بیشتری بر امنیت داده‌ها و حریم خصوصی خود داشته باشند، چرا که تمامی تماس‌ها و داده‌ها بر روی سرورهای داخلی سازمان ذخیره می‌شوند.
  2. پشتیبانی از جلسات ویدیویی امن:
    • Jitsi می‌تواند به‌عنوان جایگزینی برای پلتفرم‌های تجاری مانند Zoom یا Microsoft Teams در سازمان‌ها استفاده شود. با استفاده از این پلتفرم، سازمان‌ها می‌توانند جلسات ویدیویی امن، پایدار و قابل تنظیم برگزار کنند.
    • ویژگی‌های پیشرفته مانند رمزگذاری درون‌سرویس و توانایی میزبانی جلسات بزرگ بدون کاهش کیفیت ویدیو، جزیی از امکانات Jitsi هستند که می‌توانند نیازهای سازمانی را به‌طور کامل برآورده کنند.
  3. یکپارچگی با سیستم‌های موجود سازمانی:
    • Jitsi قابلیت یکپارچگی با ابزارهای مدیریت پروژه، تقویم‌های سازمانی و سایر نرم‌افزارهای سازمانی را دارد. این ویژگی به سازمان‌ها این امکان را می‌دهد که جلسات آنلاین و تماس‌های ویدیویی را به‌صورت یکپارچه در اکوسیستم‌های کاری خود گنجانده و فرآیندهای ارتباطی خود را بهبود بخشند.
    • برای مثال، سازمان‌ها می‌توانند Jitsi را با ابزارهایی مانند Slack، Trello یا Asana ترکیب کنند تا جلسات ویدیویی را به‌طور خودکار بر اساس تقویم و وظایف پیش‌بینی‌شده برگزار کنند.
  4. کاهش هزینه‌های ارتباطی:
    • یکی از بزرگ‌ترین مزایای استفاده از Jitsi در سازمان‌ها، کاهش هزینه‌ها است. با استفاده از این پلتفرم متن‌باز و رایگان، سازمان‌ها نیازی به پرداخت هزینه‌های بالا برای ابزارهای ارتباطی تجاری ندارند.
    • همچنین، Jitsi به‌راحتی می‌تواند به‌طور محلی نصب شود، که هزینه‌های مربوط به میزبانی و سرورها را کاهش می‌دهد و امکاناتی مانند سفارشی‌سازی و مدیریت محلی را به سازمان‌ها می‌دهد.

با استفاده از Jitsi به‌عنوان یک راه‌حل جایگزین بومی، سازمان‌ها می‌توانند به یک ابزار ارتباطی امن، پایدار و مقرون‌به‌صرفه دست یابند که نیازهای ارتباطی آن‌ها را به‌طور مؤثر برآورده می‌کند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 7. بررسی امنیت پایه در Jitsi”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ارتباطات رمزنگاری‌شده (TLS + DTLS-SRTP)” subtitle=”توضیحات کامل”]Jitsi به‌عنوان یک پلتفرم ارتباطی متن‌باز، بر امنیت کاربران خود تأکید زیادی دارد. یکی از ویژگی‌های کلیدی این پلتفرم، رمزنگاری است که برای حفظ حریم خصوصی و امنیت اطلاعات در حین برقراری ارتباطات استفاده می‌شود. این پلتفرم از پروتکل‌های رمزنگاری قوی مانند TLS و DTLS-SRTP برای تضمین امنیت در ارتباطات ویدیویی و صوتی استفاده می‌کند.

ارتباطات رمزنگاری‌شده (TLS + DTLS-SRTP)
  1. TLS (Transport Layer Security):
    • TLS یک پروتکل امنیتی است که برای رمزنگاری داده‌ها در شبکه‌های عمومی استفاده می‌شود. Jitsi از TLS برای رمزنگاری ارتباطات HTTP و HTTPS بین کلاینت‌ها و سرور استفاده می‌کند. این پروتکل از یک ارتباط امن و رمزگذاری‌شده برای تبادل داده‌ها و جلوگیری از حملات “Man-in-the-middle” (MITM) اطمینان حاصل می‌کند.
    • به‌طور خاص، Jitsi از TLS برای برقراری ارتباط امن بین مرورگرها و سرورها در زمان برقراری تماس‌های ویدیویی و صوتی استفاده می‌کند. این بدین معناست که تمام داده‌های متنی و اطلاعات شناسایی کاربران که بین کلاینت‌ها و سرور منتقل می‌شود، رمزنگاری می‌شود و از دسترسی غیرمجاز محافظت می‌شود.
  2. DTLS-SRTP (Datagram Transport Layer Security – Secure Real-Time Protocol):
    • DTLS یک پروتکل امنیتی مشابه TLS است که به‌طور خاص برای ارتباطات بی‌درنگ (Real-Time) مانند تماس‌های صوتی و ویدیویی طراحی شده است. این پروتکل برای محافظت از داده‌ها در حین انتقال در شبکه‌های بسته‌بندی‌شده (مثل UDP) که معمولاً برای تماس‌های ویدیویی و صوتی استفاده می‌شود، مناسب است.
    • SRTP (Secure Real-Time Transport Protocol)، پروتکلی است که برای امنیت انتقال داده‌های صوتی و ویدیویی در تماس‌های ویدئویی و صوتی به‌کار می‌رود. با ترکیب DTLS و SRTP، Jitsi تضمین می‌کند که تمامی داده‌های ویدیویی و صوتی، حتی در زمان انتقال، از رمزنگاری قوی و حفاظت در برابر دسترسی غیرمجاز برخوردار باشند.
    • این دو پروتکل به‌طور هم‌زمان برای رمزنگاری محتوای تماس‌های صوتی و ویدیویی استفاده می‌شوند تا اطمینان حاصل شود که حتی در صورت دسترسی به شبکه‌های عمومی یا غیرامن، محتوای تماس از نظر امنیتی محافظت می‌شود.
  3. مزایای استفاده از TLS و DTLS-SRTP در Jitsi:
    • محافظت در برابر حملات MITM: استفاده از TLS و DTLS-SRTP محافظت کاملی در برابر حملات Man-in-the-middle فراهم می‌آورد. این حملات زمانی رخ می‌دهند که شخص ثالثی بدون اطلاع طرفین در مکالمه آنلاین حضور داشته باشد و داده‌ها را نظارت یا تغییر دهد.
    • امنیت بالا در تماس‌های ویدیویی: با استفاده از این پروتکل‌ها، داده‌های ویدیویی و صوتی به‌طور همزمان رمزنگاری می‌شوند و امکان دسترسی به محتوا برای مهاجمان به حداقل می‌رسد.
    • حفاظت از اطلاعات کاربر: رمزنگاری ارتباطات به‌صورت پیش‌فرض از اطلاعات حساس کاربر در هنگام تماس‌ها محافظت می‌کند، از جمله شماره‌گیری تماس، هویت کاربر، و محتوای ارتباطات.

در مجموع، استفاده از TLS و DTLS-SRTP در Jitsi تضمین می‌کند که ارتباطات در این پلتفرم امن، خصوصی و مقاوم در برابر تهدیدات مختلف باشد. این پروتکل‌ها به‌ویژه برای سازمان‌ها و پروژه‌های حساس که به امنیت داده‌ها اهمیت می‌دهند، بسیار حیاتی هستند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”آشنایی با مفهوم E2EE در Jitsi” subtitle=”توضیحات کامل”]E2EE (End-to-End Encryption) یا رمزنگاری انتها به انتها، یکی از مهم‌ترین ویژگی‌های امنیتی در پلتفرم‌های ارتباطی است. در Jitsi، این مفهوم به‌ویژه در زمینه ارتباطات صوتی و ویدیویی به‌کار می‌رود تا اطمینان حاصل شود که تنها فرستنده و گیرنده تماس به اطلاعات تماس دسترسی دارند و هیچ شخص ثالثی قادر به مشاهده یا شنیدن محتوای تماس نیست.

مفهوم E2EE در Jitsi
  1. تعریف E2EE:
    • رمزنگاری انتها به انتها (End-to-End Encryption) به این معناست که داده‌ها از زمانی که از فرستنده ارسال می‌شوند تا زمانی که به گیرنده می‌رسند، در هر مرحله از مسیر، رمزنگاری شده باقی می‌مانند. این به‌طور خاص به این معنی است که حتی سرورهایی که داده‌ها از طریق آن‌ها عبور می‌کنند، قادر به مشاهده یا دسترسی به محتوای تماس نخواهند بود.
    • این ویژگی امنیتی تضمین می‌کند که تنها طرف‌های درگیر در ارتباط (یعنی فرستنده و گیرنده) قادر به مشاهده یا شنیدن محتوای تماس باشند.
  2. چگونه E2EE در Jitsi پیاده‌سازی می‌شود؟
    • در Jitsi، زمانی که رمزنگاری انتها به انتها فعال می‌شود، کلیدهای رمزنگاری تنها در اختیار کاربران نهایی قرار دارند و هیچ‌کدام از سرورها (اعم از سرور Jitsi یا سرورهای ارتباطی میانه) به این کلیدها دسترسی ندارند.
    • برای انجام E2EE در Jitsi، از پروتکل‌های رمزنگاری ویژه‌ای برای حفاظت از داده‌ها استفاده می‌شود. این پروتکل‌ها شامل مواردی مانند DTLS-SRTP برای رمزنگاری داده‌های صوتی و ویدیویی، و استفاده از کلیدهای خصوصی و عمومی برای رمزنگاری داده‌ها در هر دو طرف تماس می‌باشد.
  3. عملکرد E2EE در تماس‌های ویدیویی و صوتی Jitsi:
    • در تماس‌های ویدیویی و صوتی، داده‌ها به‌صورت محلی روی دستگاه‌های فرستنده و گیرنده رمزنگاری می‌شوند و تنها در این دو دستگاه قابلیت رمزگشایی دارند. این بدان معناست که حتی اگر مهاجم یا شخص ثالثی به سرور یا شبکه حمله کند، نمی‌تواند محتوای تماس را مشاهده یا شنود کند.
    • از آنجا که Jitsi از رمزنگاری طرفین (End-to-End) استفاده می‌کند، سرور هیچ‌گاه به اطلاعات تماس دسترسی ندارد و تنها نقش تسهیل‌کننده را ایفا می‌کند.
  4. مزایای استفاده از E2EE در Jitsi:
    • حفظ حریم خصوصی: با استفاده از E2EE، کاربران می‌توانند اطمینان حاصل کنند که هیچ‌کس به محتوای تماس‌های آن‌ها دسترسی ندارد. حتی اگر داده‌ها در مسیر انتقال به سرورهای مختلف عبور کنند، تمامی این داده‌ها به‌صورت رمزنگاری شده باقی می‌مانند.
    • امنیت بالا در برابر حملات: با وجود رمزنگاری انتها به انتها، حملات شبیه به حملات “Man-in-the-middle” (MITM) که در آن مهاجم تلاش می‌کند به داده‌های در حال انتقال دسترسی پیدا کند، کاملاً بی‌اثر می‌شود.
    • حفاظت از اطلاعات حساس: برای تماس‌هایی که حاوی اطلاعات حساس هستند، مانند مشاوره پزشکی، مذاکرات حقوقی یا اطلاعات تجاری، E2EE امنیت بیشتری را فراهم می‌آورد و از افشای اطلاعات در برابر تهدیدات خارجی جلوگیری می‌کند.
  5. چالش‌ها و محدودیت‌ها:
    • منابع سخت‌افزاری و محاسباتی: رمزنگاری انتها به انتها نیازمند محاسبات بیشتری نسبت به رمزنگاری معمولی است. این ممکن است باعث مصرف بالاتر منابع سیستم و کندی در برخی دستگاه‌ها شود.
    • عدم پشتیبانی کامل در همه‌جا: برای فعال کردن E2EE در Jitsi، هر دو طرف باید پشتیبانی از این ویژگی را در تنظیمات خود فعال کنند. در صورتی که یکی از طرفین از E2EE پشتیبانی نکند، ارتباط به‌طور معمول انجام خواهد شد.
نتیجه‌گیری

در نهایت، E2EE در Jitsi به‌عنوان یک لایه امنیتی اضافی عمل می‌کند تا امنیت و حریم خصوصی کاربران را به‌طور کامل تضمین کند. این ویژگی به‌ویژه برای سازمان‌ها، کاربران حساس، و مواردی که اطلاعات خصوصی در میان است، کاربرد زیادی دارد. با استفاده از E2EE، Jitsi توانسته است اعتماد کاربران خود را در زمینه امنیت اطلاعات جلب کند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نیاز به پیاده‌سازی لایه‌های اضافی احراز هویت در نسخه‌های سازمانی” subtitle=”توضیحات کامل”]Jitsi به‌طور پیش‌فرض از پروتکل‌های رمزنگاری قوی برای تأمین امنیت ارتباطات صوتی و ویدیویی استفاده می‌کند. با این حال، در برخی از سناریوهای خاص، به‌ویژه در محیط‌های سازمانی، نیاز به پیاده‌سازی لایه‌های اضافی احراز هویت برای افزایش سطح امنیت وجود دارد. در این بخش از آموزش های ارائه شده توسط فرازنتورک، به بررسی این نیاز و روش‌های اجرایی آن در نسخه‌های سازمانی Jitsi خواهیم پرداخت.

نیاز به پیاده‌سازی لایه‌های اضافی احراز هویت در نسخه‌های سازمانی
  1. چالش‌های امنیتی در محیط‌های سازمانی:
    • دسترسی غیرمجاز: در سازمان‌ها، نیاز به محدود کردن دسترسی به جلسه‌های ویدیویی و ارتباطات صوتی به کاربران خاص و مجاز وجود دارد. بدون احراز هویت مناسب، هر کسی می‌تواند به تماس‌های سازمانی وارد شود و اطلاعات حساس را به خطر بیندازد.
    • اطلاعات حساس: تماس‌های ویدیویی و صوتی ممکن است شامل داده‌های حساس مانند اطلاعات مالی، اطلاعات مشتریان، یا اطلاعات پزشکی باشند. بنابراین، حفظ امنیت این داده‌ها از اهمیت بالایی برخوردار است.
    • حملات امنیتی هدفمند: سازمان‌ها ممکن است هدف حملات سایبری نظیر حملات “Man-in-the-Middle” (MITM) یا حملات نفوذی از سوی مهاجمان باشند که سعی دارند به داده‌ها و ارتباطات در حال انتقال دسترسی پیدا کنند.
  2. احراز هویت پایه در Jitsi:
    • Jitsi به‌طور پیش‌فرض از احراز هویت ساده استفاده می‌کند که امکان ورود به سیستم را از طریق username و password فراهم می‌آورد. این احراز هویت اولیه، ممکن است برای محیط‌های کوچک یا استفاده‌های عمومی مناسب باشد.
    • با این حال، در محیط‌های سازمانی که نیاز به کنترل دقیق‌تر بر دسترسی‌ها و امنیت بیشتر وجود دارد، این احراز هویت پایه ممکن است کافی نباشد و نیاز به لایه‌های اضافی برای مقابله با تهدیدات پیشرفته‌تر احساس شود.
  3. احراز هویت دو مرحله‌ای (2FA):
    • یکی از روش‌های معمول برای تقویت احراز هویت در نسخه‌های سازمانی Jitsi، احراز هویت دو مرحله‌ای (2FA) است. در این روش، علاوه بر وارد کردن نام کاربری و رمز عبور، کاربران باید یک کد تأییدی که به دستگاه‌های دیگر آن‌ها ارسال می‌شود (مانند پیامک یا اپلیکیشن احراز هویت مانند Google Authenticator)، وارد کنند.
    • مزایای 2FA:
      • افزایش امنیت در برابر دسترسی‌های غیرمجاز
      • کاهش ریسک سرقت هویت
      • به‌ویژه مفید در مقابله با حملات فیشینگ و دسترسی‌های غیرمجاز به حساب‌ها
  4. احراز هویت مبتنی بر LDAP یا Active Directory:
    • در سازمان‌ها، معمولاً سیستم‌های احراز هویت متمرکز برای کنترل دسترسی به منابع مختلف استفاده می‌شود. Jitsi از امکان اتصال به LDAP یا Active Directory برای احراز هویت کاربران پشتیبانی می‌کند.
    • این روش، به سازمان‌ها اجازه می‌دهد تا از یک پایگاه داده مرکزی برای مدیریت حساب‌های کاربری و مجوزهای دسترسی استفاده کنند و بدین ترتیب، پروسه‌های امنیتی و احراز هویت را استانداردسازی و تسهیل کنند.
  5. احراز هویت از طریق OAuth:
    • یکی دیگر از روش‌های افزایش امنیت در Jitsi برای سازمان‌ها، استفاده از OAuth است که به کاربران این امکان را می‌دهد تا از حساب‌های موجود خود در سرویس‌های دیگر مانند Google، Microsoft، یا GitHub برای ورود به سیستم استفاده کنند.
    • این روش به‌ویژه برای سازمان‌هایی که از خدمات ابری برای مدیریت حساب‌ها و اطلاعات کاربران خود استفاده می‌کنند مفید است، زیرا به‌طور یکپارچه از این سیستم‌های احراز هویت برای مدیریت دسترسی‌ها استفاده می‌شود.
  6. ایجاد محدودیت‌های دسترسی برای جلسات خاص:
    • در محیط‌های سازمانی، همچنین می‌توان محدودیت‌هایی را برای دسترسی به جلسات خاص اعمال کرد. برای مثال، با استفاده از URLهای اختصاصی و کدهای دعوت، می‌توان دسترسی به جلسات را فقط به کاربران خاصی محدود کرد.
    • در این سناریو، تنها کاربران دعوت‌شده یا کاربرانی که دارای کد تأییدیه هستند، قادر به پیوستن به جلسه خواهند بود.
  7. آمار و گزارش‌های امنیتی:
    • در برخی نسخه‌های سازمانی Jitsi، می‌توان قابلیت گزارش‌گیری و آمار امنیتی را فعال کرد. این قابلیت به مدیران سیستم اجازه می‌دهد تا ورودهای مشکوک و فعالیت‌های غیرمجاز را شناسایی کنند و اقدامات لازم را انجام دهند.
جمع بندی

در نسخه‌های سازمانی Jitsi، برای تأمین امنیت بیشتر و جلوگیری از دسترسی‌های غیرمجاز به جلسات و داده‌های حساس، استفاده از لایه‌های اضافی احراز هویت ضروری است. از احراز هویت دو مرحله‌ای (2FA) گرفته تا اتصال به سیستم‌های احراز هویت متمرکز مانند LDAP و Active Directory، هرکدام می‌توانند به تقویت امنیت ارتباطات ویدئویی در سازمان‌ها کمک کنند. با پیاده‌سازی این لایه‌های اضافی، سازمان‌ها می‌توانند از امنیت بالاتر و کنترل دقیق‌تری بر دسترسی‌های کاربران خود برخوردار شوند.

 [/cdb_course_lesson][/cdb_course_lessons]

[cdb_course_lessons title=”بخش 2. آشنایی با Jitsi Meet”][cdb_course_lesson title=”فصل 1. معرفی Jitsi Meet”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تعریف Jitsi Meet و تفاوت آن با Jitsi Videobridge و Jicofo” subtitle=”توضیحات کامل”]Jitsi یک مجموعه نرم‌افزاری متن‌باز برای ارتباطات ویدیویی است که به‌طور خاص در محیط‌های گروهی، کنفرانس‌ها، و جلسات ویدیویی آنلاین کاربرد دارد. Jitsi Meet، Jitsi Videobridge و Jicofo اجزای اصلی این مجموعه هستند که هرکدام نقش خاص خود را در فرآیند ارتباطات ویدیویی ایفا می‌کنند. در این بخش، به‌طور دقیق‌تری به معرفی هر یک از این اجزا و تفاوت‌های آن‌ها می‌پردازیم.

Jitsi Meet

Jitsi Meet یک برنامه کاربردی برای برگزاری کنفرانس‌های ویدیویی است که از طریق مرورگر وب قابل دسترسی است. این ابزار به کاربران اجازه می‌دهد تا جلسات ویدیویی گروهی را با کیفیت بالا برگزار کنند و به‌راحتی می‌توان آن را به سیستم‌های دیگر یکپارچه کرد. Jitsi Meet به‌طور ویژه برای تجربه کاربری ساده و بدون نیاز به نصب برنامه طراحی شده است. ویژگی‌های این ابزار شامل موارد زیر است:

  • امکان دسترسی از طریق مرورگر: برای استفاده از Jitsi Meet، کاربران نیازی به نصب نرم‌افزار ندارند و می‌توانند از هر دستگاهی با مرورگر وب به جلسه بپیوندند.
  • اشتراک‌گذاری صفحه و محتوا: کاربران می‌توانند صفحه خود را به اشتراک بگذارند و از آن برای نمایش اسناد، پرزنتیشن‌ها، یا اپلیکیشن‌ها استفاده کنند.
  • حضور ویدیو و صوتی: Jitsi Meet امکان برقراری ارتباط صوتی و ویدیویی با کیفیت بالا را فراهم می‌آورد.
  • امنیت: تمامی ارتباطات در Jitsi Meet از طریق رمزنگاری TLS و DTLS-SRTP انجام می‌شود.
Jitsi Videobridge

Jitsi Videobridge یک سرور است که وظیفه مدیریت و روت کردن رسانه‌های ویدیویی را در کنفرانس‌های ویدیویی بر عهده دارد. این سرور، ارتباطات بین شرکت‌کنندگان را به‌صورت بسیار مقیاس‌پذیر مدیریت می‌کند. برخلاف سایر پلتفرم‌های کنفرانس ویدیویی که به هر کاربر یک کانال مستقل از هم تخصیص می‌دهند، Jitsi Videobridge از تکنیک Selective Forwarding Unit (SFU) استفاده می‌کند. این روش باعث می‌شود که تنها ویدیوهای ارسال‌شده از سوی یک کاربر به دیگران ارسال شود، که این کار به‌ویژه در جلسات بزرگ بسیار کارآمد است. ویژگی‌های Jitsi Videobridge عبارتند از:

  • مقیاس‌پذیری بالا: Jitsi Videobridge به‌صورت کارآمد و با مصرف منابع پایین می‌تواند جلسات بزرگ را مدیریت کند.
  • انتقال ویدیو به‌صورت انتخابی: به‌جای ارسال تمام ویدیوهای جلسه به هر کاربر، فقط ویدیوهایی که کاربر به آن‌ها نیاز دارد ارسال می‌شود.
  • پشتیبانی از چندین کاربر و شرکت‌کننده: این ویژگی به‌ویژه برای کنفرانس‌های ویدیویی با تعداد شرکت‌کنندگان زیاد بسیار مفید است.
Jicofo

Jicofo (Jitsi Conference Focus) یک سرویس است که مدیریت جلسات را بر عهده دارد و نقش “تمرکزگر” (Focus) را در کنفرانس‌های ویدیویی ایفا می‌کند. این سرویس به‌طور ویژه وظیفه مدیریت جلسه، انتخاب ویدیوبرج (Videobridge) مناسب برای هر کنفرانس و اطمینان از هم‌زمانی و هماهنگی شرکت‌کنندگان را انجام می‌دهد. Jicofo به‌عنوان “مسئول جلسه” عمل کرده و به کاربران کمک می‌کند تا با یکدیگر ارتباط برقرار کنند. ویژگی‌های اصلی Jicofo عبارتند از:

  • مدیریت جلسات و کنفرانس‌ها: Jicofo نقش مدیریت و هماهنگی کنفرانس‌های ویدیویی را بر عهده دارد.
  • اتصال و هماهنگی با Jitsi Videobridge: Jicofo از طریق انتخاب و مدیریت Videobridge مناسب، برای هر جلسه، به بهینه‌سازی تجربه کاربری کمک می‌کند.
  • احراز هویت و مدیریت دسترسی: این سرویس به مدیران سیستم اجازه می‌دهد تا از احراز هویت کاربران و کنترل دسترسی به جلسات استفاده کنند.
تفاوت‌های اصلی بین Jitsi Meet، Jitsi Videobridge و Jicofo
  1. Jitsi Meet:
    • کاربرد: رابط کاربری برای برگزاری جلسات ویدیویی آنلاین.
    • ویژگی‌ها: ارائه امکانات اشتراک‌گذاری ویدیو، صوت، صفحه نمایش، و چت در یک محیط ساده.
    • نحوه عملکرد: به‌عنوان سرویس کلاینت عمل می‌کند که از طریق مرورگر به کنفرانس‌های ویدیویی متصل می‌شود.
  2. Jitsi Videobridge:
    • کاربرد: سرور برای مدیریت و روت کردن رسانه‌های ویدیویی در جلسات.
    • ویژگی‌ها: استفاده از SFU برای مدیریت مقیاس‌پذیر و انتقال ویدیو به‌صورت انتخابی.
    • نحوه عملکرد: ویدیوها را بین کاربران ارسال کرده و تنها ویدیوهایی که برای کاربران ضروری است را به آن‌ها ارسال می‌کند.
  3. Jicofo:
    • کاربرد: سرور برای مدیریت و هماهنگی جلسات ویدیویی.
    • ویژگی‌ها: مدیریت ارتباطات میان Jitsi Meet و Jitsi Videobridge و همچنین مدیریت فرآیندهای احراز هویت و دسترسی.
    • نحوه عملکرد: هماهنگ‌کننده جلسات و متصل‌کننده به Videobridge مناسب برای هر جلسه.
جمع‌بندی

Jitsi Meet، Jitsi Videobridge و Jicofo اجزای مختلفی از سیستم Jitsi هستند که به‌طور هماهنگ برای ایجاد تجربه‌ای یکپارچه و مقیاس‌پذیر در کنفرانس‌های ویدیویی آنلاین عمل می‌کنند. Jitsi Meet به‌عنوان رابط کاربری برای شرکت‌کنندگان، Jitsi Videobridge به‌عنوان سرور رسانه‌ای برای مدیریت ویدیوها و Jicofo به‌عنوان سرویس مدیریت کنفرانس‌ها و هماهنگی جلسات عمل می‌کند. تفاوت اصلی این اجزا در نقش‌هایی است که در ایجاد، مدیریت و برقراری ارتباطات ویدیویی دارند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”کاربردهای Jitsi Meet در پروژه‌های سازمانی و عمومی” subtitle=”توضیحات کامل”]Jitsi Meet به‌عنوان یک پلتفرم متن‌باز و مقیاس‌پذیر برای ارتباطات ویدیویی، کاربردهای فراوانی در پروژه‌های سازمانی و عمومی دارد. این پلتفرم با ارائه ویژگی‌هایی چون امنیت بالا، مقیاس‌پذیری، و امکان استفاده بدون نیاز به نصب نرم‌افزار، به یکی از گزینه‌های محبوب در محیط‌های مختلف تبدیل شده است. در این بخش، به کاربردهای رایج Jitsi Meet در پروژه‌های سازمانی و عمومی خواهیم پرداخت.

کاربردهای Jitsi Meet در پروژه‌های سازمانی
  1. جلسات ویدئویی تیمی: در سازمان‌ها، جلسات ویدئویی برای تیم‌ها به‌منظور برقراری ارتباط موثر و همکاری بهینه بسیار ضروری است. Jitsi Meet به سازمان‌ها این امکان را می‌دهد که جلسات گروهی را به‌سادگی برگزار کنند. ویژگی‌هایی مانند اشتراک‌گذاری صفحه، چت متنی، و ویدیو با کیفیت بالا، این جلسات را به یک تجربه مفید تبدیل می‌کنند.
  2. پشتیبانی از کارکنان از راه دور: با رشد مدل‌های کاری از راه دور، بسیاری از سازمان‌ها برای ارتباط با کارکنان دورکار خود از پلتفرم‌های ویدئویی استفاده می‌کنند. Jitsi Meet به سازمان‌ها کمک می‌کند تا ارتباط مستمر با تیم‌های خود داشته باشند و از این طریق همکاری و بهره‌وری را در تیم‌های از راه دور افزایش دهند.
  3. آموزش و توسعه منابع انسانی: سازمان‌ها می‌توانند از Jitsi Meet برای برگزاری جلسات آموزشی آنلاین، کارگاه‌ها، و وبینارهای آموزشی برای کارکنان خود استفاده کنند. این پلتفرم امکان ایجاد کلاس‌های آنلاین، برگزاری سمینارها و تبادل اطلاعات بین کارکنان و مدیران را فراهم می‌آورد.
  4. مدیریت پروژه‌ها و ارتباط با مشتریان: از آنجایی که پروژه‌های سازمانی معمولاً نیاز به ارتباطات منظم با مشتریان دارند، Jitsi Meet می‌تواند به‌عنوان یک ابزار ارتباطی بین تیم‌های پروژه و مشتریان استفاده شود. برگزاری جلسات ویدئویی با مشتریان برای مرور پیشرفت پروژه و انجام مشاوره‌ها و ارزیابی‌ها می‌تواند به بهبود رابطه با مشتریان کمک کند.
  5. پشتیبانی فنی و سرویس‌دهی به مشتریان: در برخی سازمان‌ها، برای پشتیبانی از مشتریان از راه دور، نیاز به ارتباط تصویری با کاربران وجود دارد. Jitsi Meet به سازمان‌ها کمک می‌کند تا به‌راحتی و با امنیت بالا از این قابلیت استفاده کنند.
کاربردهای Jitsi Meet در پروژه‌های عمومی
  1. کنفرانس‌های ویدئویی عمومی: Jitsi Meet یک انتخاب عالی برای برگزاری کنفرانس‌های ویدئویی عمومی است. به‌عنوان یک پلتفرم متن‌باز، این ابزار به افراد و گروه‌ها این امکان را می‌دهد که جلسات ویدئویی را برگزار کرده و در آن‌ها شرکت کنند. این ویژگی می‌تواند برای رویدادهای عمومی یا انجمن‌های آنلاین مفید باشد.
  2. پلتفرم‌های یادگیری آنلاین: Jitsi Meet برای آموزش آنلاین در سطح عمومی کاربرد زیادی دارد. مدارس، دانشگاه‌ها، و موسسات آموزشی می‌توانند از این پلتفرم برای برگزاری کلاس‌ها و جلسات آموزشی آنلاین استفاده کنند. با قابلیت‌هایی مانند اشتراک‌گذاری صفحه، چت ویدیویی، و امکان ضبط جلسات، این پلتفرم یک ابزار قدرتمند برای یادگیری آنلاین است.
  3. وبینارها و سمینارهای آنلاین: بسیاری از سازمان‌ها و افراد برای برگزاری وبینارها و سمینارهای آنلاین از Jitsi Meet استفاده می‌کنند. این پلتفرم به‌طور رایگان و با استفاده از سرورهای داخلی یا عمومی امکان برگزاری این نوع جلسات را به‌راحتی فراهم می‌کند.
  4. جلسات دوستانه و ملاقات‌های خانوادگی: برای افرادی که از راه دور می‌خواهند با خانواده یا دوستان خود ارتباط برقرار کنند، Jitsi Meet به‌عنوان یک ابزار رایگان و ساده برای جلسات ویدئویی استفاده می‌شود. امکان برگزاری جلسات بدون نیاز به نصب نرم‌افزار و با کیفیت ویدیو و صدا، این پلتفرم را به انتخابی محبوب تبدیل کرده است.
  5. فعالیت‌های اجتماعی و همایش‌ها: این پلتفرم می‌تواند برای برگزاری رویدادهای اجتماعی آنلاین، همایش‌ها، و جلسات گروهی عمومی مانند انجمن‌های حمایت از حقوق بشر، کنفرانس‌های اجتماعی، یا رویدادهای مذهبی استفاده شود. ویژگی‌های کاربردی Jitsi Meet مانند قابلیت ضبط جلسات و اشتراک‌گذاری فایل‌ها آن را به انتخابی مناسب برای رویدادهای بزرگ عمومی تبدیل می‌کند.
جمع‌بندی

Jitsi Meet به‌عنوان یک پلتفرم ویدیویی مقیاس‌پذیر و رایگان، کاربردهای گسترده‌ای در پروژه‌های سازمانی و عمومی دارد. از جلسات تیمی و پشتیبانی از کارکنان از راه دور گرفته تا برگزاری وبینارها و سمینارهای عمومی، این ابزار به‌خوبی می‌تواند نیازهای ارتباطی و آموزشی را پوشش دهد. ویژگی‌هایی چون امنیت بالا، امکان اشتراک‌گذاری محتوا، و دسترسی از طریق مرورگر، Jitsi Meet را به ابزاری مفید و کاربردی در زمینه‌های مختلف تبدیل کرده است.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”معماری Jitsi Meet در مقایسه با دیگر پلتفرم‌ها (Zoom, Webex, BBB)” subtitle=”توضیحات کامل”]Jitsi Meet به‌عنوان یک پلتفرم ویدیویی متن‌باز و مقیاس‌پذیر، ویژگی‌های منحصر به‌فردی دارد که آن را از دیگر پلتفرم‌های ویدیویی مانند Zoom، Webex، و BigBlueButton (BBB) متمایز می‌کند. در این بخش، به مقایسه معماری Jitsi Meet با این پلتفرم‌ها خواهیم پرداخت.

۱. Jitsi Meet

Jitsi Meet یک پلتفرم ویدیویی متن‌باز است که امکان برگزاری کنفرانس‌های ویدیویی را به‌طور رایگان فراهم می‌کند. معماری Jitsi Meet بر اساس چندین مولفه مختلف ساخته شده است:

  • Jitsi Videobridge: این مولفه به‌عنوان سرور میانه عمل می‌کند و ویدئوها را به‌صورت جداگانه برای هر شرکت‌کننده ارسال می‌کند. این ویژگی باعث کاهش بار سرور و بهبود عملکرد می‌شود.
  • Jicofo: این مولفه مدیریت جلسات را انجام می‌دهد و به‌عنوان یک کنترل‌کننده جلسه عمل می‌کند. Jicofo اتصال‌ها و مدیریت منابع بین شرکت‌کنندگان و Videobridge را انجام می‌دهد.
  • Jitsi Meet (کلاینت): این بخش شامل رابط کاربری برای شرکت‌کنندگان است که امکان برقراری ویدیو، چت، و اشتراک‌گذاری صفحه را فراهم می‌آورد.

Jitsi Meet به‌طور ویژه برای افرادی که می‌خواهند کنترل کامل بر سرورهای خود داشته باشند، مناسب است، زیرا امکان نصب و پیکربندی آن بر روی سرورهای خود فراهم است. این ویژگی به سازمان‌ها اجازه می‌دهد تا پیکربندی دقیق و امنیت مطلوبی داشته باشند.

۲. Zoom

Zoom یکی از شناخته‌شده‌ترین پلتفرم‌های ویدیو کنفرانس است که عمدتاً از مدل client-server برای برقراری ارتباط استفاده می‌کند. معماری آن به‌طور کلی شامل موارد زیر است:

  • Zoom Servers: Zoom به‌عنوان یک سرویس ابری عمل می‌کند که سرورهای آن مدیریت تمام داده‌ها و ارتباطات بین کاربران را انجام می‌دهند. در این مدل، تمام پردازش‌های ویدیویی و صوتی بر روی سرورهای Zoom انجام می‌شود.
  • Zoom Client: هر کاربر از یک کلاینت برای اتصال به جلسات استفاده می‌کند. این کلاینت‌ها می‌توانند برای دسکتاپ یا موبایل باشند.

معماری Zoom برخلاف Jitsi Meet که متن‌باز و قابل تنظیم است، بیشتر بر روی سرورهای ابری متمرکز است. این مدل برای کاربران عمومی مناسب است، زیرا نیازی به تنظیمات پیچیده ندارد، ولی این امر همچنین به‌معنای کنترل کمتر روی داده‌ها و تنظیمات است.

۳. Webex

Webex یکی دیگر از پلتفرم‌های بزرگ ویدیویی است که معماری مشابه با Zoom دارد. این پلتفرم به‌عنوان یک سرویس ابری عمل می‌کند:

  • Webex Servers: تمام پردازش‌ها و ارتباطات از طریق سرورهای ابری Webex انجام می‌شود. Webex سرورهایی در مناطق مختلف جغرافیایی دارد که بارگذاری و کیفیت ارتباط را بهینه می‌کند.
  • Webex Client: کاربران از طریق کلاینت‌های دسکتاپ یا موبایل به جلسات متصل می‌شوند.

Webex نیز مانند Zoom، به‌طور عمده برای کاربران عمومی و کسب‌وکارهای بزرگ طراحی شده است و تنظیمات پیچیده‌تری در مقایسه با Jitsi Meet ندارد. همچنین مانند Zoom، کنترل زیادی بر روی تنظیمات سرور ندارد و بیشتر در محیط‌های ابری مدیریت می‌شود.

۴. BigBlueButton (BBB)

BigBlueButton پلتفرم دیگری است که به‌طور ویژه برای استفاده در محیط‌های آموزشی آنلاین طراحی شده است. معماری BBB به‌طور مشابه با Jitsi Meet است، اما تفاوت‌هایی در ویژگی‌ها و نحوه مدیریت جلسات دارد:

  • BigBlueButton Server: مانند Jitsi Meet، BigBlueButton از سرورهای خود برای پردازش ویدیوها و مدیریت جلسات استفاده می‌کند. با این حال، BigBlueButton بیشتر برای محیط‌های آموزشی بهینه‌سازی شده و از ابزارهای خاصی مانند تخته‌سفید (whiteboard) و اشتراک‌گذاری صفحه به‌صورت پیش‌فرض پشتیبانی می‌کند.
  • BigBlueButton Client: این بخش شامل رابط کاربری است که شرکت‌کنندگان می‌توانند برای ارتباط ویدئویی، چت و تعامل با مواد آموزشی از آن استفاده کنند.

BigBlueButton به‌طور عمده در دانشگاه‌ها و محیط‌های آموزشی استفاده می‌شود و مشابه Jitsi Meet می‌تواند به‌صورت متن‌باز نصب و پیکربندی شود. اما BBB بیشتر بر نیازهای آموزشی تمرکز دارد و برخی ویژگی‌های خاص مانند آزمون‌ها و ارزیابی‌ها را در خود جای داده است.

مقایسه کلی معماری
ویژگی Jitsi Meet Zoom Webex BigBlueButton
مدل معماری متن‌باز، چندسروری (Client-Server) سرویس ابری (Client-Server) سرویس ابری (Client-Server) متن‌باز، چندسروری (Client-Server)
سرور ویدیو Jitsi Videobridge Zoom Servers Webex Servers BigBlueButton Server
مدیریت جلسات Jicofo Zoom Servers Webex Servers BigBlueButton Server
قابلیت‌های اضافی مناسب برای سرورهای خصوصی خدمات ابری و پشتیبانی از شرکت‌های بزرگ خدمات ابری برای کسب‌وکارهای بزرگ مناسب برای محیط‌های آموزشی با ابزارهای خاص
قابلیت نصب روی سرور شخصی بله خیر خیر بله
امنیت رمزنگاری TLS و DTLS-SRTP رمزنگاری با سرورهای ابری رمزنگاری با سرورهای ابری رمزنگاری با سرورهای ابری
جمع‌بندی

در نهایت، انتخاب بین Jitsi Meet و سایر پلتفرم‌ها (Zoom، Webex، BBB) بستگی به نیازهای خاص پروژه یا سازمان دارد. Jitsi Meet به‌عنوان یک پلتفرم متن‌باز و مقیاس‌پذیر، برای سازمان‌هایی که نیاز به کنترل و سفارشی‌سازی دقیق بر روی سرورهای خود دارند، بسیار مناسب است. در حالی که Zoom و Webex بیشتر بر روی خدمات ابری و مدیریت آسان جلسات برای کاربران عمومی تمرکز دارند. BigBlueButton نیز به‌عنوان یک گزینه عالی برای محیط‌های آموزشی طراحی شده است و ویژگی‌های خاص آموزشی را در خود جای داده است.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 2. اجزای اصلی Jitsi Meet”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Jitsi Videobridge” subtitle=”توضیحات کامل”]Jitsi Videobridge یکی از اجزای حیاتی و اصلی پلتفرم Jitsi Meet است که برای پردازش و مدیریت ویدیوها در جلسات ویدیویی استفاده می‌شود. وظیفه اصلی Videobridge، انتقال ویدیوها بین شرکت‌کنندگان مختلف در یک جلسه است. برخلاف برخی از پلتفرم‌های ویدیویی دیگر که ویدیو را به‌طور مرکزی از یک سرور به تمام شرکت‌کنندگان ارسال می‌کنند، Jitsi Videobridge از رویکرد “Selective Forwarding Unit” (SFU) استفاده می‌کند. این بدین معناست که ویدیو به‌طور جداگانه برای هر شرکت‌کننده ارسال می‌شود تا مصرف پهنای باند بهینه‌تر و کیفیت بهتری حاصل شود.

عملکرد Jitsi Videobridge:
  • انتقال ویدیو: Videobridge ویدیوها را از هر شرکت‌کننده دریافت کرده و آن‌ها را به دیگر شرکت‌کنندگان ارسال می‌کند. این امر باعث می‌شود که مصرف پهنای باند به‌طور موثر و یکنواخت بین همه کاربران تقسیم شود.
  • استفاده از پروتکل DTLS-SRTP: برای تضمین امنیت ارتباطات ویدیویی، Videobridge از پروتکل‌های رمزنگاری مثل DTLS-SRTP (Datagram Transport Layer Security – Secure Real-time Transport Protocol) استفاده می‌کند.
  • مقیاس‌پذیری: Jitsi Videobridge می‌تواند با اضافه شدن سرورهای بیشتری مقیاس‌پذیری بالایی داشته باشد و به‌طور موثر با تعداد زیادی از شرکت‌کنندگان برخورد کند. این امر باعث می‌شود که Jitsi Meet برای جلسات بزرگ نیز مناسب باشد.
  • کاهش بار سرور: با استفاده از SFU، Jitsi Videobridge بار سرور مرکزی را کاهش می‌دهد و به‌جای ارسال ویدیو به یک سرور مرکزی، از هر کاربر ویدیو را به‌طور مستقیم برای دیگران ارسال می‌کند.
اجزای دیگر مرتبط با Jitsi Videobridge:
  • Jicofo: Jicofo، که مخفف “Jitsi Conference Focus” است، یکی دیگر از اجزای مهم در پلتفرم Jitsi Meet است که مدیریت جلسات را بر عهده دارد. Jicofo نقش هماهنگ‌کننده را ایفا می‌کند و به‌طور مستقیم با Jitsi Videobridge ارتباط دارد. این مولفه وظیفه ایجاد و مدیریت نشست‌ها و تخصیص منابع را بر عهده دارد.
  • Jitsi Meet Web Client: این بخش شامل رابط کاربری است که کاربران برای برقراری جلسات ویدیویی به آن متصل می‌شوند. این کلاینت از طریق مرورگر و بدون نیاز به نصب نرم‌افزار اضافی می‌تواند جلسات را برگزار کند.
  • XMPP: پروتکل XMPP (Extensible Messaging and Presence Protocol) برای مدیریت ارتباطات سیگنالینگ در Jitsi Meet استفاده می‌شود. XMPP وظیفه ارسال پیام‌ها، سیگنالینگ و مدیریت جلسات را بر عهده دارد.
مزایای استفاده از Jitsi Videobridge:
  • کاهش مصرف پهنای باند: به دلیل استفاده از رویکرد SFU، Jitsi Videobridge می‌تواند مصرف پهنای باند را در مقایسه با سایر پلتفرم‌های ویدیویی که از مدل MCU (Multipoint Control Unit) استفاده می‌کنند، به‌طور چشمگیری کاهش دهد.
  • پشتیبانی از تعداد بالای کاربران: این ویژگی باعث می‌شود که Jitsi Meet حتی در جلسات با تعداد بالا از کاربران نیز کارایی مطلوبی داشته باشد.
  • استقلال از سرورهای ابری: با استفاده از Videobridge، امکان میزبانی Jitsi Meet بر روی سرورهای خصوصی فراهم می‌شود، که به سازمان‌ها اجازه می‌دهد امنیت و کنترل بیشتری بر داده‌های خود داشته باشند.
جمع‌بندی

Jitsi Videobridge یکی از اجزای کلیدی پلتفرم Jitsi Meet است که برای مدیریت و ارسال ویدیوهای کنفرانس ویدیویی استفاده می‌شود. این سرویس با استفاده از تکنولوژی SFU مصرف پهنای باند را بهینه کرده و مقیاس‌پذیری بالایی را فراهم می‌آورد. Jitsi Videobridge در ترکیب با سایر اجزای پلتفرم مانند Jicofo و XMPP، عملکرد بسیار بالایی را در برگزاری جلسات ویدیویی با کیفیت فراهم می‌کند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Jicofo (Jitsi Conference Focus)” subtitle=”توضیحات کامل”]Jicofo، که مخفف “Jitsi Conference Focus” است، یکی از اجزای اصلی در پلتفرم Jitsi Meet محسوب می‌شود. این سرویس نقش هماهنگ‌کننده را در جلسات ویدیویی ایفا می‌کند و به‌طور مستقیم با سایر اجزای سیستم مانند Jitsi Videobridge و XMPP ارتباط دارد.

نقش و عملکرد Jicofo در Jitsi Meet

Jicofo به‌عنوان هماهنگ‌کننده اصلی جلسه، وظایف مختلفی را در مدیریت و بهینه‌سازی تجربه جلسات ویدیویی بر عهده دارد. این سرویس فرآیندهای مختلف مربوط به مدیریت کنفرانس، از جمله ایجاد، تخصیص منابع و برقراری ارتباطات سیگنالینگ، را انجام می‌دهد.

وظایف اصلی Jicofo:
  • مدیریت جلسات ویدیویی: Jicofo مسئول ایجاد و مدیریت جلسات ویدیویی است. وقتی یک کاربر وارد جلسه می‌شود یا جلسه جدیدی آغاز می‌شود، Jicofo منابع لازم را از Jitsi Videobridge درخواست کرده و آن‌ها را به شرکت‌کنندگان تخصیص می‌دهد.
  • برقراری ارتباط با Jitsi Videobridge: Jicofo به‌عنوان واسطه بین کاربران و Jitsi Videobridge عمل می‌کند. این سرویس از طریق XMPP با Videobridge ارتباط برقرار کرده و دستورات لازم را برای تخصیص و مدیریت ویدیوها به آن ارسال می‌کند.
  • سیگنالینگ و مدیریت تماس‌ها: Jicofo مسئول مدیریت فرآیند سیگنالینگ است. این یعنی فرآیندهای مربوط به شروع و پایان تماس‌ها، پذیرفتن درخواست‌های ورود به جلسه و اطلاع‌رسانی وضعیت جلسه به کاربران را انجام می‌دهد.
  • مدیریت ظرفیت و مقیاس‌پذیری: Jicofo برای مقیاس‌پذیری سیستم و عملکرد بهینه در شرایط مختلف، ظرفیت جلسات را مدیریت می‌کند. اگر جلسه‌ای تعداد زیادی شرکت‌کننده داشته باشد، Jicofo به‌طور خودکار و با توجه به ظرفیت، منابع بیشتری از Videobridge درخواست می‌کند.
  • پشتیبانی از ویژگی‌های پیشرفته: برخی از ویژگی‌های پیشرفته مانند انتخاب نمای ویدیو، مدیریت کیفیت ویدیو در ارتباطات مختلف و ویژگی‌های اتصال خصوصی (مثل E2EE) نیز توسط Jicofo مدیریت می‌شوند.
نحوه ارتباط Jicofo با سایر اجزا:
  • Jitsi Videobridge: همانطور که اشاره شد، Jicofo به‌طور مستقیم با Jitsi Videobridge ارتباط دارد و منابع ویدیو را از آن درخواست می‌کند. این ارتباط از طریق پروتکل XMPP انجام می‌شود.
  • XMPP: Jicofo به‌عنوان یک سرویس سیگنالینگ عمل می‌کند و از XMPP برای مدیریت وضعیت و ارتباطات بین کاربران استفاده می‌کند.
  • Jitsi Meet Web Client: از طریق رابط کاربری Jitsi Meet، کاربران می‌توانند به جلسات وارد شوند و تعاملات خود را انجام دهند. Jicofo با مدیریت نشست‌ها و فرآیندهای سیگنالینگ، از این درخواست‌ها پشتیبانی می‌کند.
مزایای استفاده از Jicofo
  • مقیاس‌پذیری بالا: Jicofo امکان مدیریت کنفرانس‌های ویدیویی با تعداد بالا از کاربران را فراهم می‌آورد و با هماهنگی منابع، از ایجاد اختلال در عملکرد جلوگیری می‌کند.
  • مدیریت خودکار منابع: با توجه به تعداد شرکت‌کنندگان، Jicofo به‌طور خودکار منابع لازم را از Videobridge درخواست کرده و تخصیص می‌دهد. این ویژگی باعث می‌شود که تجربه کاربری با کیفیت بالا و بدون مشکل پهنای باند همراه باشد.
  • انعطاف‌پذیری در تنظیمات: Jicofo از ویژگی‌های مختلفی مانند رمزنگاری E2EE پشتیبانی می‌کند و می‌تواند تنظیمات پیشرفته امنیتی را مدیریت کند.
جمع‌بندی

Jicofo یک سرویس ضروری در پلتفرم Jitsi Meet است که وظیفه هماهنگی و مدیریت جلسات ویدیویی را بر عهده دارد. این سرویس با برقراری ارتباط با Jitsi Videobridge و مدیریت منابع، سیگنالینگ و کیفیت ارتباطات، تجربه کاربری بهینه‌ای را برای جلسات ویدیویی فراهم می‌آورد. همچنین، Jicofo مقیاس‌پذیری بالا و پشتیبانی از ویژگی‌های امنیتی پیشرفته را به Jitsi Meet می‌افزاید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Prosody (XMPP Server)” subtitle=”توضیحات کامل”]Prosody یک سرور XMPP است که در پلتفرم Jitsi برای مدیریت پروتکل سیگنالینگ استفاده می‌شود. این سرور XMPP (Extensible Messaging and Presence Protocol) برای ارسال پیام‌ها، اطلاعات وضعیت و ارتباطات کنفرانسی بین کاربران و سرویس‌های مختلف Jitsi به‌کار می‌رود.

نقش و عملکرد Prosody در Jitsi Meet

Prosody به‌عنوان سرور سیگنالینگ در Jitsi Meet عمل می‌کند. در واقع، این سرور وظیفه پردازش و مدیریت پیام‌های سیگنالینگ بین اجزای مختلف پلتفرم Jitsi را بر عهده دارد. از طریق XMPP، Prosody ارتباطات وضعیت آنلاین/offline کاربران، پیام‌های دعوت به جلسات، و سایر داده‌های ضروری برای برقراری کنفرانس‌ها و تماس‌های ویدیویی را مدیریت می‌کند.

وظایف اصلی Prosody:
  • مدیریت اتصال کاربران: Prosody به‌عنوان سرور XMPP مسئولیت پذیرش و مدیریت اتصالات کاربران را بر عهده دارد. این سرور به درخواست‌های اتصال از سوی کاربران پاسخ داده و آن‌ها را به سایر اجزا متصل می‌کند.
  • سیگنالینگ جلسه: در جریان هر تماس ویدیویی، Prosody پیام‌های سیگنالینگ مربوط به وضعیت تماس (مانند ایجاد، پذیرفتن یا پایان دادن به تماس) را ارسال و دریافت می‌کند.
  • مدیریت اتصالات گروهی و پیام‌ها: در صورتی که یک کنفرانس گروهی برگزار شود، Prosody پیام‌های مربوط به وضعیت کاربران (مانند ورود یا خروج از جلسه) را مدیریت می‌کند. همچنین، پیام‌های متنی که در جلسه ارسال می‌شوند نیز از طریق Prosody منتقل می‌شوند.
  • پشتیبانی از ویژگی‌های متعدد XMPP: Prosody از تمام ویژگی‌های پروتکل XMPP پشتیبانی می‌کند، از جمله ارسال پیام‌های متنی، مدیریت وضعیت کاربران، و تعاملات پیچیده‌تر مثل ارسال درخواست‌های جلسه و تغییرات در وضعیت تماس.
  • پشتیبانی از امنیت و احراز هویت: Prosody از قابلیت‌های مختلفی مانند احراز هویت و رمزنگاری پیام‌ها پشتیبانی می‌کند که باعث ارتقاء امنیت در برقراری تماس‌ها و جلسات می‌شود.
نحوه ارتباط Prosody با سایر اجزا:
  • Jicofo: Prosody با Jicofo در ارتباط است تا سیگنال‌های مربوط به وضعیت جلسه را ارسال و دریافت کند. Jicofo از این سیگنال‌ها برای مدیریت جلسه و برقراری ارتباط با Jitsi Videobridge استفاده می‌کند.
  • Jitsi Videobridge: در حالی که Prosody ارتباطات سیگنالینگ را مدیریت می‌کند، Jitsi Videobridge ویدیوها و ارتباطات چندرسانه‌ای را پردازش می‌کند. این ارتباطات معمولاً از طریق Jicofo انجام می‌شود.
  • Jitsi Meet Web Client: رابط کاربری Jitsi Meet با Prosody ارتباط برقرار کرده و سیگنال‌های مربوط به ورود یا خروج کاربران و وضعیت جلسه را به سرور XMPP ارسال می‌کند.
مزایای استفاده از Prosody
  • سادگی و کارایی: Prosody به‌عنوان یک سرور XMPP سبک و سریع طراحی شده است که قابلیت مقیاس‌پذیری بالایی دارد. این ویژگی برای استفاده در پلتفرم‌های بزرگ مانند Jitsi که نیاز به مدیریت تعداد زیادی اتصال دارند، بسیار مهم است.
  • امنیت بالا: Prosody از قابلیت‌هایی مانند TLS برای رمزنگاری ارتباطات پشتیبانی می‌کند، که باعث افزایش امنیت در انتقال داده‌ها می‌شود.
  • پشتیبانی از XMPP استاندارد: Prosody به‌طور کامل از پروتکل XMPP پشتیبانی می‌کند که باعث می‌شود یک انتخاب ایده‌آل برای سیستم‌هایی باشد که نیاز به مقیاس‌پذیری، انعطاف‌پذیری و پشتیبانی از پیام‌رسانی و وضعیت‌های مختلف دارند.
جمع‌بندی

Prosody یک سرور XMPP است که به‌عنوان بخش کلیدی در پلتفرم Jitsi عمل می‌کند و مدیریت سیگنالینگ و ارتباطات میان اجزای مختلف این پلتفرم را بر عهده دارد. این سرور با پشتیبانی از ویژگی‌های پیشرفته XMPP، امکان برقراری ارتباطات مؤثر و امن بین کاربران و اجزای مختلف Jitsi Meet را فراهم می‌آورد. استفاده از Prosody باعث می‌شود که مدیریت اتصال و وضعیت کاربران، ارسال پیام‌های سیگنالینگ و ایجاد کنفرانس‌های ویدیویی به‌صورت مؤثر و ایمن انجام شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”Nginx (یا Apache برای روت HTTP)” subtitle=”توضیحات کامل”]در سیستم‌های مبتنی بر Jitsi Meet، از Nginx یا Apache برای مدیریت درخواست‌های HTTP استفاده می‌شود. این وب سرورها برای هدایت ترافیک ورودی، پیکربندی SSL، و مسیریابی درخواست‌ها به اجزای مختلف Jitsi استفاده می‌شوند. در این بخش، به بررسی نقش Nginx یا Apache در سیستم Jitsi و نحوه پیکربندی آن‌ها خواهیم پرداخت.

نقش Nginx یا Apache در Jitsi Meet
  1. مسیریابی درخواست‌ها: Nginx یا Apache به‌عنوان وب سرور اصلی، درخواست‌های HTTP ورودی را دریافت کرده و آن‌ها را به سرور مناسب هدایت می‌کند. این وب سرورها درخواست‌هایی که به Jitsi Meet (و سایر اجزای Jitsi) مربوط می‌شوند را به سرویس‌های مختلف مانند Prosody یا Jicofo ارسال می‌کنند.
  2. پیکربندی SSL: برای تأمین امنیت ارتباطات در Jitsi Meet، از SSL/TLS برای رمزنگاری ترافیک استفاده می‌شود. Nginx یا Apache به‌عنوان پروکسی معکوس وظیفه مدیریت گواهینامه‌های SSL را بر عهده دارند و ارتباطات امن را میان کاربران و سرور برقرار می‌کنند.
  3. پروکسی معکوس (Reverse Proxy): به‌عنوان پروکسی معکوس، Nginx یا Apache درخواست‌های ورودی HTTP را به سرورهای داخلی مانند Jitsi Videobridge یا Prosody هدایت می‌کنند. این امر به‌ویژه زمانی که سیستم در مقیاس بزرگ باشد و نیاز به مدیریت بار (Load Balancing) داشته باشد، اهمیت دارد.
  4. افزایش کارایی و مقیاس‌پذیری: Nginx به‌عنوان وب سرور سبک و مقیاس‌پذیر شناخته می‌شود و برای مدیریت حجم بالای درخواست‌های همزمان به‌ویژه در سیستم‌های ویدیویی مانند Jitsi بسیار مناسب است. Apache نیز به‌عنوان یک وب سرور پرکاربرد با ویژگی‌های متنوع خود می‌تواند برای همین هدف استفاده شود، اما Nginx به‌طور کلی عملکرد بهتری در مقیاس‌های بزرگ و بار زیاد دارد.
پیکربندی Nginx برای Jitsi Meet

در زیر یک پیکربندی ساده برای Nginx در جهت استفاده به‌عنوان پروکسی معکوس برای Jitsi Meet آورده شده است:

server {
    listen 80;
    server_name your-jitsi-domain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name your-jitsi-domain.com;

    ssl_certificate /etc/letsencrypt/live/your-jitsi-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-jitsi-domain.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256';

    location / {
        proxy_pass http://localhost:8000;  # یا آدرس IP و پورت مناسب
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
    }

    location /http-bind {
        proxy_pass http://localhost:5280/http-bind;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /focus {
        proxy_pass http://localhost:5222/focus;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /videobridge {
        proxy_pass http://localhost:10000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

این پیکربندی ساده شامل تنظیمات SSL برای ایمن کردن ارتباطات و هدایت درخواست‌ها به سرویس‌های داخلی Jitsi Meet است.

پیکربندی Apache برای Jitsi Meet

برای Apache، می‌توان از پیکربندی مشابه استفاده کرد که به‌عنوان پروکسی معکوس عمل می‌کند. یک پیکربندی پایه برای Apache به شرح زیر است:

<VirtualHost *:80>
    ServerName your-jitsi-domain.com
    Redirect permanent / https://your-jitsi-domain.com/
</VirtualHost>

<VirtualHost *:443>
    ServerName your-jitsi-domain.com

    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/your-jitsi-domain.com/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/your-jitsi-domain.com/privkey.pem
    SSLCACertificateFile /etc/letsencrypt/live/your-jitsi-domain.com/chain.pem

    ProxyPass / http://localhost:8000/
    ProxyPassReverse / http://localhost:8000/

    ProxyPass /http-bind http://localhost:5280/http-bind
    ProxyPassReverse /http-bind http://localhost:5280/http-bind

    ProxyPass /focus http://localhost:5222/focus
    ProxyPassReverse /focus http://localhost:5222/focus

    ProxyPass /videobridge http://localhost:10000
    ProxyPassReverse /videobridge http://localhost:10000
</VirtualHost>
جمع‌بندی

Nginx و Apache به‌عنوان وب سرورهای اصلی در جلب درخواست‌های HTTP، مدیریت بار، پیکربندی SSL و مسیریابی درخواست‌ها به سرویس‌های مختلف در پلتفرم Jitsi Meet استفاده می‌شوند. از آنجا که Nginx به‌دلیل عملکرد بهتر در مقیاس‌پذیری و کارایی بیشتر ترجیح داده می‌شود، انتخاب مناسبی برای استفاده در پلتفرم‌های بزرگ و پرحجم است. Apache نیز به‌عنوان گزینه دیگر می‌تواند برای همین هدف به‌کار گرفته شود، البته با توجه به ویژگی‌های متفاوت خود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نحوه ارتباط اجزا با یکدیگر در جریان یک تماس تصویری” subtitle=”توضیحات کامل”]در جریان یک تماس تصویری، اجزای مختلف Jitsi Meet به شکل هماهنگ با یکدیگر ارتباط برقرار می‌کنند تا یک تماس ویدئویی با کیفیت بالا و بدون تأخیر فراهم کنند. نحوه ارتباط این اجزا به شرح زیر است:

  1. اتصال به Jitsi Meet: کاربران ابتدا از طریق مرورگر خود به وب‌سایت Jitsi Meet متصل می‌شوند. این درخواست توسط وب سرور (Nginx یا Apache) مدیریت می‌شود و سپس به Jitsi Meet ارسال می‌گردد.
  2. احراز هویت از طریق Prosody: در صورتی که احراز هویت لازم باشد، Prosody به‌عنوان سرور XMPP پیام‌های احراز هویت را مدیریت می‌کند. Prosody اطلاعات حضور و وضعیت کاربران را نیز ذخیره می‌کند.
  3. مدیریت جلسات توسط Jicofo: پس از اتصال کاربران، Jicofo به‌عنوان مدیر جلسه به کار می‌افتد. این سرویس مسئول ایجاد و مدیریت جلسات ویدئویی است و به Jitsi Videobridge دستورات لازم برای شروع یا خاتمه جلسه را ارسال می‌کند.
  4. انتقال داده‌های ویدئویی از طریق Jitsi Videobridge: زمانی که جلسه شروع می‌شود، Jitsi Videobridge مسئولیت انتقال داده‌های صوتی و تصویری میان کاربران را بر عهده دارد. این سرور ویدیوها را از یک شرکت‌کننده دریافت کرده و آن‌ها را به سایرین منتقل می‌کند. Jitsi Videobridge از پروتکل‌های WebRTC برای انتقال داده‌ها استفاده می‌کند که باعث کاهش تأخیر و مصرف پهنای باند می‌شود.
  5. مدیریت اتصال‌ها و پیام‌ها: Prosody همچنان در پس‌زمینه پیام‌های حضور، درخواست‌ها و وضعیت‌ها را مدیریت می‌کند. به‌علاوه، در صورتی که پیام متنی از طرف کاربران ارسال شود، این پیام‌ها از طریق Prosody به دیگر کاربران منتقل می‌شود.
  6. دریافت داده‌ها و نمایش آن‌ها در Jitsi Meet: داده‌های صوتی و تصویری پس از پردازش توسط Jitsi Videobridge به‌صورت زنده به مرورگر کاربران منتقل می‌شود و آن‌ها می‌توانند ویدئوها و صداها را در پنل خود مشاهده کنند.

جمع‌بندی:

اجزای اصلی Jitsi Meet شامل Jitsi Meet (رابط کاربری)، Jitsi Videobridge (مدیریت ویدئو)، Jicofo (مدیریت جلسات)، Prosody (مدیریت پیام‌های XMPP) و Nginx/Apache (مدیریت درخواست‌های HTTP) هستند که به‌طور هماهنگ با یکدیگر کار می‌کنند تا تماس‌های ویدئویی پایدار و امن را فراهم آورند. در این سیستم، Jitsi Videobridge نقش اصلی در انتقال داده‌های ویدئویی را ایفا کرده و Jicofo، Prosody و وب سرورها در زمینه مدیریت اتصال‌ها و جلسات فعالیت می‌کنند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 3. نصب و راه‌اندازی Jitsi Meet (به‌صورت بسته نصبی)”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”آماده‌سازی سرور (Debian/Ubuntu)” subtitle=”توضیحات کامل”]برای نصب و راه‌اندازی Jitsi Meet به‌صورت بسته نصبی، ابتدا باید سرور شما برای نصب پیکربندی شود. در این بخش، مراحل آماده‌سازی سرور برای نصب Jitsi Meet را بررسی می‌کنیم. این مراحل به‌ویژه برای سیستم‌های Debian و Ubuntu مناسب هستند.

۱. به‌روزرسانی سیستم

قبل از هر چیزی، بهتر است که سیستم‌عامل خود را به‌روز کنید تا از جدیدترین بسته‌ها و پچ‌ها بهره‌مند شوید. برای این کار، دستورات زیر را وارد کنید:

sudo apt update && sudo apt upgrade -y

این دستور، لیست بسته‌ها را به‌روز کرده و بسته‌های موجود را ارتقاء می‌دهد.

۲. نصب پیش‌نیازها

Jitsi Meet به‌طور خاص به برخی از بسته‌های نرم‌افزاری برای عملکرد صحیح نیاز دارد. این بسته‌ها شامل نرم‌افزارهایی مانند curl، apt-transport-https و برخی کتابخانه‌ها می‌شوند. برای نصب این بسته‌ها، از دستور زیر استفاده کنید:

sudo apt install -y curl gnupg2 apt-transport-https

این بسته‌ها برای دانلود و نصب پکیج‌های دیگر از منابع خارجی و همچنین به‌روزرسانی‌های مورد نیاز کاربرد دارند.

۳. اضافه کردن مخزن Jitsi

برای نصب Jitsi Meet از مخزن رسمی Jitsi، ابتدا باید کلید GPG مخزن را وارد کنید و سپس مخزن را به سیستم اضافه نمایید. این کار از طریق دستورات زیر انجام می‌شود:

curl https://download.jitsi.org/jitsi-key.gpg.key | sudo apt-key add -

پس از وارد کردن کلید GPG، مخزن Jitsi را به لیست منابع سیستم اضافه می‌کنیم:

echo "deb https://download.jitsi.org stable/"/ | sudo tee /etc/apt/sources.list.d/jitsi-stable.list

این دستور به‌صورت خودکار مخزن Jitsi را به فهرست منابع APT شما اضافه می‌کند.

۴. به‌روزرسانی فهرست بسته‌ها

حال که مخزن جدید را به سیستم اضافه کرده‌ایم، باید فهرست بسته‌ها را به‌روزرسانی کنیم تا سیستم از این مخزن جدید اطلاع پیدا کند. برای این کار دستور زیر را وارد کنید:

sudo apt update

این دستور بسته‌های موجود در مخزن‌های جدید را شناسایی کرده و فهرست بسته‌های قابل نصب را به‌روز می‌کند.

۵. نصب پیش‌نیازهای سیستم

Jitsi Meet برای عملکرد صحیح به برخی بسته‌های اضافی نیاز دارد. برای نصب این بسته‌ها می‌توانید از دستور زیر استفاده کنید:

sudo apt install -y openjdk-11-jre-headless

این بسته، نسخه مناسب جاوا را نصب می‌کند که برای برخی از اجزای Jitsi Meet ضروری است.

جمع‌بندی

در این بخش، مراحل آماده‌سازی سرور برای نصب Jitsi Meet بررسی شد. این مراحل شامل به‌روزرسانی سیستم، نصب پیش‌نیازها، افزودن مخزن Jitsi، به‌روزرسانی فهرست بسته‌ها و نصب پیش‌نیازهای نرم‌افزاری بود. در درس بعدی، به مراحل دقیق نصب Jitsi Meet پرداخته خواهد شد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نصب Jitsi Meet با استفاده از Repository رسمی” subtitle=”توضیحات کامل”]در این بخش، مراحل نصب Jitsi Meet با استفاده از مخزن رسمی Jitsi را بررسی می‌کنیم. این روش ساده‌ترین و سریع‌ترین روش برای نصب Jitsi Meet بر روی سیستم‌های Debian و Ubuntu است.

۱. به‌روزرسانی سیستم

قبل از شروع نصب، بهتر است که سیستم خود را به‌روز کنید تا اطمینان حاصل کنید که بسته‌ها و پکیج‌های موجود به آخرین نسخه هستند. این کار به جلوگیری از بروز مشکلات احتمالی کمک می‌کند. برای این کار از دستور زیر استفاده کنید:

sudo apt update && sudo apt upgrade -y
۲. نصب پیش‌نیازها

قبل از اضافه کردن مخزن Jitsi به سیستم، لازم است که برخی از ابزارهای مورد نیاز برای اتصال به مخازن خارجی نصب شوند. برای این کار از دستور زیر استفاده کنید:

sudo apt install -y curl gnupg2 apt-transport-https

این بسته‌ها به شما کمک می‌کنند که بتوانید مخازن خارجی را به سیستم خود اضافه کنید و بسته‌های مورد نیاز را دانلود و نصب نمایید.

۳. اضافه کردن مخزن Jitsi

برای نصب Jitsi Meet از مخزن رسمی Jitsi، ابتدا باید کلید GPG مخزن را اضافه کنید. برای این کار دستور زیر را وارد کنید:

curl https://download.jitsi.org/jitsi-key.gpg.key | sudo apt-key add -

پس از اضافه کردن کلید GPG، مخزن Jitsi را به فهرست منابع سیستم اضافه می‌کنیم. این کار باعث می‌شود که سیستم به‌طور خودکار بتواند بسته‌های مورد نیاز Jitsi را از مخزن رسمی آن دانلود کند. برای اضافه کردن مخزن، از دستور زیر استفاده کنید:

echo "deb https://download.jitsi.org stable/" | sudo tee /etc/apt/sources.list.d/jitsi-stable.list
۴. به‌روزرسانی فهرست بسته‌ها

حالا که مخزن جدید را اضافه کردیم، باید فهرست بسته‌های موجود در سیستم خود را به‌روزرسانی کنیم تا سیستم از مخزن جدید اطلاع پیدا کند و بتواند بسته‌های Jitsi را شناسایی کند. برای این کار از دستور زیر استفاده کنید:

sudo apt update

این دستور فهرست بسته‌های موجود را به‌روزرسانی کرده و اطمینان حاصل می‌کند که بسته‌های Jitsi در دسترس سیستم قرار دارند.

۵. نصب Jitsi Meet

حالا که مخزن اضافه شده و فهرست بسته‌ها به‌روزرسانی شده است، می‌توانیم بسته Jitsi Meet را نصب کنیم. برای این کار از دستور زیر استفاده کنید:

sudo apt install -y jitsi-meet

این دستور تمام بسته‌های مورد نیاز Jitsi Meet را دانلود کرده و نصب می‌کند. فرایند نصب ممکن است چند دقیقه طول بکشد.

۶. پیکربندی DNS

در حین نصب، از شما خواسته می‌شود که دامنه (Domain) خود را وارد کنید. برای این که Jitsi Meet به‌درستی کار کند، باید دامنه‌ای که به سرور اختصاص داده‌اید (مثلاً meet.yourdomain.com) را وارد کنید.

در صورتی که DNS برای دامنه تنظیم شده باشد، سیستم به‌طور خودکار به این دامنه دسترسی خواهد داشت. در غیر این صورت، باید به‌صورت دستی رکورد DNS را تنظیم کنید.

۷. تنظیم گواهی SSL

یکی از ویژگی‌های مهم Jitsi Meet این است که تمام ارتباطات باید از طریق HTTPS رمزنگاری شوند. برای این کار، می‌توانید از Let’s Encrypt استفاده کنید تا گواهی SSL رایگان برای دامنه خود دریافت کنید.

در حین نصب، از شما خواسته می‌شود که گواهی SSL برای دامنه خود را دریافت کنید. در این مرحله، از شما خواسته می‌شود که درخواست گواهی SSL را تایید کنید تا Jitsi Meet بتواند ارتباطات رمزنگاری‌شده را برقرار کند.

۸. راه‌اندازی سرویس‌ها

پس از اتمام نصب، سرویس‌های مربوط به Jitsi Meet به‌طور خودکار شروع به کار می‌کنند. شما می‌توانید وضعیت این سرویس‌ها را با استفاده از دستور زیر بررسی کنید:

sudo systemctl status jitsi-videobridge2
sudo systemctl status jicofo
sudo systemctl status prosody
جمع‌بندی

در این بخش از آموزش های ارائه شده توسط فرازنتورک، مراحل نصب Jitsi Meet با استفاده از مخزن رسمی Jitsi بررسی شد. این مراحل شامل به‌روزرسانی سیستم، نصب پیش‌نیازها، اضافه کردن مخزن Jitsi، به‌روزرسانی فهرست بسته‌ها، نصب Jitsi Meet، پیکربندی DNS، تنظیم گواهی SSL و راه‌اندازی سرویس‌ها بود. اکنون سرور شما آماده استفاده از Jitsi Meet است و می‌توانید از آن برای برگزاری جلسات ویدئویی استفاده کنید.

 

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تولید گواهی SSL با Let’s Encrypt” subtitle=”توضیحات کامل”]برای استفاده از Jitsi Meet در محیط‌های واقعی، نیاز است که ارتباطات بین کاربران به‌صورت ایمن از طریق HTTPS انجام شود. برای این منظور، از گواهی‌های SSL استفاده می‌شود. در این بخش، نحوه تولید و نصب گواهی SSL رایگان از Let’s Encrypt را برای دامنه سرور خود بررسی خواهیم کرد.

۱. نصب Certbot

Certbot ابزاری است که به شما کمک می‌کند گواهی‌های SSL را از Let’s Encrypt دریافت کرده و آن‌ها را به‌طور خودکار نصب و پیکربندی کنید. برای شروع، ابتدا باید Certbot را نصب کنید. در سیستم‌های مبتنی بر Debian/Ubuntu از دستور زیر برای نصب Certbot استفاده کنید:

sudo apt update
sudo apt install certbot
۲. نصب پلاگین Nginx برای Certbot

اگر از Nginx برای سرور خود استفاده می‌کنید، به پلاگین خاصی برای Nginx نیاز دارید تا Certbot بتواند گواهی SSL را به‌صورت خودکار برای Nginx پیکربندی کند. برای نصب پلاگین Nginx، از دستور زیر استفاده کنید:

sudo apt install python3-certbot-nginx
۳. درخواست گواهی SSL از Let’s Encrypt

پس از نصب Certbot و پلاگین Nginx، اکنون می‌توانید گواهی SSL را از Let’s Encrypt درخواست کنید. برای این کار، دستور زیر را وارد کنید:

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

در این دستور، yourdomain.com باید با دامنه واقعی شما جایگزین شود. Certbot درخواست گواهی SSL را برای دامنه‌های ذکرشده ارسال کرده و به‌طور خودکار آن را برای Nginx پیکربندی می‌کند.

۴. پیکربندی دوباره Nginx برای استفاده از گواهی SSL

Certbot پس از درخواست گواهی SSL، به‌طور خودکار Nginx را برای استفاده از HTTPS و گواهی SSL جدید پیکربندی می‌کند. پس از پایان عملیات، Nginx باید به‌طور خودکار از HTTPS استفاده کند.

اگر Certbot نتوانست به‌طور خودکار Nginx را پیکربندی کند، می‌توانید به‌صورت دستی فایل پیکربندی Nginx خود را ویرایش کرده و دستورات زیر را برای فعال‌سازی SSL اضافه کنید:

server {
    listen 443 ssl;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    # تنظیمات دیگر Nginx برای سایت
}

همچنین، اطمینان حاصل کنید که پورت 80 (HTTP) به HTTPS هدایت شود. می‌توانید این کار را با افزودن یک بلاک سرور اضافی برای پورت 80 انجام دهید:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$host$request_uri;
}
۵. بررسی وضعیت گواهی SSL

پس از نصب گواهی SSL، می‌توانید وضعیت آن را بررسی کنید و اطمینان حاصل کنید که به‌درستی نصب شده است. برای بررسی وضعیت گواهی SSL، از دستور زیر استفاده کنید:

sudo certbot certificates

این دستور به شما اطلاعاتی در مورد گواهی‌های SSL نصب‌شده و تاریخ انقضای آن‌ها می‌دهد.

۶. تمدید خودکار گواهی SSL

گواهی‌های SSL که از Let’s Encrypt دریافت می‌کنید، معمولاً مدت‌زمان اعتبار ۹۰ روزه دارند. برای تمدید خودکار گواهی‌ها، Certbot به‌طور پیش‌فرض وظیفه تمدید گواهی‌ها را برای شما انجام می‌دهد. برای اطمینان از این که این فرآیند به‌درستی تنظیم شده است، می‌توانید یک تست تمدید دستی را اجرا کنید:

sudo certbot renew --dry-run

این دستور بررسی می‌کند که آیا فرآیند تمدید به‌درستی پیکربندی شده است یا خیر. در صورتی که فرآیند تمدید بدون مشکل انجام شود، Certbot به‌طور خودکار گواهی شما را قبل از انقضا تمدید خواهد کرد.

جمع‌بندی

در این بخش، نحوه تولید گواهی SSL رایگان با استفاده از Let’s Encrypt و نصب آن بر روی سرورهایی که از Nginx استفاده می‌کنند، توضیح داده شد. Certbot ابزار اصلی برای درخواست و نصب این گواهی‌ها است که فرآیند نصب و پیکربندی را به‌طور خودکار انجام می‌دهد. همچنین، نحوه تمدید خودکار گواهی‌های SSL نیز شرح داده شد تا سرور شما همیشه از ارتباطات ایمن HTTPS بهره‌برداری کند.

 

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تست اجرای اولیه و راه‌اندازی موفق” subtitle=”توضیحات کامل”]پس از نصب Jitsi Meet و صدور گواهی SSL معتبر برای دامنه، لازم است اطمینان حاصل کنید که تمامی سرویس‌ها به‌درستی اجرا شده‌اند و دسترسی به پلتفرم از طریق مرورگر ممکن است. در این بخش، مراحل تست اولیه و بررسی عملکرد اجزای اصلی را مرور می‌کنیم.

۱. بررسی وضعیت سرویس‌ها

برای اطمینان از اجرای صحیح سرویس‌های اصلی Jitsi، ابتدا وضعیت سرویس‌های زیر را بررسی کنید:

sudo systemctl status prosody
sudo systemctl status jicofo
sudo systemctl status jitsi-videobridge2
sudo systemctl status nginx

در صورتی که هر یک از این سرویس‌ها غیرفعال یا با خطا اجرا شده‌اند، ابتدا با دستور زیر آن‌ها را مجدداً راه‌اندازی کنید:

sudo systemctl restart prosody
sudo systemctl restart jicofo
sudo systemctl restart jitsi-videobridge2
sudo systemctl restart nginx
۲. دسترسی به رابط کاربری Jitsi Meet

اکنون مرورگر را باز کرده و به آدرس دامنه‌ای که تنظیم کرده‌اید (مثلاً https://yourdomain.com) مراجعه کنید. در صورتی که نصب و راه‌اندازی موفقیت‌آمیز بوده باشد، صفحه اصلی Jitsi Meet با گزینه شروع یک جلسه جدید ظاهر خواهد شد.

در این مرحله می‌توانید یک اتاق تست بسازید و با استفاده از چند تب مرورگر یا دستگاه‌های دیگر وارد جلسه شوید تا عملکرد عمومی سیستم را بررسی کنید.

۳. بررسی صحت صدور گواهی SSL

برای بررسی این مورد که ارتباط HTTPS به‌درستی برقرار شده است:

  • به آدرس سایت مراجعه کنید و قفل امنیتی مرورگر را بررسی کنید.
  • در صورتی که مرورگر پیغام امنیتی نمایش نمی‌دهد و گواهی معتبر است، تنظیمات SSL به‌درستی انجام شده‌اند.

همچنین می‌توانید از ابزار زیر برای بررسی دقیق وضعیت گواهی SSL استفاده کنید:

https://www.ssllabs.com/ssltest/

نام دامنه خود را وارد کرده و گزارش کاملی از وضعیت گواهی SSL و پیکربندی دریافت نمایید.

۴. تست ارتباط تصویری

برای تست اولیه تماس تصویری:

  • یک اتاق جدید بسازید.
  • با دو کاربر (مثلاً از طریق تب دوم یا مرورگر دیگر) وارد شوید.
  • بررسی کنید که صدا و تصویر هر دو کاربر به‌درستی منتقل می‌شود.
  • مطمئن شوید که NAT یا فایروال باعث جلوگیری از انتقال تصویر نمی‌شود.

در صورت بروز مشکل در تصویر یا صدا، بررسی تنظیمات مربوط به UDP Port 10000 و نیز NAT/Firewall در سرور و شبکه الزامی است.

جمع‌بندی

در این بخش با مراحل تست اولیه پس از نصب Jitsi Meet آشنا شدیم. بررسی وضعیت سرویس‌ها، تست اتصال HTTPS، بررسی گواهی SSL، و آزمایش تماس تصویری اولیه از جمله اقداماتی هستند که باید پس از نصب انجام شوند. این تست‌ها اطمینان حاصل می‌کنند که Jitsi Meet به‌درستی نصب و آماده بهره‌برداری در محیط واقعی است.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 4. پیکربندی اولیه Jitsi Meet”][/cdb_course_lesson][cdb_course_lesson title=”آشنایی با فایل‌های پیکربندی مهم:”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”/etc/jitsi/meet/-config.js” subtitle=”توضیحات کامل”]در نصب Jitsi Meet، چندین فایل پیکربندی کلیدی وجود دارند که هرکدام وظیفه مشخصی در کنترل رفتار سیستم و ارتباط اجزا دارند. یکی از مهم‌ترین این فایل‌ها:

/etc/jitsi/meet/<domain>-config.js

این فایل فایل پیکربندی سمت کلاینت Jitsi Meet است و تنظیمات نمایشی و عملکردی مربوط به رابط کاربری مرورگر را شامل می‌شود. <domain> باید با دامنه‌ای که هنگام نصب وارد کرده‌اید جایگزین شود.

مثال:

/etc/jitsi/meet/jitsi.example.com-config.js
برخی از پارامترهای مهم داخل این فایل:
  • defaultLanguage
    تعیین زبان پیش‌فرض رابط کاربری:

    defaultLanguage: 'fa',
    
  • enableWelcomePage
    فعال یا غیرفعال کردن صفحه خوش‌آمدگویی پیش از ورود به جلسه:

    enableWelcomePage: true,
    
  • startWithAudioMuted, startWithVideoMuted
    تعیین وضعیت پیش‌فرض میکروفن و دوربین برای کاربران جدید:

    startWithAudioMuted: true,
    startWithVideoMuted: true,
    
  • disableInviteFunctions
    غیرفعال کردن گزینه دعوت از دیگران:

    disableInviteFunctions: true,
    
  • prejoinPageEnabled
    فعال‌سازی یا غیرفعال‌سازی صفحه پیش از ورود به جلسه:

    prejoinPageEnabled: true,
    
نکته مهم

هر تغییری که در این فایل انجام می‌دهید، بلافاصله در رابط کاربری منعکس نمی‌شود. برای اعمال تغییرات، توصیه می‌شود حافظه کش مرورگر پاک شود یا از حالت Private/Incognito استفاده گردد.

جمع‌بندی

فایل config.js نقش کلیدی در کنترل ظاهر و رفتار رابط کاربری Jitsi Meet دارد. این فایل در مسیر /etc/jitsi/meet/ قرار گرفته و به ازای هر دامنه، یک نسخه مخصوص دارد. در ادامه، با سایر فایل‌های پیکربندی مهم Jitsi نیز آشنا خواهیم شد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”/etc/jitsi/jicofo/sip-communicator.properties” subtitle=”توضیحات کامل”]این فایل یکی از فایل‌های مهم پیکربندی در ساختار Jitsi Meet است که برای سرویس Jicofo (Jitsi Conference Focus) مورد استفاده قرار می‌گیرد. این فایل شامل پارامترهایی برای ارتباط Jicofo با دیگر اجزای Jitsi مانند Prosody و همچنین تنظیمات امنیتی است.

این فایل در مسیر زیر قرار دارد:

/etc/jitsi/jicofo/sip-communicator.properties
نمونه‌ای از محتوای این فایل:
org.jitsi.jicofo.BRIDGE_MUC=JvbBrewery@internal.auth.jitsi.example.com
org.jitsi.jicofo.auth.URL=XMPP:auth.jitsi.example.com
org.jitsi.jicofo.ALWAYS_TRUST_MODE_ENABLED=true
توضیح پارامترهای رایج:
  • org.jitsi.jicofo.BRIDGE_MUC
    مشخص می‌کند که Jicofo از طریق کدام روم XMPP با Jitsi Videobridge ارتباط برقرار کند.

    org.jitsi.jicofo.BRIDGE_MUC=JvbBrewery@internal.auth.jitsi.example.com
    
  • org.jitsi.jicofo.auth.URL
    آدرس دامنه احراز هویت XMPP را مشخص می‌کند که Jicofo برای اتصال به Prosody از آن استفاده می‌کند.

    org.jitsi.jicofo.auth.URL=XMPP:auth.jitsi.example.com
    
  • org.jitsi.jicofo.ALWAYS_TRUST_MODE_ENABLED
    اگر روی true تنظیم شود، Jicofo تمامی گواهی‌های TLS سرور XMPP را بدون بررسی اعتبار قبول می‌کند. این گزینه معمولاً در محیط‌های تستی کاربرد دارد و در تولید توصیه نمی‌شود.

    org.jitsi.jicofo.ALWAYS_TRUST_MODE_ENABLED=true
    
نکات کلیدی:
  • هرگونه تغییر در این فایل نیاز به ریستارت سرویس Jicofo دارد تا تنظیمات جدید اعمال شوند:
    sudo systemctl restart jicofo
    
  • اگر از احراز هویت کاربران استفاده می‌کنید (Secure Domain Setup)، تنظیمات مرتبط با XMPP در این فایل حیاتی هستند.
جمع‌بندی

فایل sip-communicator.properties در مسیر /etc/jitsi/jicofo/ برای تنظیمات ارتباطی و امنیتی Jicofo با دیگر اجزای Jitsi استفاده می‌شود. در تنظیم دقیق و امن این فایل باید دقت شود، به‌خصوص در پروژه‌های سازمانی یا عمومی. در بخش‌های بعدی، سایر فایل‌های پیکربندی مهم نیز بررسی خواهند شد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”/etc/jitsi/videobridge/sip-communicator.properties” subtitle=”توضیحات کامل”]این فایل یکی از فایل‌های کلیدی برای پیکربندی سرویس Jitsi Videobridge است و بیشتر شامل تنظیمات مربوط به ارتباط با Prosody، کنترل پهنای باند، کدک‌ها، و تنظیمات شبکه می‌باشد.

مسیر این فایل:

/etc/jitsi/videobridge/sip-communicator.properties
نمونه‌ای از محتوای این فایل:
org.ice4j.ice.harvest.DISABLE_AWS_HARVESTER=true
org.ice4j.ice.harvest.STUN_MAPPING_HARVESTER_ADDRESSES=stun.l.google.com:19302
org.jitsi.videobridge.DISABLE_TCP_HARVESTER=true
org.jitsi.videobridge.ENABLE_STATISTICS=true
org.jitsi.videobridge.STATISTICS_TRANSPORT=muc
org.jitsi.videobridge.xmpp.user.shard.HOSTNAME=localhost
org.jitsi.videobridge.xmpp.user.shard.DOMAIN=auth.jitsi.example.com
org.jitsi.videobridge.xmpp.user.shard.USERNAME=jvb
org.jitsi.videobridge.xmpp.user.shard.PASSWORD=your_secure_password
توضیح پارامترهای رایج:
  • org.ice4j.ice.harvest.STUN_MAPPING_HARVESTER_ADDRESSES
    آدرس سرور STUN برای تشخیص IP عمومی سرور در پشت NAT یا فایروال. در مثال بالا از سرور گوگل استفاده شده است.
  • org.ice4j.ice.harvest.DISABLE_AWS_HARVESTER=true
    غیرفعال‌سازی Harvester مربوط به AWS، زمانی که سرور شما روی آمازون اجرا نمی‌شود.
  • org.jitsi.videobridge.DISABLE_TCP_HARVESTER=true
    جلوگیری از استفاده از TCP برای ICE Harvester، اغلب در مواردی کاربرد دارد که فقط ارتباط UDP نیاز است.
  • org.jitsi.videobridge.ENABLE_STATISTICS=true
    فعال‌سازی آمار و اطلاعات مربوط به عملکرد سرویس Videobridge.
  • org.jitsi.videobridge.STATISTICS_TRANSPORT=muc
    ارسال داده‌های آماری از طریق Multi-User Chat (MUC) به Jicofo.
  • org.jitsi.videobridge.xmpp.user.shard.*
    تنظیمات اتصال Videobridge به Prosody شامل دامنه، نام کاربری، رمز عبور و آدرس سرور. این پارامترها نقش مهمی در اتصال موفق JVB به MUC و مدیریت تماس‌ها دارند.
نکات مهم:
  • پس از ویرایش این فایل، برای اعمال تغییرات باید سرویس jitsi-videobridge2 ریستارت شود:
    sudo systemctl restart jitsi-videobridge2
    
  • اگر Videobridge شما به درستی به Prosody متصل نشود یا تماس‌ها وصل نشوند، این فایل اولین جایی‌ست که باید بررسی شود.
جمع‌بندی

فایل /etc/jitsi/videobridge/sip-communicator.properties وظیفه پیکربندی ارتباط Jitsi Videobridge با سرور XMPP (Prosody)، سرور STUN، و تنظیمات شبکه را دارد. این پیکربندی برای عملکرد صحیح تماس‌های تصویری حیاتی‌ست و هرگونه اشتباه در آن می‌تواند منجر به قطع یا اختلال در تماس‌ها شود. در ادامه، فایل‌های پیکربندی دیگر Jitsi را بررسی خواهیم کرد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”/etc/prosody/conf.avail/.cfg.lua” subtitle=”توضیحات کامل”]این فایل یکی از کلیدی‌ترین فایل‌ها در پیکربندی Jitsi Meet است که مربوط به سرویس Prosody (سرور XMPP) می‌باشد. نقش این فایل، تعریف دامنه‌ها، کاربران، ماژول‌ها و دسترسی‌های موردنیاز اجزای مختلف Jitsi مانند Jicofo و Videobridge است.

مسیر فایل:

/etc/prosody/conf.avail/meet.example.com.cfg.lua

به جای meet.example.com، نام دامنه واقعی مورد استفاده شما درج می‌شود.

ساختار کلی فایل:

در ادامه ساختار بخش‌های رایج این فایل بررسی می‌شود:

-- VirtualHost اصلی برای کاربران
VirtualHost "meet.example.com"
    authentication = "anonymous"
    ssl = {
        key = "/etc/prosody/certs/meet.example.com.key";
        certificate = "/etc/prosody/certs/meet.example.com.crt";
    }
    speakerstats_component = "speakerstats.meet.example.com"
    conference_duration_component = "conferenceduration.meet.example.com"
    modules_enabled = {
        "bosh";
        "pubsub";
        "ping";
        "speakerstats";
        "turncredentials";
        "conference_duration";
    }

-- دامنه برای احراز هویت Jicofo
VirtualHost "auth.meet.example.com"
    authentication = "internal_plain"

-- دامنه برای Multi-User Chat (MUC)
Component "conference.meet.example.com" "muc"
    storage = "none"
    modules_enabled = {
        "muc_meeting_id";
        "muc_domain_mapper";
    }
    admins = { "focus@auth.meet.example.com" }

-- اتصال Jicofo به MUC
Component "internal.auth.meet.example.com" "muc"
    storage = "none"
    modules_enabled = {}
    admins = { "focus@auth.meet.example.com" }
    muc_room_locking = false
    muc_room_default_public_jids = true

-- اتصال آمار تماس
Component "speakerstats.meet.example.com" "speakerstats_component"
    muc_component = "conference.meet.example.com"

Component "conferenceduration.meet.example.com" "conference_duration_component"
    muc_component = "conference.meet.example.com"
توضیح بخش‌ها:
  • VirtualHost "meet.example.com"
    دامنه اصلی که کاربران به آن متصل می‌شوند. اغلب احراز هویت به صورت anonymous تنظیم می‌شود، مگر آن‌که بخواهید ورود کاربران کنترل‌شده باشد.
  • VirtualHost "auth.meet.example.com"
    برای احراز هویت اجزای داخلی مانند Jicofo یا JVB. کاربران focus و jvb معمولاً در این دامنه تعریف می‌شوند.
  • Component "conference.meet.example.com"
    ایجاد فضای گفتگو (MUC) برای مدیریت اتاق‌های ویدیویی.
  • Component "speakerstats..." و conferenceduration
    برای ارسال و مدیریت داده‌های آماری تماس.
نکات مهم:
  • برای فعال شدن این فایل باید با دستور زیر به آن لینک ایجاد شود:
    sudo ln -s /etc/prosody/conf.avail/meet.example.com.cfg.lua /etc/prosody/conf.d/meet.example.com.cfg.lua
    
  • پس از هر تغییری در این فایل، سرویس Prosody باید ریستارت شود:
    sudo systemctl restart prosody
    
جمع‌بندی

فایل /etc/prosody/conf.avail/<domain>.cfg.lua قلب تنظیمات سرور XMPP برای Jitsi Meet است. این فایل کنترل می‌کند که چگونه کاربران و اجزای داخلی مانند Jicofo و Videobridge به هم متصل شوند، چگونه احراز هویت انجام شود و اطلاعات آماری چطور منتقل شوند. پیکربندی صحیح این فایل، لازمه‌ی راه‌اندازی موفق یک سرور Jitsi پایدار و ایمن است.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیم دامنه، زبان رابط کاربری، رفتار ورود به جلسات و…” subtitle=”توضیحات کامل”]برای اعمال تنظیمات رابط کاربری و نحوه عملکرد کلی سرویس Jitsi Meet، فایل زیر ویرایش می‌شود:

/etc/jitsi/meet/<domain>-config.js

توجه: به‌جای <domain> نام دامنه‌ی نصب‌شده Jitsi خود را قرار دهید، مانند:
/etc/jitsi/meet/meet.example.com-config.js

در این فایل می‌توانید گزینه‌های زیر را برای شخصی‌سازی Jitsi Meet تنظیم کنید:


تنظیم دامنه پیش‌فرض
var config = {
    hosts: {
        domain: 'meet.example.com',
        muc: 'conference.meet.example.com',
        focus: 'focus.meet.example.com'
    },

تنظیم زبان رابط کاربری (پیش‌فرض فارسی)
    defaultLanguage: 'fa',

در صورتی که قصد دارید کاربران زبان خود را دستی تغییر دهند، این گزینه را نیز فعال نگه دارید:

    disableLanguageDetection: false,

تنظیم پیام خوش‌آمدگویی و توضیح اتاق
    defaultLocalDisplayName: 'مهمان',
    defaultRemoteDisplayName: 'مهمان دیگر',
    defaultWelcomePageLogoUrl: '',

رفتار ورود به جلسات

اگر می‌خواهید کاربران قبل از ورود نیاز به تأیید توسط میزبان داشته باشند:

    enableUserRolesBasedOnToken: false,
    enableLobby: true,

محدودیت کاربران ناشناس

برای فعال‌سازی لابی یا محدود کردن دسترسی کاربران غیرعضو:

    requireDisplayName: true,

فعال‌سازی یا غیرفعال‌سازی ویژگی‌ها

مثال‌هایی از غیرفعال‌سازی برخی ویژگی‌ها:

    toolbarButtons: [
        'microphone', 'camera', 'fullscreen',
        'chat', 'raisehand', 'tileview',
        'hangup'
    ],
    disableInviteFunctions: true,
    disableThirdPartyRequests: true,

غیرفعال‌سازی صفحه اول (welcome page)
    enableWelcomePage: false,

اعمال تغییرات

پس از اعمال هر تغییری در این فایل، لازم است سرویس Nginx یا Prosody ریستارت شود:

sudo systemctl restart nginx
sudo systemctl restart prosody

جمع‌بندی

فایل -config.js در مسیر /etc/jitsi/meet/ کنترل اصلی تنظیمات رابط کاربری، زبان، دامنه، دسترسی‌ها و رفتارهای پیش‌فرض Jitsi Meet را در اختیار شما قرار می‌دهد. تنظیم دقیق این فایل به شما کمک می‌کند تجربه‌ای بومی، امن و متناسب با نیاز پروژه خود ارائه دهید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 5. آشنایی با رابط کاربری Jitsi Meet”][/cdb_course_lesson][cdb_course_lesson title=”بررسی بخش‌های کلیدی رابط:”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”منوی کنترل پایین (قطع صدا، دوربین، اشتراک‌گذاری)” subtitle=”توضیحات کامل”]در رابط کاربری Jitsi Meet، منوی کنترل پایین یکی از مهم‌ترین بخش‌های تجربه کاربری است که امکان مدیریت تعاملات در جلسه را فراهم می‌سازد. این منو معمولاً به‌صورت شناور در پایین صفحه ظاهر می‌شود و شامل آیکون‌هایی برای کنترل وضعیت‌های صوتی، تصویری و نمایش محتوا است.


اجزای کلیدی منوی پایین:
  1. قطع/وصل صدای میکروفون
    آیکون میکروفون برای فعال یا غیرفعال کردن میکروفون استفاده می‌شود.

    • حالت فعال: میکروفون باز است و کاربر شنیده می‌شود.
    • حالت غیرفعال: علامت قرمز روی میکروفون نمایش داده می‌شود.
  2. قطع/وصل دوربین
    آیکون دوربین برای مدیریت پخش تصویر ویدیو کاربر است.

    • حالت فعال: تصویر کاربر در جلسه نمایش داده می‌شود.
    • حالت غیرفعال: تصویر کاربر غیرفعال می‌شود و آواتار (یا نام) نمایش داده می‌شود.
  3. اشتراک‌گذاری صفحه (Screen Sharing)
    آیکون مانیتور یا فلش به‌سمت بالا برای اشتراک‌گذاری کل صفحه یا پنجره خاص استفاده می‌شود.

    • هنگام انتخاب، مرورگر از کاربر درخواست دسترسی می‌کند.
    • اشتراک‌گذاری می‌تواند شامل صدای سیستم هم باشد (بسته به مرورگر).
  4. قطع تماس (Hang Up)
    آیکونی به شکل تلفن قرمز برای خروج از جلسه. پس از فشردن، کاربر از تماس خارج می‌شود.
  5. باز کردن چت (Chat)
    آیکون پیام یا حباب گفتگو برای باز کردن پنل گفت‌وگو با سایر کاربران جلسه.
  6. مشاهده شرکت‌کنندگان (Participants)
    نمایش لیست اعضای جلسه با قابلیت مدیریت (برای میزبان‌ها).
  7. تنظیمات بیشتر (Three Dots یا “More Actions”)
    • تغییر کیفیت ویدیو
    • تغییر پس‌زمینه مجازی
    • رکورد کردن جلسه (در صورت فعال بودن)
    • پخش زنده (Live Streaming)
    • تنظیمات دستگاه‌ها (میکروفون، دوربین، اسپیکر)
  8. نمای کاشی (Tile View)
    برای مرتب‌سازی نمای شرکت‌کنندگان به‌صورت شبکه‌ای.

نکات قابل تنظیم در config.js

در فایل زیر می‌توان گزینه‌های منو را فعال یا غیرفعال کرد:

/etc/jitsi/meet/<domain>-config.js

مثال برای محدودسازی منو:

toolbarButtons: [
    'microphone', 'camera', 'desktop', 'chat', 'tileview', 'hangup'
],

برای غیرفعال‌سازی گزینه‌هایی مانند دعوت، پخش زنده یا ضبط، آن‌ها را از این آرایه حذف کنید.


جمع‌بندی

منوی کنترل پایین در Jitsi Meet نقطه تعامل اصلی کاربران با ویژگی‌های تماس ویدیویی است. با پیکربندی صحیح این منو و شخصی‌سازی آیکون‌ها در فایل پیکربندی، می‌توانید تجربه‌ای منظم، ساده و متناسب با نیاز پروژه‌های آموزشی، سازمانی یا عمومی خود ایجاد کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”منوی تنظیمات کاربر” subtitle=”توضیحات کامل”]منوی تنظیمات کاربر در Jitsi Meet یکی از بخش‌های کلیدی برای شخصی‌سازی تجربه کاربری و رفع مشکلات فنی است. این منو از طریق آیکون سه‌نقطه (⋮) در نوار ابزار پایین قابل دسترسی است و گزینه‌هایی برای تنظیم دستگاه‌ها، تنظیمات پیشرفته و تغییر ظاهر فراهم می‌سازد.


اجزای اصلی منوی تنظیمات کاربر
  1. Devices (تنظیمات دستگاه‌ها)
    از این بخش می‌توان ورودی و خروجی صدا و تصویر را کنترل کرد.

    • Microphone: انتخاب منبع ورودی صدا (میکروفون داخلی، هدفون، USB Mic و…)
    • Camera: انتخاب دوربین مورد نظر (در صورت وجود چند دوربین)
    • Audio Output: تعیین اسپیکر یا هدست خروجی برای شنیدن صدا

    در این بخش همچنین امکان تست ورودی میکروفون و خروجی صدا وجود دارد.


  1. Profile (پروفایل کاربر)
    امکان تنظیم نام نمایشی و ایمیل برای شناسایی در جلسات.

    • نام نمایشی در رابط سایر کاربران نمایش داده می‌شود.
    • ایمیل برای نمایش آواتار (در صورت پشتیبانی از Gravatar)

  1. More (تنظیمات بیشتر)
    بسته به تنظیمات سرور، ممکن است شامل گزینه‌هایی مانند:

    • Language: تغییر زبان رابط کاربری (پشتیبانی از فارسی نیز وجود دارد)
    • Moderator Settings (در صورتی که کاربر میزبان باشد)
    • Virtual Background: افزودن پس‌زمینه مجازی برای ویدیو
    • Keyboard Shortcuts: مشاهده و مدیریت میان‌برهای کیبورد

  1. Video Quality (کیفیت ویدیو)
    از این بخش می‌توان وضوح تصویر ارسال‌شده را تغییر داد:

    • High Definition (720p یا بالاتر)
    • Standard (480p)
    • Low Bandwidth (180p)
    • Audio Only (قطع کامل تصویر برای صرفه‌جویی در پهنای باند)

مسیر فعال‌سازی یا غیرفعال‌سازی تنظیمات

برای کنترل نمایش یا پنهان کردن این گزینه‌ها، از فایل زیر استفاده می‌شود:

/etc/jitsi/meet/<domain>-config.js

مثال غیرفعال‌سازی Virtual Background:

disableVirtualBackground: true,

جمع‌بندی

منوی تنظیمات کاربر در Jitsi Meet بستری جامع برای مدیریت دستگاه‌ها، تنظیمات شخصی و تجربه ویدیویی فراهم می‌کند. این تنظیمات در جلسات حرفه‌ای و آموزشی بسیار کاربردی هستند و با پیکربندی مناسب سرور می‌توان گزینه‌های منو را متناسب با نیاز هر پروژه فعال یا غیرفعال نمود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”فهرست شرکت‌کنندگان و مدیریت آن‌ها” subtitle=”توضیحات کامل”]در جلسات Jitsi Meet، فهرست شرکت‌کنندگان یکی از اجزای اصلی رابط کاربری است که امکان مشاهده، مدیریت و تعامل با افراد حاضر در جلسه را فراهم می‌سازد. این بخش از طریق آیکون مربوط به “Participants” در نوار ابزار پایین قابل دسترسی است و در سمت راست صفحه باز می‌شود.


امکانات موجود در فهرست شرکت‌کنندگان
  1. نمایش لیست کاربران حاضر
    نام و آواتار (در صورت وجود) تمامی کاربران حاضر در جلسه در این بخش نمایش داده می‌شود.
  2. تشخیص وضعیت فعال بودن صدا و تصویر
    آیکون‌های مربوط به میکروفون و دوربین در کنار هر نام مشخص می‌کنند که کاربر در حال ارسال صدا و تصویر است یا خیر.
  3. درخواست صحبت یا واکنش سریع
    کاربران می‌توانند با استفاده از گزینه‌هایی مثل “Raise Hand” (دست‌ بلند کردن) یا ارسال واکنش‌های تصویری، بدون قطع صحبت دیگران، درخواست صحبت کنند یا بازخورد بدهند.

ابزارهای مدیریتی برای میزبان جلسه

در صورتی که کاربر میزبان (Moderator) باشد، قابلیت‌های مدیریتی زیر در فهرست شرکت‌کنندگان فعال خواهد بود:

  • Mute کردن میکروفون کاربران
    امکان بی‌صدا کردن میکروفون هر کاربر به‌صورت تکی یا جمعی:

    config.disableRemoteMute = false
    
  • Remove کردن کاربر از جلسه
    با کلیک روی آیکون کنار نام هر کاربر، میزبان می‌تواند او را از جلسه حذف کند.
  • Assign کردن نقش‌ها (در صورت فعال بودن JWT یا Auth)
    امکان ارتقاء نقش کاربر به Moderator یا محدود کردن قابلیت‌های وی.
  • حالت Follow-me
    فعال‌سازی این حالت باعث می‌شود که نمای جلسه برای همه کاربران مطابق با نمای میزبان هماهنگ شود.

مسیر تنظیم رفتار فهرست شرکت‌کنندگان

تنظیمات نمایش و قابلیت‌های مدیریتی این بخش در فایل زیر قرار دارند:

/etc/jitsi/meet/<domain>-config.js

مثال: غیرفعال‌سازی امکان حذف کاربر توسط میزبان

disableKick: true,

جمع‌بندی

بخش فهرست شرکت‌کنندگان در Jitsi Meet ابزار مهمی برای مدیریت جلسات گروهی و سازمانی است. از طریق این پنل، میزبان می‌تواند نظم جلسه را حفظ کرده، کاربران را مدیریت کند و تعاملات را به‌صورت بهینه هدایت نماید. همچنین کاربران عادی نیز با ابزارهایی مانند “دست بلند کردن” و “ری‌اکشن‌ها” امکان مشارکت بدون مزاحمت دارند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”رابط چت داخلی” subtitle=”توضیحات کامل”]رابط چت داخلی یکی از قابلیت‌های مهم Jitsi Meet برای افزایش تعامل بین کاربران در حین برگزاری جلسات است. این ویژگی امکان ارسال پیام‌های متنی بین شرکت‌کنندگان را فراهم می‌سازد و می‌تواند به‌عنوان کانال مکملی برای تبادل اطلاعات، ارسال لینک‌ها، یا گفتگوهای موازی مورد استفاده قرار گیرد.


ویژگی‌های اصلی چت داخلی
  1. دسترسی آسان به چت کاربران می‌توانند با کلیک روی آیکون “Chat” در نوار ابزار پایین وارد پنل چت شوند. این پنل معمولاً در سمت راست تصویر باز می‌شود و امکان ارسال و مشاهده پیام‌ها را فراهم می‌کند.
  2. ارسال پیام به همه کاربران در حالت پیش‌فرض، پیام‌های ارسالی برای تمام شرکت‌کنندگان حاضر در جلسه قابل مشاهده هستند (Public Chat).
  3. نمایش زمان ارسال پیام هر پیام دارای ساعت ارسال است تا پیگیری گفتگوها در زمان واقعی آسان‌تر شود.
  4. اعلان پیام جدید در صورت بسته بودن پنل چت، هنگام دریافت پیام جدید، آیکون چت با یک اعلان (نقطه رنگی یا لرزش) مشخص می‌شود.

تنظیمات و مسیر فایل مربوطه

تنظیمات مربوط به چت داخلی در فایل پیکربندی زیر قرار دارند:

/etc/jitsi/meet/<domain>-config.js

مثال: غیرفعال‌سازی چت برای کاربران

disableChat: true,

مثال: فعال‌سازی چت خصوصی (در نسخه‌های خاص یا سفارشی)

enablePrivateChat: true,

نکات امنیتی
  • پیام‌های چت به‌صورت پیش‌فرض رمزنگاری‌شده در بستر TLS منتقل می‌شوند.
  • هیچ ذخیره‌سازی سمت سرور برای پیام‌ها انجام نمی‌شود (مگر در نسخه‌های سفارشی)، و با پایان جلسه، تاریخچه چت از بین می‌رود.

جمع‌بندی

رابط چت داخلی Jitsi Meet ابزاری کاربردی برای تقویت ارتباطات متنی در جلسات است. این ابزار به کاربران امکان می‌دهد بدون قطع جریان ویدیویی، گفتگوهای مکمل داشته باشند. همچنین میزبان می‌تواند کنترل کاملی بر فعال یا غیرفعال بودن این بخش داشته باشد. استفاده مؤثر از چت داخلی می‌تواند کیفیت و نظم جلسات گروهی را به‌طور قابل توجهی بهبود بخشد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”سفارشی‌سازی عنوان صفحه، لوگو و رنگ‌بندی از طریق CSS” subtitle=”توضیحات کامل”]در Jitsi Meet، سفارشی‌سازی ظاهر و نحوه نمایش رابط کاربری به‌راحتی از طریق تغییرات در CSS امکان‌پذیر است. این کار به‌ویژه برای تطبیق ظاهری با برند سازمان یا سفارشی‌سازی رابط کاربری برای کاربردهای خاص مهم است. در این بخش به نحوه تغییر عنوان صفحه، لوگو و رنگ‌بندی از طریق CSS خواهیم پرداخت.


۱. سفارشی‌سازی عنوان صفحه

عنوان صفحه، که در تب مرورگر نمایش داده می‌شود، می‌تواند برای برند یا هدف خاصی تغییر کند. برای این کار، باید فایل پیکربندی config.js را ویرایش کنید.

مسیر فایل:

/etc/jitsi/meet/<domain>-config.js

در این فایل، متغیر defaultPageTitle را پیدا کرده و آن را به‌عنوان عنوان دلخواه تغییر دهید.

مثال:

defaultPageTitle: "جلسات ویدیویی سازمانی",

۲. سفارشی‌سازی لوگو

برای تغییر لوگو، ابتدا باید تصویر لوگو را به پوشه خاصی در سرور آپلود کنید و سپس فایل CSS را برای استفاده از آن ویرایش کنید.

  • آپلود لوگو: لوگو باید در مسیر زیر قرار گیرد:
    /usr/share/jitsi-meet/images/logo.png
    
  • ویرایش CSS برای استفاده از لوگو: برای تغییر لوگو، باید فایل CSS مرتبط با طراحی رابط را ویرایش کرده و مسیر جدید لوگو را در آن قرار دهید. به‌طور پیش‌فرض، فایل CSS اصلی در مسیر زیر قرار دارد:
    /usr/share/jitsi-meet/css/app.css
    

    برای تنظیم لوگو جدید، کد زیر را در فایل CSS اضافه کنید:

    #header #logo {
        background-image: url('/images/logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        height: 50px; /* اندازه مناسب برای لوگو */
        width: 200px; /* اندازه مناسب برای لوگو */
    }
    

۳. سفارشی‌سازی رنگ‌بندی

برای تغییر رنگ‌بندی، مانند رنگ پس‌زمینه، متن، و دکمه‌ها، از فایل‌های CSS برای تنظیم استایل‌ها استفاده می‌شود.

  • ویرایش فایل CSS برای رنگ‌بندی: در مسیر زیر فایل CSS اصلی قرار دارد:
    /usr/share/jitsi-meet/css/app.css
    
  • تغییر رنگ‌ها: می‌توانید رنگ‌های مختلف را با استفاده از ویژگی‌های CSS تغییر دهید. به‌عنوان مثال، برای تغییر رنگ پس‌زمینه و دکمه‌ها از کد زیر استفاده کنید:
    /* تغییر رنگ پس‌زمینه صفحه */
    body {
        background-color: #f0f0f0;
    }
    
    /* تغییر رنگ دکمه‌ها */
    .button {
        background-color: #0066cc;
        color: white;
    }
    
    /* تغییر رنگ متن در نوار ابزار */
    #toolbar {
        background-color: #333333;
        color: #ffffff;
    }
    

نکات مهم:
  • بارگذاری مجدد تغییرات: پس از اعمال تغییرات در فایل‌های CSS یا config.js، نیاز به بارگذاری مجدد یا ریستارت سرویس‌های Jitsi Meet است.
  • سفارشی‌سازی پیشرفته: برای سفارشی‌سازی پیشرفته‌تر می‌توانید از فایل‌های CSS یا JS جداگانه استفاده کنید و آن‌ها را به فایل‌های موجود در سیستم لینک کنید.

جمع‌بندی

سفارشی‌سازی عنوان صفحه، لوگو و رنگ‌بندی در Jitsi Meet از طریق تغییرات در فایل‌های پیکربندی و CSS به‌راحتی امکان‌پذیر است. این قابلیت‌ها به شما این امکان را می‌دهند که تجربه کاربری مطابق با نیازهای برند یا سازمان خود ایجاد کنید. با تغییرات ساده در فایل‌های پیکربندی و CSS، می‌توانید ظاهر و عملکرد Jitsi Meet را به شکل دلخواه خود تنظیم کنید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 6. استفاده از ویژگی‌های پایه در Jitsi Meet”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ایجاد جلسه جدید و ارسال لینک دعوت” subtitle=”توضیحات کامل”]یکی از ویژگی‌های اصلی Jitsi Meet، توانایی ایجاد جلسات جدید و ارسال لینک دعوت به شرکت‌کنندگان است. این کار به‌سادگی از طریق رابط کاربری وب‌سایت یا برنامه دسکتاپ موبایل انجام می‌شود. در این بخش به نحوه ایجاد جلسه جدید و ارسال لینک دعوت در Jitsi Meet خواهیم پرداخت.


۱. ایجاد جلسه جدید

برای ایجاد یک جلسه جدید در Jitsi Meet، مراحل زیر را دنبال کنید:

  1. ورود به صفحه Jitsi Meet: ابتدا به آدرس Jitsi Meet خود بروید. این ممکن است دامنه‌ خاص شما باشد، مانند https://meet.yourdomain.com.
  2. وارد کردن نام جلسه: پس از ورود به سایت، در صفحه اصلی یک فیلد برای وارد کردن نام جلسه خواهید دید. این نام جلسه می‌تواند هر چیزی باشد که بخواهید، مانند یک عنوان خاص برای جلسه کاری، جلسه کلاس یا هر رویداد دیگر.
  3. شروع جلسه: پس از وارد کردن نام جلسه، روی دکمه Go یا Start a Meeting کلیک کنید. این کار جلسه جدیدی را شروع می‌کند.
  4. انتخاب دوربین و میکروفون: قبل از ورود به جلسه، شما می‌توانید دوربین و میکروفون خود را بررسی و تنظیم کنید.

۲. ارسال لینک دعوت

پس از شروع جلسه، لینک دعوت به‌طور خودکار ایجاد می‌شود و به شما نمایش داده می‌شود. این لینک برای دعوت دیگران به جلسه استفاده می‌شود. مراحل ارسال لینک دعوت به شرکت‌کنندگان به شرح زیر است:

  1. کپی کردن لینک دعوت: پس از شروع جلسه، لینک دعوت در نوار آدرس مرورگر یا در بخش اطلاعات جلسه نمایش داده می‌شود. به سادگی این لینک را کپی کنید.
  2. ارسال لینک دعوت: لینک دعوت را می‌توانید از طریق هر روش ارتباطی که ترجیح می‌دهید، مانند ایمیل، پیامک، یا پیام‌رسان‌های دیگر، برای شرکت‌کنندگان ارسال کنید.
  3. دسترسی به جلسه: افرادی که لینک دعوت را دریافت کرده‌اند، می‌توانند با کلیک روی آن وارد جلسه شوند. آن‌ها نیاز به هیچ نرم‌افزار خاصی ندارند و می‌توانند مستقیماً از مرورگر وب خود به جلسه بپیوندند.

۳. مدیریت دسترسی به جلسه

در صورتی که بخواهید امنیت جلسه خود را افزایش دهید یا دسترسی‌ها را محدود کنید، Jitsi Meet این امکان را فراهم می‌کند:

  1. قفل کردن جلسه: برای جلوگیری از ورود افراد جدید به جلسه پس از شروع، می‌توانید جلسه را قفل کنید. این کار را از طریق منوی مدیریت جلسه (در بخش تنظیمات یا منوی کنترلی که در پایین صفحه وجود دارد) انجام دهید.
  2. مدیریت شرکت‌کنندگان: شما می‌توانید شرکت‌کنندگان را از جلسه حذف کنید یا دسترسی میکروفون و دوربین آن‌ها را قطع کنید. این امکان برای جلسه‌های چندنفره بسیار مفید است تا کنترل بهتری بر روی مخاطبین و فضای جلسه داشته باشید.

جمع‌بندی

ایجاد جلسه جدید و ارسال لینک دعوت در Jitsi Meet بسیار ساده و کاربرپسند است. با وارد کردن نام جلسه و شروع آن، به‌طور خودکار لینک دعوت برای شما تولید می‌شود و شما می‌توانید آن را برای دیگران ارسال کنید. همچنین، قابلیت مدیریت دسترسی و کنترل روی شرکت‌کنندگان این امکان را به شما می‌دهد که امنیت جلسه را بیشتر کنید و به‌راحتی از آن استفاده کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”فعال‌سازی گزینه‌هایی مانند Lobby، Waiting Room و Password Protection” subtitle=”توضیحات کامل”]در Jitsi Meet، شما می‌توانید از ویژگی‌های امنیتی مختلفی مانند Lobby، Waiting Room و Password Protection استفاده کنید تا دسترسی به جلسات خود را کنترل کنید. این ویژگی‌ها به شما کمک می‌کنند تا تنها افراد مجاز به جلسه وارد شوند و از هرگونه دسترسی غیرمجاز جلوگیری کنید.


۱. فعال‌سازی Lobby (لابی)

ویژگی Lobby به شما این امکان را می‌دهد که شرکت‌کنندگان به‌طور موقت در “لابی” منتظر بمانند تا مدیر جلسه یا میزبان، آن‌ها را وارد جلسه کند.

مراحل فعال‌سازی Lobby:

  1. وارد تنظیمات Jitsi Meet شوید.
  2. در فایل پیکربندی config.js (در مسیر /etc/jitsi/meet/<domain>-config.js) به دنبال تنظیمات مربوط به لابی بگردید.
  3. برای فعال‌سازی لابی، مقدار enableLobby را به true تغییر دهید.
// فعال‌سازی لابی
enableLobby: true,

پس از فعال‌سازی این ویژگی، تمام شرکت‌کنندگان باید توسط میزبان تایید شوند تا وارد جلسه شوند. اگر این گزینه فعال باشد، شرکت‌کنندگان به طور موقت وارد لابی خواهند شد و میزبان می‌تواند آن‌ها را وارد جلسه کند.


۲. فعال‌سازی Waiting Room (اتاق انتظار)

ویژگی Waiting Room مشابه Lobby است، با این تفاوت که به طور خودکار همه شرکت‌کنندگان را به اتاق انتظار می‌برد تا زمانی که میزبان اجازه دهد وارد جلسه شوند.

مراحل فعال‌سازی Waiting Room:

  1. به پیکربندی Jitsi Meet بروید.
  2. به‌طور مشابه به فایل config.js بروید و به دنبال تنظیمات مربوط به اتاق انتظار بگردید.
  3. مقدار enableWaitingRoom را به true تغییر دهید تا این ویژگی فعال شود.
// فعال‌سازی اتاق انتظار
enableWaitingRoom: true,

این ویژگی می‌تواند برای جلسات بزرگ و سازمانی که نیاز به کنترل دقیق‌تری روی شرکت‌کنندگان دارند بسیار مفید باشد.


۳. فعال‌سازی Password Protection (حفاظت با رمز عبور)

اگر بخواهید از ورود افراد غیرمجاز به جلسه جلوگیری کنید، می‌توانید از رمز عبور برای جلسات خود استفاده کنید. برای فعال‌سازی این ویژگی، مراحل زیر را دنبال کنید:

  1. فایل پیکربندی config.js را باز کنید.
  2. در بخش مربوط به تنظیمات رمز عبور، ویژگی passwordRequired را فعال کنید و یک رمز عبور برای جلسه مشخص کنید.
// فعال‌سازی رمز عبور برای جلسه
passwordRequired: true,
password: "yourPassword",

پس از تنظیم رمز عبور، تمام شرکت‌کنندگان برای ورود به جلسه نیاز به وارد کردن رمز عبور خواهند داشت. این ویژگی برای جلساتی که حساسیت بالایی دارند و می‌خواهید دسترسی به آن محدود شود بسیار کاربردی است.


جمع‌بندی

با فعال‌سازی گزینه‌های Lobby، Waiting Room و Password Protection، می‌توانید دسترسی به جلسات خود را به‌طور کامل مدیریت کنید و از امنیت بالاتری برخوردار شوید. این ویژگی‌ها به شما کمک می‌کنند که کنترل بیشتری بر روی شرکت‌کنندگان داشته باشید و از هرگونه دسترسی غیرمجاز جلوگیری کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”اشتراک‌گذاری صفحه (Screen Sharing)” subtitle=”توضیحات کامل”]یکی از ویژگی‌های اصلی و مفید در جلسات ویدیویی اشتراک‌گذاری صفحه یا Screen Sharing است که به شرکت‌کنندگان این امکان را می‌دهد تا محتویات صفحه خود را با دیگران به اشتراک بگذارند. این ویژگی برای ارائه‌ها، آموزش‌ها، جلسات کاری، و دموهای آنلاین بسیار مفید است.

در Jitsi Meet، اشتراک‌گذاری صفحه به‌سادگی قابل‌استفاده است و به‌طور پیش‌فرض فعال است. در این بخش، نحوه استفاده از این ویژگی و برخی تنظیمات مربوط به آن را بررسی خواهیم کرد.


۱. فعال‌سازی اشتراک‌گذاری صفحه

برای فعال‌سازی یا تنظیمات مربوط به اشتراک‌گذاری صفحه، نیاز به تغییرات خاصی در تنظیمات Jitsi Meet نیست، زیرا این ویژگی به‌طور پیش‌فرض فعال است. با این حال، می‌توانید در فایل پیکربندی، ویژگی‌های مرتبط با این گزینه را مدیریت کنید.

  1. تنظیمات پیش‌فرض: به طور پیش‌فرض، Jitsi Meet به کاربران اجازه می‌دهد تا صفحه خود را به اشتراک بگذارند. برای اطمینان از فعال بودن این ویژگی، می‌توانید به تنظیمات config.js مراجعه کنید و چک کنید که ویژگی‌های زیر فعال باشد:
// فعال‌سازی اشتراک‌گذاری صفحه
desktopSharing: true,
desktopSharingSources: ['screen', 'window', 'tab'],

این تنظیمات نشان می‌دهند که کاربران قادر خواهند بود تا کل صفحه، یک پنجره خاص، یا یک تب مرورگر را به اشتراک بگذارند.


۲. مراحل اشتراک‌گذاری صفحه

پس از فعال‌سازی ویژگی اشتراک‌گذاری صفحه، کاربران می‌توانند در هر جلسه‌ای به‌راحتی صفحه خود را به اشتراک بگذارند. برای انجام این کار مراحل زیر را دنبال کنید:

  1. به جلسه ویدیویی وارد شوید.
  2. از منوی پایین صفحه، روی آیکون اشتراک‌گذاری صفحه (که معمولاً یک آیکون صفحه‌نمایش است) کلیک کنید.
  3. یک پنجره یا تب جدید برای انتخاب منبع اشتراک‌گذاری باز خواهد شد. شما می‌توانید یکی از گزینه‌های زیر را انتخاب کنید:
    • صفحه (Screen): اشتراک‌گذاری کل صفحه نمایش.
    • پنجره (Window): اشتراک‌گذاری یک پنجره خاص از یک برنامه.
    • تب (Tab): اشتراک‌گذاری یک تب خاص از مرورگر.

پس از انتخاب منبع اشتراک‌گذاری، روی دکمه اشتراک‌گذاری کلیک کنید و صفحه شما با دیگران به اشتراک گذاشته خواهد شد.


۳. تنظیمات پیشرفته اشتراک‌گذاری صفحه

اگر بخواهید تنظیمات پیشرفته‌تری برای اشتراک‌گذاری صفحه در نظر بگیرید، می‌توانید تنظیمات بیشتری در فایل پیکربندی config.js انجام دهید. برخی از تنظیمات پیشرفته شامل موارد زیر است:

  • غیرفعال کردن اشتراک‌گذاری صفحه: اگر به هر دلیلی بخواهید اشتراک‌گذاری صفحه را غیرفعال کنید، کافی است در فایل پیکربندی مقدار زیر را تغییر دهید:
desktopSharing: false,
  • تنظیمات تعداد منابع قابل انتخاب: شما می‌توانید منابع اشتراک‌گذاری (صفحه، پنجره، تب) را محدود کنید. برای مثال، اگر فقط می‌خواهید پنجره‌ها به اشتراک گذاشته شوند، می‌توانید تنظیمات را به‌صورت زیر تغییر دهید:
desktopSharingSources: ['window'],

۴. اشتراک‌گذاری صفحه و امنیت

با توجه به اینکه اشتراک‌گذاری صفحه دسترسی به اطلاعات خصوصی را ممکن می‌سازد، در نظر گرفتن نکات امنیتی ضروری است. برای افزایش امنیت:

  • از انتخاب منابع خاص مانند پنجره و تب به‌جای صفحه استفاده کنید تا از اشتراک‌گذاری اطلاعات حساس خود جلوگیری کنید.
  • قبل از شروع به اشتراک‌گذاری صفحه، مطمئن شوید که هیچ‌گونه اطلاعات حساس (مانند رمزهای عبور یا اطلاعات شخصی) در صفحه یا پنجره‌ای که قصد اشتراک‌گذاری آن را دارید وجود ندارد.

جمع‌بندی

ویژگی اشتراک‌گذاری صفحه در Jitsi Meet یکی از قابلیت‌های مهم است که به کاربران این امکان را می‌دهد تا محتویات صفحه خود را به‌سادگی و با کیفیت بالا به اشتراک بگذارند. این ویژگی به‌طور پیش‌فرض فعال است و برای استفاده از آن کافی است از منوی پایین صفحه اقدام به اشتراک‌گذاری صفحه کنید. همچنین، با استفاده از تنظیمات پیکربندی، می‌توانید کنترل دقیقی بر روی این ویژگی داشته باشید و از جنبه‌های امنیتی آن مطمئن شوید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ارسال پیام در چت و استفاده از ایموجی” subtitle=”توضیحات کامل”]در Jitsi Meet، چت داخلی یکی از ابزارهای مهم برای ارتباط بین شرکت‌کنندگان است که به آن‌ها این امکان را می‌دهد تا علاوه بر برقراری ارتباط صوتی و تصویری، پیام‌های متنی ارسال کنند. همچنین، برای افزایش تعامل و راحتی بیشتر، ویژگی استفاده از ایموجی‌ها نیز در چت گنجانده شده است. این ویژگی به کاربران کمک می‌کند تا احساسات خود را بهتر ابراز کنند و تعاملات غیرکلامی را به جلسه‌های خود اضافه کنند.


۱. ارسال پیام در چت

چت در Jitsi Meet به‌راحتی قابل‌استفاده است و برای ارسال پیام کافی است که مراحل زیر را دنبال کنید:

  1. در طول جلسه، به منوی چت (که معمولاً در پایین صفحه سمت راست قرار دارد) دسترسی پیدا کنید.
  2. پس از باز کردن پنجره چت، در قسمت متن چت پیامی که می‌خواهید ارسال کنید، تایپ کنید.
  3. سپس برای ارسال پیام، روی دکمه ارسال (که معمولاً به شکل آیکون ارسال یا یک فلش است) کلیک کنید.

پیام شما برای تمامی شرکت‌کنندگان در جلسه قابل مشاهده خواهد بود.


۲. استفاده از ایموجی‌ها

برای افزایش تعاملات غیرکلامی، می‌توانید از ایموجی‌ها در چت خود استفاده کنید. این ویژگی به‌ویژه برای ابراز احساسات و واکنش‌های سریع در جلسات کاربرد دارد.

  1. در پنجره چت، هنگامی که در حال تایپ پیام هستید، یک آیکون ایموجی (که معمولاً به شکل صورتک است) را مشاهده خواهید کرد.
  2. با کلیک روی این آیکون، لیستی از ایموجی‌ها برای شما نمایش داده خواهد شد.
  3. از این لیست می‌توانید ایموجی موردنظر خود را انتخاب کرده و آن را در پیام خود وارد کنید.

این ایموجی‌ها می‌توانند برای نشان دادن احساسات مانند خوشحالی، تاسف، تایید، یا حتی واکنش‌های خاص به صحبت‌های دیگران استفاده شوند.


۳. ویژگی‌های پیشرفته چت و ایموجی‌ها
  • ارسال پیام خصوصی: در برخی تنظیمات، این امکان وجود دارد که کاربران پیام‌هایی فقط برای یک نفر خاص ارسال کنند. این ویژگی می‌تواند برای برقراری ارتباط خصوصی در جلسه‌های گروهی مفید باشد.
  • ایموجی‌های سفارشی: برخی نسخه‌های Jitsi Meet این امکان را می‌دهند که مجموعه‌ای از ایموجی‌های سفارشی برای سازمان یا پروژه خاص تعریف شوند. این ویژگی می‌تواند برای ایجاد تعاملات جالب‌تر و اختصاصی‌تر مفید باشد.

جمع‌بندی

در Jitsi Meet، ارسال پیام در چت و استفاده از ایموجی‌ها ابزاری ساده و کاربردی برای تعامل بهتر در جلسات آنلاین است. با استفاده از این قابلیت‌ها، کاربران می‌توانند علاوه بر ارتباط صوتی و تصویری، احساسات و واکنش‌های خود را به‌راحتی به دیگران منتقل کنند. این ویژگی‌ها نه‌تنها ارتباط را آسان‌تر می‌کنند، بلکه به برقراری یک محیط دوستانه‌تر و پویا در جلسات کمک می‌کنند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 7. مدیریت جلسات به عنوان Host”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیمات نقش‌ها (Moderator, Guest)” subtitle=”توضیحات کامل”]در Jitsi Meet، قابلیت مدیریت نقش‌ها یکی از ویژگی‌های کلیدی است که به مدیر جلسه (Moderator) امکان می‌دهد تا دسترسی‌ها و مجوزهای مختلف شرکت‌کنندگان را کنترل کند. دو نقش اصلی که در این پلتفرم وجود دارند عبارت‌اند از Moderator (مدیر جلسه) و Guest (مهمان). این تقسیم‌بندی به مدیران جلسات این امکان را می‌دهد که بتوانند کنترل بیشتری بر روند جلسه داشته باشند و فعالیت‌های کاربران را مدیریت کنند.


۱. نقش Moderator (مدیر جلسه)

مدیر جلسه (Moderator) به فردی اطلاق می‌شود که کنترل کامل بر روی تمامی جنبه‌های جلسه دارد. برخی از وظایف و اختیارات مدیر جلسه شامل موارد زیر است:

  • شروع و پایان جلسه: مدیر جلسه می‌تواند جلسه را آغاز یا به پایان برساند.
  • مدیریت شرکت‌کنندگان: مدیر جلسه قادر است شرکت‌کنندگان را وارد یا خارج کند، قطع یا وصل صدای آن‌ها، و یا دوربین‌های آن‌ها را فعال و غیرفعال کند.
  • فعال‌سازی ویژگی‌های امنیتی: مدیر جلسه می‌تواند ویژگی‌هایی مانند “Waiting Room” (اتاق انتظار) و “Password Protection” (حفاظت با رمز عبور) را فعال یا غیرفعال کند.
  • پخش یا توقف ویدیوها و اشتراک‌گذاری صفحه: مدیر جلسه می‌تواند اجازه دهد یا مانع از اشتراک‌گذاری صفحه توسط شرکت‌کنندگان شود.
  • تنظیمات چت: مدیر می‌تواند دسترسی به چت را محدود کند یا پیام‌های خاص را پاک کند.
  • تعیین نقش‌های دیگر: مدیر جلسه می‌تواند شرکت‌کنندگان را به عنوان مدیرهای جدید تعیین کند.

۲. نقش Guest (مهمان)

مهمان‌ها به کاربران معمولی گفته می‌شود که به جلسه ملحق می‌شوند، اما نقش مدیریتی ندارند. مهمان‌ها دسترسی محدودتری دارند و برخی از اختیارات آن‌ها به نسبت مدیر جلسه محدود است. ویژگی‌های نقش مهمان عبارتند از:

  • محدودیت در مدیریت جلسه: مهمان‌ها نمی‌توانند شرکت‌کنندگان دیگر را حذف یا مدیریت کنند.
  • محدودیت در فعال‌سازی یا غیرفعال کردن قابلیت‌ها: مهمان‌ها نمی‌توانند ویژگی‌هایی مانند اشتراک‌گذاری صفحه، قطع صدای دیگران یا غیرفعال کردن دوربین‌های دیگر شرکت‌کنندگان را تغییر دهند.
  • محدودیت در کنترل چت: مهمان‌ها ممکن است قادر نباشند پیام‌های چت را حذف کنند یا به برخی از بخش‌های چت دسترسی نداشته باشند.

۳. تنظیمات نقش‌ها در Jitsi Meet

در Jitsi Meet، می‌توانید از طریق تنظیمات پیشرفته جلسه، نقش‌ها را مدیریت کنید. برخی از این تنظیمات عبارتند از:

  • نقش خودکار برای پیوستن: تنظیمات پیش‌فرض می‌تواند به‌طور خودکار نقش‌ها را برای کاربران جدید تعیین کند (برای مثال، کاربران می‌توانند به‌صورت مهمان به جلسه ملحق شوند).
  • انتخاب مدیر جلسه: در برخی موارد، مدیر جلسه می‌تواند به‌طور دستی نقش‌های دیگر را به مهمان‌ها تخصیص دهد. این ویژگی برای جلسات بزرگ‌تر که نیاز به چندین مدیر دارد، مفید است.
  • قابلیت‌های ویژه مهمان‌ها: تنظیمات مختلف ممکن است به مهمان‌ها اجازه دهند تا دسترسی‌هایی مانند فعال‌سازی میکروفن یا دوربین را درخواست کنند، که در صورت تایید توسط مدیر جلسه، به آن‌ها داده می‌شود.

جمع‌بندی

تنظیمات نقش‌ها در Jitsi Meet، یعنی تفکیک کاربران به Moderator و Guest، به مدیران جلسه این امکان را می‌دهد که کنترل دقیقی بر روی روند جلسه و دسترسی‌های مختلف داشته باشند. این ویژگی به ویژه در جلسات بزرگ و سازمانی اهمیت پیدا می‌کند، زیرا اجازه می‌دهد که مدیریت بهتری بر روی شرکت‌کنندگان و فعالیت‌های آن‌ها اعمال شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نحوه تعیین میزبان پیش‌فرض (JWT/Auth)” subtitle=”توضیحات کامل”]در Jitsi Meet، برای تعیین میزبان پیش‌فرض و مدیریت احراز هویت کاربران، می‌توان از JSON Web Token (JWT) و تنظیمات احراز هویت (Auth) استفاده کرد. این تنظیمات به شما این امکان را می‌دهند که به‌طور دقیق مشخص کنید که چه کسی به جلسات دسترسی پیدا کند و چه مجوزهایی برای هر کاربر موجود باشد. این قابلیت به ویژه در پروژه‌های سازمانی و برای جلسات ایمن‌تر بسیار مفید است.


۱. استفاده از JWT برای احراز هویت

JWT (JSON Web Token) یک استاندارد امن برای ارسال اطلاعات بین طرفین است که می‌توان آن را برای احراز هویت و تعیین میزبان پیش‌فرض در Jitsi Meet استفاده کرد. با استفاده از JWT، می‌توان به راحتی شناسایی کرد که یک کاربر در کجا قرار دارد، چه دسترسی‌هایی دارد و آیا می‌تواند به جلسه ملحق شود یا خیر.

برای استفاده از JWT در Jitsi Meet، باید مراحل زیر را انجام دهید:

  • تولید توکن JWT: برای هر کاربر باید یک توکن JWT ایجاد شود که اطلاعات لازم برای احراز هویت را شامل شود (مانند نام کاربری، نقش و اعتبارسنجی دیگر).
  • پیکربندی Jitsi Meet برای پذیرش JWT: برای این که Jitsi Meet بتواند توکن‌های JWT را تشخیص دهد و پردازش کند، باید تنظیمات خاصی را در فایل پیکربندی اعمال کنید.
مراحل پیکربندی:
  1. ایجاد و نصب کتابخانه JWT: ابتدا باید کتابخانه‌های JWT را بر روی سرور Jitsi Meet خود نصب کنید. این کتابخانه‌ها به شما این امکان را می‌دهند که توکن‌های JWT را تولید و بررسی کنید.
  2. پیکربندی فایل‌های پیکربندی: در فایل‌های پیکربندی Jitsi Meet، به ویژه در فایل config.js، باید گزینه‌های مربوط به JWT را فعال کنید. برای این کار، می‌توانید به تنظیمات زیر اشاره کنید:
    authentication: 'jwt',
    jwt: {
        enabled: true,
        // کلید خصوصی JWT که برای تولید توکن استفاده می‌شود
        secret: 'your_secret_key',
        issuer: 'your_issuer',
        audience: 'your_audience',
    },
  1. تولید توکن JWT: شما می‌توانید توکن‌های JWT را با استفاده از زبان‌های برنامه‌نویسی مختلف مانند Python یا Node.js تولید کنید. برای این کار باید اطلاعاتی مانند issuer، audience، exp (تاریخ انقضا) و role را در توکن قرار دهید.
  2. ارسال توکن JWT به Jitsi Meet: هنگام پیوستن به یک جلسه، شما باید توکن JWT را به عنوان بخشی از URL یا در درخواست‌های HTTP ارسال کنید. Jitsi Meet از این توکن‌ها برای شناسایی و تأیید دسترسی کاربران استفاده خواهد کرد.

۲. استفاده از احراز هویت (Auth) برای تعیین میزبان پیش‌فرض

در صورتی که از روش‌های احراز هویت سنتی مانند نام‌کاربری و رمز عبور استفاده می‌کنید، می‌توانید از تنظیمات Auth برای محدود کردن دسترسی و تعیین میزبان پیش‌فرض استفاده کنید. این کار معمولاً به این صورت است که تنها کاربران دارای دسترسی خاص می‌توانند به جلسه ملحق شوند.

مراحل پیکربندی احراز هویت (Auth):
  1. فعال‌سازی احراز هویت در فایل پیکربندی: در فایل پیکربندی /etc/jitsi/meet/<your-domain>-config.js، تنظیمات مربوط به احراز هویت را فعال کنید:
    authentication: 'password',
    authUrl: 'https://your-auth-server.com',
  1. راه‌اندازی سرور احراز هویت: شما می‌توانید یک سرور احراز هویت خودتان ایجاد کنید یا از سرویس‌های آماده برای این کار استفاده کنید. سرور احراز هویت معمولاً از طریق API توکن‌ها را تولید و ارسال می‌کند.
  2. مدیریت دسترسی به جلسه: پس از فعال‌سازی احراز هویت، تنها کاربرانی که رمز عبور صحیح دارند یا توکن JWT معتبر دریافت کرده‌اند می‌توانند به جلسه پیوسته و نقش‌های مختلف را بر اساس پیکربندی دریافت کنند.

جمع‌بندی

استفاده از JWT و احراز هویت (Auth) در Jitsi Meet به شما این امکان را می‌دهد که دسترسی به جلسات را کنترل کرده و تنها به کاربران مشخص اجازه پیوستن به جلسه را بدهید. این روش‌ها به‌ویژه در پروژه‌های سازمانی که امنیت و کنترل دقیق نیاز است، کاربردی خواهند بود. از طریق این تنظیمات می‌توانید میزبان پیش‌فرض را برای هر جلسه تعیین کرده و دسترسی‌های مختلف کاربران را مدیریت کنید.

 

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”کنترل دسترسی به میکروفون و دوربین کاربران دیگر” subtitle=”توضیحات کامل”]در Jitsi Meet، مدیران جلسات (Moderators) امکان کنترل دسترسی به میکروفون و دوربین کاربران دیگر را دارند. این قابلیت به مدیران جلسه این اجازه را می‌دهد که کنترل بیشتری بر روی جلسه داشته باشند و از اختلالات صوتی و تصویری جلوگیری کنند.


۱. کنترل دستی میکروفون و دوربین کاربران

مدیر جلسه می‌تواند به صورت دستی میکروفون و دوربین هر کاربر را قطع کند. این کار معمولاً زمانی که یک کاربر صدا یا تصویر اضافی ایجاد می‌کند یا قصد دارد سکوت کند، مفید است.

برای انجام این کار:

  1. قطع میکروفون:
    • مدیر جلسه می‌تواند میکروفون یک کاربر را از طریق رابط کاربری Jitsi قطع کند. کافیست روی آیکون میکروفون کاربر مورد نظر کلیک کرده و گزینه “Mute” را انتخاب کنید.
  2. قطع دوربین:
    • مشابه با قطع میکروفون، برای قطع دوربین نیز مدیر می‌تواند روی آیکون دوربین کاربر کلیک کرده و گزینه “Turn off video” را انتخاب کند.

۲. فعال‌سازی و غیرفعال‌سازی خودکار میکروفون و دوربین

Jitsi Meet به‌طور پیش‌فرض به کاربران این امکان را می‌دهد که میکروفون و دوربین خود را روشن یا خاموش کنند. با این حال، مدیر جلسه می‌تواند برای بهبود تجربه جلسه، این دسترسی‌ها را مدیریت کند.

برای فعال‌سازی یا غیرفعال‌سازی میکروفون و دوربین به صورت خودکار:

  1. میکروفون:
    • در صورت تنظیمات پیش‌فرض، کاربران می‌توانند میکروفون خود را روشن یا خاموش کنند. در صورتی که نیاز به محدود کردن این امکان دارید، می‌توانید از طریق تنظیمات فایروال یا تغییرات در پیکربندی، این امکان را برای کاربران غیر فعال کنید.
  2. دوربین:
    • دوربین کاربران می‌تواند به‌طور مشابه قطع یا وصل شود. در تنظیمات جلسه، مدیران می‌توانند به‌طور پیش‌فرض تعیین کنند که آیا دوربین‌ها باید فعال باشند یا خیر.

۳. مدیریت پیشرفته کنترل میکروفون و دوربین از طریق پیکربندی

برای کنترل پیشرفته‌تر دسترسی به میکروفون و دوربین، می‌توانید برخی از تنظیمات را در فایل‌های پیکربندی Jitsi Meet تغییر دهید.

برای پیکربندی محدودیت‌های پیش‌فرض:

  1. در فایل config.js، شما می‌توانید تنظیماتی برای غیرفعال کردن میکروفون یا دوربین در هنگام ورود به جلسه برای کاربران جدید اعمال کنید:
    startWithAudioMuted: true,  // غیرفعال کردن میکروفون برای کاربرانی که به جلسه ملحق می‌شوند
    startWithVideoMuted: true,  // غیرفعال کردن دوربین برای کاربرانی که به جلسه ملحق می‌شوند
  1. علاوه بر این، در صورت استفاده از JWT و احراز هویت برای کنترل دسترسی به جلسات، می‌توانید نقشی مانند “Moderator” (مدیر جلسه) را برای دسترسی به این امکانات به‌طور خودکار تعیین کنید.

جمع‌بندی

کنترل دسترسی به میکروفون و دوربین کاربران دیگر یکی از ویژگی‌های مهم در Jitsi Meet است که به مدیران جلسه این امکان را می‌دهد که تجربه جلسه را بهبود دهند و از اختلالات صوتی و تصویری جلوگیری کنند. این کنترل می‌تواند به‌طور دستی و یا از طریق تنظیمات پیش‌فرض انجام شود. استفاده از پیکربندی‌های دقیق در فایل‌های تنظیمات، به شما این امکان را می‌دهد که دسترسی‌ها را به‌طور دقیق‌تری تنظیم کنید و امنیت جلسه را افزایش دهید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 8. بررسی امنیت اولیه جلسات”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”فعال/غیرفعال کردن رمز ورود جلسه” subtitle=”توضیحات کامل”]یکی از ویژگی‌های کلیدی در Jitsi Meet، قابلیت کنترل دسترسی به جلسات است که به‌ویژه برای حفظ امنیت جلسات آنلاین اهمیت دارد. این قابلیت‌ها شامل مواردی مانند فعال یا غیرفعال کردن رمز ورود جلسه، استفاده از لابی (Lobby) برای پذیرش اعضا، و مدیریت دسترسی به ویژگی‌ها است.


۱. فعال/غیرفعال کردن رمز ورود جلسه

رمز ورود جلسه یکی از روش‌های مؤثر برای جلوگیری از ورود افراد غیرمجاز به جلسات است. با فعال‌سازی این ویژگی، تنها کسانی که رمز ورود را دارند، قادر به پیوستن به جلسه خواهند بود. این روش به‌ویژه در جلسات حساس و خصوصی بسیار مفید است.

برای فعال یا غیرفعال کردن رمز ورود جلسه، باید تنظیمات مربوط به آن را در فایل پیکربندی Jitsi Meet انجام دهید.

  1. فعال‌سازی رمز ورود جلسه: برای فعال‌سازی رمز ورود، به فایل config.js در مسیر /etc/jitsi/meet/ بروید و تنظیمات زیر را اضافه یا ویرایش کنید:
    security: {
        requirePassword: true,  // فعال کردن نیاز به رمز ورود
        password: "your_secure_password"  // تعیین رمز ورود برای جلسه
    }

این تنظیمات باعث می‌شود که برای ورود به هر جلسه، کاربر ملزم به وارد کردن رمز ورود باشد.

  1. غیرفعال کردن رمز ورود جلسه: اگر بخواهید رمز ورود را غیرفعال کنید، کافی است تنظیم requirePassword را روی false تنظیم کنید:
    security: {
        requirePassword: false,  // غیرفعال کردن نیاز به رمز ورود
    }

این تغییر باعث می‌شود که هیچ‌گونه رمز ورودی برای جلسات نیاز نباشد و هر کسی بتواند بدون محدودیت وارد جلسه شود.


۲. استفاده از Lobby (اتاق انتظار)

یکی دیگر از ویژگی‌های امنیتی مهم در Jitsi Meet، امکان فعال‌سازی لابی (Lobby) است که به‌وسیله آن، مدیر جلسه می‌تواند پیش از ورود کاربران به جلسه، آنها را تأیید کند. این ویژگی به مدیر جلسه این امکان را می‌دهد که قبل از ورود کاربران به جلسه، آنها را از طریق لابی مشاهده و تأیید کند.

برای فعال‌سازی Lobby، تنظیمات مربوطه در فایل پیکربندی config.js به‌صورت زیر انجام می‌شود:

    // فعال کردن لابی
    enableLobby: true,  // اجازه ورود به جلسات از طریق لابی

۳. امنیت عمومی جلسه و محدودیت‌های آن
  1. اجازه فقط برای میانه‌روها (Moderators): برای جلوگیری از ورود کاربران غیرمجاز به جلسه، شما می‌توانید فقط میانه‌روها (Moderators) را قادر به مدیریت جلسه و انجام تنظیمات خاص (مثل قطع میکروفون یا دوربین) کنید.
  2. محدودیت‌های نقش‌ها: با استفاده از احراز هویت و تعیین نقش‌ها می‌توانید میزان دسترسی افراد مختلف به جلسه را محدود کنید. برای این منظور می‌توانید از سیستم‌های JWT و احراز هویت استفاده کنید.

جمع‌بندی

فعال و غیرفعال کردن رمز ورود جلسه یکی از روش‌های ساده و مؤثر برای افزایش امنیت جلسات در Jitsi Meet است. علاوه بر این، استفاده از امکاناتی مانند لابی (Lobby) و محدود کردن دسترسی کاربران می‌تواند به امنیت جلسات کمک شایانی کند. تنظیمات دقیق در پیکربندی‌ها این امکان را می‌دهند که شما کنترل کاملی روی دسترسی به جلسات و ویژگی‌های آن داشته باشید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیمات احراز هویت مبتنی بر Prosody” subtitle=”توضیحات کامل”]یکی از اجزای مهم در Jitsi Meet، سرور XMPP است که توسط Prosody مدیریت می‌شود. در این بخش، به بررسی نحوه تنظیمات احراز هویت با استفاده از Prosody خواهیم پرداخت. این احراز هویت می‌تواند شامل احراز هویت ساده برای کاربران عمومی یا احراز هویت پیچیده‌تر با استفاده از روش‌های مختلفی مانند JWT، LDAP و … باشد.

۱. پیکربندی احراز هویت در Prosody

برای تنظیم احراز هویت، ابتدا باید فایل پیکربندی مربوط به Prosody را ویرایش کنید. این فایل معمولاً در مسیر زیر قرار دارد:

/etc/prosody/prosody.cfg.lua

در این فایل، شما می‌توانید انواع مختلف احراز هویت را پیکربندی کنید.

۲. پیکربندی احراز هویت ساده (حساب کاربری محلی)

برای تنظیم احراز هویت ساده، می‌توانید حساب‌های کاربری را به صورت دستی در Prosody ایجاد کنید و این حساب‌ها برای ورود به جلسات Jitsi Meet مورد استفاده قرار خواهند گرفت.

  1. ابتدا باید در Prosody یک کاربر جدید ایجاد کنید:
    prosodyctl adduser username@domain.com
    

    پس از اجرای این دستور، از شما خواسته می‌شود که رمز عبور کاربر جدید را وارد کنید.

  2. پس از ایجاد کاربر، به فایل پیکربندی prosody.cfg.lua بروید و تنظیمات احراز هویت را طبق نیازتان تغییر دهید. برای احراز هویت با حساب‌های محلی، این بخش از فایل پیکربندی باید به‌صورت زیر باشد:
authentication = "internal_plain"

این تنظیمات به Prosody اعلام می‌کنند که احراز هویت با استفاده از حساب‌های داخلی Prosody انجام شود.

۳. استفاده از احراز هویت بر پایه JWT

در بسیاری از مواقع، برای افزایش امنیت و مدیریت دسترسی، احراز هویت مبتنی بر JWT (JSON Web Tokens) استفاده می‌شود. این روش به شما این امکان را می‌دهد که کاربران با توکن‌های خاص وارد سیستم شوند.

  1. برای فعال‌سازی احراز هویت JWT در Prosody، ابتدا باید بسته mod_auth_jwt را نصب کنید. این بسته برای احراز هویت کاربران از طریق توکن‌های JWT استفاده می‌شود.پس از نصب، باید ماژول mod_auth_jwt را به فایل پیکربندی prosody.cfg.lua اضافه کنید:
modules_enabled = {
   "auth_jwt";
   -- سایر ماژول‌ها
}
  1. سپس، تنظیمات مربوط به ماژول auth_jwt را در فایل پیکربندی اضافه کنید:
VirtualHost "domain.com"
   authentication = "jwt"
   jwt_public_key = "/etc/prosody/certs/jwt_public.key"  -- مسیر به کلید عمومی
   jwt_algorithm = "HS256"  -- نوع الگوریتم JWT

این تنظیمات، Prosody را به گونه‌ای پیکربندی می‌کند که فقط کاربرانی که توکن JWT معتبر دارند، می‌توانند وارد شوند.

۴. پیکربندی احراز هویت با LDAP

برای استفاده از LDAP به‌عنوان روش احراز هویت، می‌توانید ماژول mod_auth_ldap را فعال کنید. این روش به شما این امکان را می‌دهد که از دیتابیس LDAP برای احراز هویت کاربران استفاده کنید.

  1. ابتدا باید ماژول mod_auth_ldap را نصب و فعال کنید. سپس آن را به لیست ماژول‌های فعال اضافه کنید:
modules_enabled = {
   "auth_ldap";
   -- سایر ماژول‌ها
}
  1. تنظیمات مربوط به LDAP را در فایل پیکربندی prosody.cfg.lua به‌صورت زیر اضافه کنید:
VirtualHost "domain.com"
   authentication = "ldap"
   ldap_host = "ldap://ldap-server"  -- آدرس سرور LDAP
   ldap_base = "ou=users,dc=domain,dc=com"  -- مسیر LDAP
   ldap_bind_dn = "cn=admin,dc=domain,dc=com"  -- نام کاربری برای اتصال به LDAP
   ldap_password = "password"  -- رمز عبور اتصال

این تنظیمات باعث می‌شود که Prosody از LDAP برای احراز هویت کاربران استفاده کند.

۵. پیکربندی و کنترل دسترسی به منابع

با تنظیم احراز هویت، شما همچنین می‌توانید دسترسی به منابع خاص را کنترل کنید. به‌عنوان مثال، می‌توانید برای یک دامنه خاص یا گروه‌های خاص از کاربران، اجازه دسترسی به جلسات Jitsi Meet را محدود کنید.

در تنظیمات Prosody، می‌توانید دسترسی کاربران را به‌صورت دقیق‌تر تعیین کنید، برای مثال:

admins = { "admin@domain.com" }

این تنظیمات باعث می‌شود که فقط کاربران با ایمیل مشخص شده قادر به مدیریت و تنظیم جلسات باشند.


جمع‌بندی

در این بخش، نحوه تنظیم احراز هویت در Prosody برای Jitsi Meet بررسی شد. با استفاده از احراز هویت محلی، JWT و LDAP می‌توان دسترسی به جلسات را به‌شکل مؤثری مدیریت کرد. انتخاب روش احراز هویت بستگی به نیازهای امنیتی و ساختار سازمان شما دارد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”محدودسازی دسترسی میهمانان (Guest Domain vs Auth Domain)” subtitle=”توضیحات کامل”]در Jitsi Meet، مدیریت دسترسی به جلسات و منابع می‌تواند با استفاده از دو مفهوم Guest Domain و Auth Domain انجام شود. این مفاهیم به شما این امکان را می‌دهند که به‌صورت دقیق‌تری دسترسی کاربران مختلف (مانند میهمانان و کاربران احراز هویت‌شده) را کنترل کنید. در این بخش به تفاوت‌ها و نحوه پیکربندی این دو دامنه می‌پردازیم.

۱. Guest Domain

Guest Domain به کاربران یا میهمانانی که نیاز به احراز هویت ندارند، اشاره دارد. این دامنه به شما این امکان را می‌دهد که اجازه دهید افرادی که توکن احراز هویت ندارند، به جلسات بپیوندند.

برای محدود کردن دسترسی به میهمانان، شما می‌توانید دامنه‌ای خاص را به عنوان Guest Domain تعیین کنید. کاربران وارد این دامنه می‌شوند بدون اینکه نیاز به انجام فرآیند احراز هویت داشته باشند.

در فایل پیکربندی Prosody، بخش Guest Domain به‌صورت زیر پیکربندی می‌شود:

VirtualHost "guest.domain.com"
   authentication = "anonymous"
   allow_anonymous = true

در این تنظیمات:

  • authentication = "anonymous" به این معنی است که احراز هویت انجام نمی‌شود.
  • allow_anonymous = true این اجازه را می‌دهد که میهمانان بدون هیچ‌گونه احراز هویت وارد شوند.

این روش مناسب برای دسترسی آزاد به جلسات است، اما باید توجه داشته باشید که این حالت از امنیت پایین‌تری برخوردار است.

۲. Auth Domain

Auth Domain به دامنه‌ای اشاره دارد که در آن از کاربران خواسته می‌شود که ابتدا احراز هویت کنند تا به جلسات دسترسی پیدا کنند. این دامنه معمولاً برای کاربرانی استفاده می‌شود که از سیستم‌های احراز هویت مانند JWT یا LDAP برای ورود به سیستم استفاده می‌کنند.

برای تنظیم Auth Domain، ابتدا باید مطمئن شوید که احراز هویت فعال است. این احراز هویت می‌تواند از روش‌های مختلفی مانند JWT یا LDAP استفاده کند. پس از پیکربندی احراز هویت، می‌توانید دامنه مخصوص برای کاربران احراز هویت‌شده را تعیین کنید.

پیکربندی دامنه احراز هویت در فایل Prosody به‌صورت زیر است:

VirtualHost "auth.domain.com"
   authentication = "internal_plain"  -- یا هر نوع احراز هویت دیگری
   allow_anonymous = false

در این تنظیمات:

  • authentication = "internal_plain" نشان می‌دهد که احراز هویت از نوع داخلی است و کاربران باید با استفاده از نام کاربری و رمز عبور وارد شوند.
  • allow_anonymous = false تضمین می‌کند که کاربران بدون احراز هویت قادر به ورود به جلسات نخواهند بود.

این روش معمولاً برای سازمان‌هایی که می‌خواهند دسترسی به جلسات را فقط به کاربران تأیید شده محدود کنند، مناسب است.

۳. ترکیب Guest Domain و Auth Domain

در بسیاری از پروژه‌ها، ممکن است بخواهید ترکیبی از هر دو دامنه را استفاده کنید. به این صورت که برخی جلسات باز برای میهمانان فراهم شود و برخی دیگر محدود به کاربران احراز هویت‌شده.

برای مثال، شما می‌توانید یک دامنه خاص برای میهمانان داشته باشید و دامنه‌ای دیگر برای کاربران احراز هویت‌شده. در این صورت، می‌توانید از این تنظیمات استفاده کنید:

-- دامنه میهمان
VirtualHost "guest.domain.com"
   authentication = "anonymous"
   allow_anonymous = true

-- دامنه احراز هویت
VirtualHost "auth.domain.com"
   authentication = "internal_plain"
   allow_anonymous = false

در این پیکربندی:

  • کاربران بدون احراز هویت می‌توانند وارد دامنه guest.domain.com شوند.
  • فقط کاربران احراز هویت‌شده می‌توانند وارد دامنه auth.domain.com شوند.
۴. تأثیر بر دسترسی جلسات

محدودسازی دسترسی بر اساس دامنه‌ها می‌تواند تأثیر زیادی در نحوه ورود کاربران به جلسات داشته باشد. برای مثال:

  • Guest Domain: به کاربران امکان می‌دهد تا بدون نیاز به احراز هویت به جلسات عمومی بپیوندند.
  • Auth Domain: تنها کاربران تأیید شده با احراز هویت می‌توانند به جلسات حساس‌تر یا سازمانی دسترسی داشته باشند.

این تقسیم‌بندی به شما این امکان را می‌دهد که به‌راحتی دسترسی‌ها را بسته به نیازهای خاص پروژه خود مدیریت کنید.


جمع‌بندی

مفهوم Guest Domain و Auth Domain به شما این امکان را می‌دهد که دسترسی به جلسات را به‌طور دقیق مدیریت کنید. با استفاده از Guest Domain، می‌توانید به میهمانان اجازه دهید که بدون احراز هویت وارد جلسات شوند، در حالی که با استفاده از Auth Domain، تنها کاربران احراز هویت‌شده می‌توانند به جلسات دسترسی پیدا کنند. این تقسیم‌بندی به شما این امکان را می‌دهد که امنیت و دسترسی به جلسات را طبق نیازهای پروژه خود تنظیم کنید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 9. زبان‌بندی و بومی‌سازی (Localization)”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیم زبان پیش‌فرض در interface_config.js” subtitle=”توضیحات کامل”]در Jitsi Meet، برای تنظیم زبان پیش‌فرض رابط کاربری، از فایل پیکربندی interface_config.js استفاده می‌شود. این فایل به شما این امکان را می‌دهد که زبان رابط کاربری را تغییر دهید و تنظیمات دیگری مانند نحوه نمایش منوها و گزینه‌های مختلف را مدیریت کنید.

۱. مکان فایل interface_config.js

فایل interface_config.js معمولاً در مسیر زیر قرار دارد:

/etc/jitsi/meet/<domain>-config.js

در این فایل، تنظیمات مختلف رابط کاربری از جمله زبان، طرح‌بندی، و ویژگی‌های ظاهری کنترل می‌شود.

۲. تنظیم زبان پیش‌فرض

برای تنظیم زبان پیش‌فرض رابط کاربری، کافی است که در فایل interface_config.js تنظیمات مربوط به زبان را تغییر دهید. زبان پیش‌فرض از طریق گزینه DEFAULT_LANGUAGE مشخص می‌شود.

برای تغییر زبان، به بخش زیر در فایل interface_config.js بروید:

// تنظیم زبان پیش‌فرض
DEFAULT_LANGUAGE: 'en', // اینجا زبان موردنظر خود را وارد کنید

در اینجا، 'en' نشان‌دهنده زبان انگلیسی است. برای تغییر زبان به فارسی، به‌طور مثال می‌توانید از 'fa' استفاده کنید:

DEFAULT_LANGUAGE: 'fa', // زبان فارسی

مقدارهای مختلفی برای زبان‌ها وجود دارد که می‌توانید از آن‌ها استفاده کنید. برخی از زبان‌های رایج به شرح زیر هستند:

  • en: زبان انگلیسی
  • fa: زبان فارسی
  • de: زبان آلمانی
  • es: زبان اسپانیایی
  • fr: زبان فرانسوی
۳. دستیابی به تنظیمات زبان‌های اضافی

در صورتی که می‌خواهید زبان‌های بیشتری را برای رابط کاربری خود فعال کنید یا زبان‌های خاصی را بارگذاری کنید، باید اطمینان حاصل کنید که این زبان‌ها در فایل‌های ترجمه موجود در Jitsi Meet پیکربندی شده‌اند.

این فایل‌ها معمولاً در مسیر زیر قرار دارند:

/usr/share/jitsi-meet/lang/

در این مسیر، فایل‌هایی با پسوند .json برای هر زبان وجود دارند. اگر زبان موردنظر شما در این مسیر موجود نباشد، می‌توانید فایل زبان جدیدی اضافه کرده یا زبان موجود را ویرایش کنید.

۴. راه‌اندازی مجدد برای اعمال تغییرات

بعد از انجام تغییرات در فایل interface_config.js و تعیین زبان پیش‌فرض، برای اعمال تغییرات باید سرویس‌های Jitsi را ریستارت کنید. این کار معمولاً با استفاده از دستورات زیر انجام می‌شود:

sudo systemctl restart jitsi-videobridge
sudo systemctl restart jicofo
sudo systemctl restart prosody

با این کار، تغییرات شما به‌طور کامل اعمال خواهد شد.


جمع‌بندی

برای تنظیم زبان پیش‌فرض در رابط کاربری Jitsi Meet، می‌توانید فایل interface_config.js را ویرایش کرده و مقدار DEFAULT_LANGUAGE را به زبان دلخواه خود تغییر دهید. این تنظیمات به شما این امکان را می‌دهند که تجربه کاربری را متناسب با نیازهای پروژه و مخاطبان خود سفارشی کنید. پس از اعمال تغییرات، باید سرویس‌های Jitsi را ریستارت کنید تا تنظیمات جدید اعمال شوند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”افزودن پشتیبانی از زبان فارسی یا دیگر زبان‌ها” subtitle=”توضیحات کامل”]برای افزودن پشتیبانی از زبان‌های جدید در Jitsi Meet، باید چندین مرحله را طی کنید تا مطمئن شوید که رابط کاربری به درستی به زبان جدید نمایش داده می‌شود. این مراحل شامل بارگذاری فایل‌های ترجمه زبان جدید و تنظیم زبان پیش‌فرض است.

۱. بررسی فایل‌های ترجمه موجود

در ابتدا باید بررسی کنید که آیا فایل‌های ترجمه برای زبان‌های موردنظر شما (مثلاً فارسی) در سیستم شما موجود است یا خیر. این فایل‌ها معمولاً در مسیر زیر قرار دارند:

/usr/share/jitsi-meet/lang/

در این مسیر، برای هر زبان یک فایل JSON وجود دارد که ترجمه‌های مربوط به آن زبان را شامل می‌شود. به‌عنوان مثال، فایل en.json برای زبان انگلیسی و فایل fa.json برای زبان فارسی موجود است.

۲. اضافه کردن یا ویرایش فایل ترجمه

اگر فایل ترجمه برای زبان فارسی یا زبان دیگر وجود ندارد، می‌توانید فایل جدیدی برای آن زبان بسازید یا فایل موجود را ویرایش کنید.

برای افزودن پشتیبانی از زبان فارسی:

  1. اگر فایل fa.json در پوشه lang موجود نیست، می‌توانید فایل جدیدی با نام fa.json بسازید.
  2. محتوای این فایل باید شامل ترجمه‌های مناسب برای اجزای رابط کاربری Jitsi Meet باشد. به‌عنوان مثال:
{
    "startCall": "شروع تماس",
    "endCall": "پایان تماس",
    "mute": "بی‌صدا",
    "unmute": "باز کردن صدا",
    "camera": "دوربین",
    "shareScreen": "اشتراک‌گذاری صفحه",
    "chat": "چت",
    "participants": "شرکت‌کنندگان"
    // سایر ترجمه‌ها را بر اساس نیاز اضافه کنید.
}
  1. فایل ترجمه را در مسیر زیر ذخیره کنید:
/usr/share/jitsi-meet/lang/fa.json
۳. ویرایش فایل interface_config.js

پس از افزودن فایل ترجمه، باید فایل interface_config.js را ویرایش کنید تا زبان جدید در دسترس قرار گیرد.

  1. فایل interface_config.js را در مسیر زیر پیدا کنید:
/etc/jitsi/meet/<domain>-config.js
  1. در این فایل، تنظیمات زبان پیش‌فرض را تغییر دهید و زبان فارسی را به‌عنوان گزینه‌ای برای انتخاب در منو قرار دهید.
  2. قسمت مربوط به زبان‌ها را به شکل زیر ویرایش کنید:
LANGUAGES: {
    'en': 'English',
    'fa': 'فارسی',
    'de': 'Deutsch',
    'es': 'Español',
    // سایر زبان‌ها را اضافه کنید
},
  1. برای تنظیم زبان پیش‌فرض به فارسی، گزینه DEFAULT_LANGUAGE را به 'fa' تغییر دهید:
DEFAULT_LANGUAGE: 'fa', // زبان فارسی
۴. ریستارت کردن سرویس‌های Jitsi

برای اعمال تغییرات، باید سرویس‌های Jitsi را ریستارت کنید تا فایل‌های ترجمه جدید بارگذاری شوند و زبان‌های جدید در رابط کاربری قابل انتخاب باشند.

sudo systemctl restart jitsi-videobridge
sudo systemctl restart jicofo
sudo systemctl restart prosody
۵. تست زبان جدید

پس از اعمال تغییرات، به رابط کاربری Jitsi Meet مراجعه کنید و بررسی کنید که زبان فارسی یا زبان جدید به‌درستی در دسترس است. برای این منظور، از منوی تنظیمات رابط کاربری، زبان را انتخاب کنید و مطمئن شوید که ترجمه‌ها به‌درستی بارگذاری شده‌اند.


جمع‌بندی

برای افزودن پشتیبانی از زبان فارسی یا هر زبان دیگری در Jitsi Meet، باید فایل ترجمه‌ی آن زبان را در مسیر مناسب قرار داده و تنظیمات مربوط به زبان‌ها را در فایل interface_config.js اعمال کنید. بعد از انجام تغییرات، با ریستارت کردن سرویس‌های Jitsi، زبان جدید در رابط کاربری به نمایش درخواهد آمد و می‌توانید از آن استفاده کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ویرایش رشته‌های نمایشی در UI” subtitle=”توضیحات کامل”]برای ویرایش رشته‌های نمایشی در رابط کاربری Jitsi Meet (مانند دکمه‌ها، پیغام‌ها، و سایر متن‌های موجود در رابط)، می‌توانید فایل‌های ترجمه (JSON) را ویرایش کنید یا با استفاده از تنظیمات مربوطه در فایل‌های پیکربندی، تغییرات دلخواه خود را اعمال کنید.

۱. ویرایش فایل‌های ترجمه (JSON)

رشته‌های نمایشی مختلف در رابط کاربری Jitsi Meet به‌طور پیش‌فرض در فایل‌های ترجمه (که در قالب JSON هستند) ذخیره می‌شوند. این فایل‌ها در مسیر زیر قرار دارند:

/usr/share/jitsi-meet/lang/

در این مسیر، هر زبان دارای فایل JSON خود است. به‌عنوان مثال، برای زبان انگلیسی، فایل en.json و برای زبان فارسی، فایل fa.json وجود دارد. در این فایل‌ها رشته‌های نمایشی مانند دکمه‌ها، پیام‌ها و برچسب‌ها تعریف می‌شوند.

برای ویرایش این رشته‌ها، باید فایل JSON مربوط به زبان مورد نظر خود را باز کرده و تغییرات موردنظر را اعمال کنید.

مثال: ویرایش رشته‌های نمایشی در فایل en.json

{
    "startCall": "Start Call",
    "endCall": "End Call",
    "mute": "Mute",
    "unmute": "Unmute",
    "camera": "Camera",
    "shareScreen": "Share Screen",
    "chat": "Chat",
    "participants": "Participants"
}

برای تغییر متن‌های نمایشی، کافیست این رشته‌ها را ویرایش کنید. به‌عنوان مثال، اگر می‌خواهید متن “Start Call” را به “شروع تماس” تغییر دهید، کافیست آن را ویرایش کنید:

{
    "startCall": "شروع تماس",
    "endCall": "پایان تماس",
    "mute": "بی‌صدا",
    "unmute": "باز کردن صدا",
    "camera": "دوربین",
    "shareScreen": "اشتراک‌گذاری صفحه",
    "chat": "چت",
    "participants": "شرکت‌کنندگان"
}
۲. ویرایش فایل interface_config.js

گاهی اوقات لازم است که علاوه بر ویرایش رشته‌های نمایشی، تنظیمات دیگری را برای سفارشی‌سازی رابط کاربری انجام دهید. این تنظیمات در فایل interface_config.js قرار دارند.

این فایل معمولاً در مسیر زیر قرار دارد:

/etc/jitsi/meet/<domain>-config.js

در این فایل می‌توانید تنظیمات مختلف رابط کاربری از جمله رنگ‌بندی، استایل‌ها و ویژگی‌های دیگر را سفارشی‌سازی کنید.

برای ویرایش رشته‌های نمایشی، در این فایل می‌توانید برخی تنظیمات مانند عنوان‌های صفحه، متن‌های اضافی یا پیغام‌های خاص را اعمال کنید. به‌عنوان مثال:

// برای تغییر عنوان صفحه
APP_NAME: 'جیتسی میت',
۳. ریستارت سرویس‌ها

پس از ویرایش فایل‌های ترجمه و فایل پیکربندی، باید سرویس‌های Jitsi را ریستارت کنید تا تغییرات اعمال شوند:

sudo systemctl restart jitsi-videobridge
sudo systemctl restart jicofo
sudo systemctl restart prosody
۴. تست تغییرات

پس از اعمال تغییرات و ریستارت کردن سرویس‌ها، رابط کاربری Jitsi Meet را بررسی کنید تا مطمئن شوید که رشته‌های نمایشی به درستی و طبق تنظیمات جدید نمایش داده می‌شوند.


جمع‌بندی

برای ویرایش رشته‌های نمایشی در رابط کاربری Jitsi Meet، باید فایل‌های ترجمه JSON را ویرایش کرده و تغییرات لازم را اعمال کنید. همچنین، تنظیمات اضافی می‌توانند از طریق فایل interface_config.js انجام شوند. پس از انجام تغییرات، سرویس‌ها باید ریستارت شوند تا تغییرات به‌طور مؤثر اعمال شوند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 10. کار با نسخه‌های موبایل و اپلیکیشن Jitsi Meet”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”مرور ویژگی‌های نسخه موبایل وب (Responsive)” subtitle=”توضیحات کامل”]نسخه موبایل وب Jitsi Meet به‌طور خاص برای ارائه تجربه کاربری بهینه بر روی دستگاه‌های مختلف (مانند گوشی‌های هوشمند و تبلت‌ها) طراحی شده است. این نسخه تمامی ویژگی‌های اصلی جلسات ویدیویی را حفظ می‌کند و در عین حال با نمایش و عملکرد بهینه، امکان استفاده راحت‌تر را فراهم می‌آورد.

۱. طراحی ریسپانسیو (Responsive Design)

نسخه موبایل Jitsi Meet به‌صورت کاملاً ریسپانسیو طراحی شده است. این به این معنی است که رابط کاربری به‌طور خودکار خود را با اندازه صفحه نمایش دستگاه‌های مختلف تنظیم می‌کند. هنگام استفاده از Jitsi Meet در دستگاه‌های موبایل، تمام عناصر رابط کاربری مانند دکمه‌ها، پنل‌های چت و منوها به‌گونه‌ای مرتب می‌شوند که استفاده از آن‌ها آسان و بدون مشکلات اسکرول افقی باشد.

  • چیدمان خودکار: به‌طور خودکار اندازه و چیدمان منوها و دکمه‌ها به تناسب صفحه نمایش دستگاه تغییر می‌کند.
  • دکمه‌های شناور: برخی از دکمه‌های مهم مانند قطع صدا، دوربین، اشتراک‌گذاری صفحه به صورت شناور در پایین صفحه قرار دارند تا دسترسی سریع به آن‌ها از هر بخش صفحه امکان‌پذیر باشد.
۲. پشتیبانی از تماس‌های ویدیویی و صوتی

Jitsi Meet در نسخه موبایل وب خود امکان برقراری تماس‌های ویدیویی و صوتی را فراهم می‌آورد. کاربران می‌توانند با استفاده از دوربین گوشی یا تبلت خود وارد جلسات شوند و از قابلیت‌های مربوط به کنترل صدا و تصویر بهره‌مند شوند.

  • ویدیو با کیفیت بالا: تماس‌های ویدیویی با کیفیت بالا روی دستگاه‌های موبایل پشتیبانی می‌شود.
  • میکروفون و دوربین: کاربران می‌توانند میکروفون و دوربین خود را به راحتی فعال یا غیرفعال کنند.
۳. چت و ارسال پیام

چت در نسخه موبایل وب Jitsi Meet به‌طور کامل پشتیبانی می‌شود. کاربران می‌توانند از طریق چت پیام‌های متنی ارسال کنند، فایل‌ها را به اشتراک بگذارند و حتی از ایموجی‌ها استفاده کنند. این ویژگی‌ها به‌طور کامل با صفحه‌نمایش کوچک گوشی‌های موبایل هماهنگ شده‌اند.

  • چت متنی: امکان ارسال و دریافت پیام‌های متنی در حین جلسه.
  • استفاده از ایموجی‌ها: کاربران می‌توانند از ایموجی‌ها در چت استفاده کنند تا احساسات خود را بهتر منتقل کنند.
  • اشتراک‌گذاری فایل‌ها: امکان ارسال فایل‌ها در چت.
۴. پشتیبانی از اشتراک‌گذاری صفحه (Screen Sharing)

یکی از ویژگی‌های مهم نسخه موبایل وب Jitsi Meet، پشتیبانی از اشتراک‌گذاری صفحه است. کاربران می‌توانند صفحه نمایش گوشی یا تبلت خود را به اشتراک بگذارند و محتوای دستگاه خود را برای سایر شرکت‌کنندگان به نمایش بگذارند. این ویژگی به‌طور ویژه برای جلسات آموزشی یا همکاری‌های تیمی مفید است.

  • اشتراک‌گذاری صفحه موبایل: کاربران می‌توانند به راحتی صفحه گوشی خود را برای سایرین به نمایش بگذارند.
  • اشتراک‌گذاری اپلیکیشن‌ها: امکان اشتراک‌گذاری تنها یک اپلیکیشن خاص به‌جای کل صفحه.
۵. ویژگی‌های مدیریتی جلسات

در نسخه موبایل Jitsi Meet، کاربران می‌توانند به‌عنوان میهمان یا میزبان در جلسه حضور یابند. قابلیت‌هایی مانند مدیریت شرکت‌کنندگان، قطع صدا یا مدیریت ویدیوی کاربران دیگر، همچنین فعال‌سازی یا غیرفعال‌سازی ویژگی‌های مختلف جلسه در دسترس است.

  • مدیریت شرکت‌کنندگان: به‌عنوان میزبان، کاربران می‌توانند میهمانان را مدیریت کرده، آن‌ها را از جلسه خارج کنند یا دسترسی آن‌ها را محدود کنند.
  • قابلیت کنترل دسترسی: کاربران می‌توانند میکروفون و دوربین سایر شرکت‌کنندگان را قطع یا فعال کنند.
۶. دسترس‌پذیری و سازگاری با مرورگرهای موبایل

نسخه موبایل وب Jitsi Meet از تمامی مرورگرهای محبوب موبایل مانند Chrome، Firefox و Safari پشتیبانی می‌کند. این پشتیبانی به‌طور کامل تضمین می‌کند که کاربران می‌توانند به‌راحتی از جلسه‌های ویدیویی خود در دستگاه‌های مختلف استفاده کنند بدون اینکه نیاز به نصب اپلیکیشن خاصی داشته باشند.

۷. نرم‌افزارهای کمکی

Jitsi Meet برای دستگاه‌های موبایل از فناوری‌هایی مانند WebRTC استفاده می‌کند که به تماس‌های ویدیویی و صوتی با کیفیت بالا و بدون نیاز به نصب نرم‌افزار خاصی کمک می‌کند.

۸. نوار وضعیت

در نسخه موبایل، نوار وضعیت به‌صورت مختصر نمایش داده می‌شود و شامل اطلاعات پایه‌ای از جمله وضعیت اتصال، میزان مصرف اینترنت، و وضعیت میکروفون و دوربین است.


جمع‌بندی

نسخه موبایل وب Jitsi Meet تجربه کاربری آسان و بهینه‌ای را در دستگاه‌های موبایل فراهم می‌آورد. این نسخه با طراحی ریسپانسیو، پشتیبانی از تماس‌های ویدیویی و صوتی، چت، اشتراک‌گذاری صفحه و مدیریت جلسات، برای تمامی کاربران موبایلی تجربه‌ای مطلوب را به ارمغان می‌آورد. تمام این ویژگی‌ها به‌طور خاص برای موبایل و تبلت‌ها بهینه‌سازی شده‌اند تا استفاده از Jitsi Meet را در هر زمان و مکانی راحت و امکان‌پذیر کنند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”معرفی اپلیکیشن رسمی Jitsi Meet برای iOS و Android” subtitle=”توضیحات کامل”]Jitsi Meet اپلیکیشن رسمی خود را برای سیستم‌های عامل iOS و Android عرضه کرده است. این اپلیکیشن به کاربران این امکان را می‌دهد تا بدون نیاز به مرورگر و به‌طور مستقیم از دستگاه‌های موبایل خود به تماس‌های ویدیویی گروهی وارد شوند. در این بخش، ویژگی‌ها و امکانات اپلیکیشن رسمی Jitsi Meet برای iOS و Android را بررسی خواهیم کرد.

۱. نصب و راه‌اندازی

اپلیکیشن رسمی Jitsi Meet برای هر دو سیستم‌عامل iOS و Android از طریق فروشگاه‌های Google Play Store و Apple App Store به راحتی قابل دانلود و نصب است. پس از نصب، کاربران می‌توانند به‌سرعت وارد جلسات ویدیویی شوند یا جلسات جدید ایجاد کنند.

  • نصب روی iOS: می‌توان اپلیکیشن را از App Store دانلود کرد.
  • نصب روی Android: اپلیکیشن از Google Play Store قابل دریافت است.
۲. ویژگی‌های اصلی

اپلیکیشن رسمی Jitsi Meet برای دستگاه‌های موبایل ویژگی‌های مشابه نسخه وب را ارائه می‌دهد و تمامی قابلیت‌های کلیدی جلسات ویدیویی را در یک قالب بهینه برای موبایل فراهم می‌آورد.

  • تماس‌های ویدیویی و صوتی با کیفیت بالا: کاربران می‌توانند تماس‌های ویدیویی و صوتی با کیفیت بالا برقرار کنند.
  • پشتیبانی از تماس‌های گروهی: امکان ایجاد جلسات ویدیویی گروهی با تعداد زیادی از شرکت‌کنندگان.
  • اشتراک‌گذاری صفحه: کاربران می‌توانند صفحه موبایل خود را برای دیگران به اشتراک بگذارند.
  • میکروفون و دوربین: کنترل کامل بر روی فعال/غیرفعال کردن میکروفون و دوربین.
  • چت متنی: ارسال و دریافت پیام‌های متنی از طریق چت در حین جلسه.
  • استفاده از ایموجی: امکان ارسال ایموجی در چت برای ابراز احساسات.
۳. سفارشی‌سازی و کنترل دسترسی

در اپلیکیشن Jitsi Meet برای موبایل، میزبان‌ها (Moderators) قادرند کنترل‌های پیشرفته‌ای بر روی جلسات داشته باشند:

  • مدیریت میهمانان: حذف میهمانان از جلسه، مدیریت دسترسی به میکروفون و دوربین.
  • قابلیت کنترل دسترسی: فعال/غیرفعال کردن گزینه‌هایی مانند رمز ورود جلسه، احراز هویت و دیگر ویژگی‌های امنیتی.
  • تنظیمات پیشرفته: مدیریت تنظیمات نظیر Lobby (اتاق انتظار) و انتخاب میزبان (Host).
۴. پشتیبانی از دستگاه‌های مختلف

Jitsi Meet برای iOS و Android طراحی شده تا بهترین تجربه کاربری را در دستگاه‌های مختلف به کاربران ارائه دهد. از آنجایی که طراحی اپلیکیشن به‌طور کامل ریسپانسیو است، این اپلیکیشن بر روی تلفن‌های هوشمند و تبلت‌ها به‌خوبی کار می‌کند.

  • دستگاه‌های مختلف: پشتیبانی از گوشی‌های هوشمند و تبلت‌ها با اندازه‌های صفحه مختلف.
  • رزولوشن بالا: پشتیبانی از ویدیوها با کیفیت بالا، حتی در شبکه‌های اینترنتی ضعیف.
۵. امنیت و رمزنگاری

Jitsi Meet در نسخه موبایل نیز از امنیت بالایی برخوردار است. ارتباطات در اپلیکیشن رسمی Jitsi Meet با استفاده از رمزنگاری‌های استاندارد TLS و SRTP ایمن می‌شوند.

  • رمزنگاری تمام‌عیار: رمزنگاری ارتباطات ویدئویی و صوتی از ابتدای ارسال تا دریافت.
  • پشتیبانی از E2EE (End-to-End Encryption): در صورت پیکربندی صحیح، قابلیت رمزنگاری انتها به انتهای (E2EE) در جلسات فعال است.
۶. پشتیبانی از ویژگی‌های پیشرفته

برخی از ویژگی‌های پیشرفته‌ای که در اپلیکیشن موبایل Jitsi Meet گنجانده شده است، به کاربران این امکان را می‌دهد تا تجربه‌ای مشابه نسخه دسکتاپ داشته باشند:

  • پشتیبانی از JWT و Auth: قابلیت فعال‌سازی احراز هویت مبتنی بر JWT و سایر پروتکل‌ها.
  • پشتیبانی از تنظیمات پیشرفته: فعال‌سازی ویژگی‌هایی مانند Lobby، Waiting Room و سایر گزینه‌های امنیتی.
۷. سازگاری با سایر پلتفرم‌ها

Jitsi Meet برای موبایل به‌طور کامل با نسخه وب Jitsi Meet سازگار است. بنابراین، کاربران می‌توانند بدون هیچ مشکلی از جلسات ایجاد شده در نسخه وب یا دستگاه‌های دیگر استفاده کنند.

۸. عملکرد و سرعت

اپلیکیشن Jitsi Meet برای موبایل بهینه‌سازی شده است تا در استفاده طولانی‌مدت و در اتصال‌های اینترنتی مختلف عملکرد مناسبی داشته باشد. برای تضمین بهترین تجربه، اپلیکیشن قابلیت کاهش کیفیت ویدیو در صورت لزوم را دارد تا تجربه تماس ویدیویی پایدارتر شود.

۹. امکانات اضافی
  • پشتیبانی از پس‌زمینه‌های مجازی: کاربران می‌توانند پس‌زمینه جلسات خود را تغییر دهند یا از پس‌زمینه‌های مجازی استفاده کنند.
  • پشتیبانی از کیفیت صدا و تصویر بالا: از جمله ویژگی‌هایی که به‌ویژه برای ارتباطات شغلی و آموزشی مفید است.

جمع‌بندی

اپلیکیشن رسمی Jitsi Meet برای iOS و Android تجربه کاربری بسیار خوبی را برای برگزاری جلسات ویدیویی و صوتی به کاربران ارائه می‌دهد. با ویژگی‌های گسترده‌ای که این اپلیکیشن ارائه می‌دهد، کاربران می‌توانند به‌راحتی به تماس‌های گروهی بپیوندند، جلسات خود را مدیریت کنند و از امنیت بالای ارتباطات بهره‌مند شوند. این اپلیکیشن به‌ویژه برای افرادی که نیاز به برگزاری جلسات ویدیویی در محیط‌های کاری یا آموزشی دارند، ابزاری قدرتمند و مناسب به شمار می‌رود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نحوه اتصال نسخه موبایل Jitsi Meet به سرور اختصاصی” subtitle=”توضیحات کامل”]اتصال نسخه موبایل Jitsi Meet به سرور اختصاصی مشابه فرآیند اتصال نسخه وب است، با این تفاوت که در نسخه موبایل باید برخی تنظیمات به‌طور خاص برای دستگاه‌های موبایل انجام شود. در این بخش، مراحل اتصال نسخه موبایل Jitsi Meet به سرور اختصاصی را بررسی می‌کنیم.

۱. آماده‌سازی سرور اختصاصی

برای اینکه نسخه موبایل به درستی به سرور اختصاصی شما متصل شود، ابتدا باید سرور خود را با تنظیمات مناسب آماده کنید. در اینجا مراحل کلی برای پیکربندی سرور اختصاصی Jitsi Meet آورده شده است:

  • نصب و پیکربندی Jitsi Meet: نصب Jitsi Meet روی سرور اختصاصی و پیکربندی آن طبق دستورالعمل‌های رسمی، شامل پیکربندی Jitsi Videobridge، Jicofo، و Prosody.
  • ایجاد گواهی SSL: ایجاد گواهی SSL از طریق Let’s Encrypt یا هر گواهی معتبر دیگری برای ایمن کردن ارتباطات.
  • پیکربندی DNS: اطمینان حاصل کنید که دامنه شما به درستی به سرور اختصاصی اشاره می‌کند و تنظیمات DNS به‌طور صحیح انجام شده است.
۲. تنظیم دامنه سرور در اپلیکیشن موبایل

برای اتصال نسخه موبایل به سرور اختصاصی، باید دامنه یا آدرس IP سرور خود را در اپلیکیشن وارد کنید. برای انجام این کار، مراحل زیر را دنبال کنید:

  1. افتتاح اپلیکیشن Jitsi Meet: اپلیکیشن Jitsi Meet را در دستگاه موبایل خود باز کنید.
  2. وارد کردن دامنه سرور: پس از باز کردن اپلیکیشن، صفحه‌ای برای وارد کردن URL جلسه یا سرور نمایش داده می‌شود. در این قسمت، شما باید دامنه سرور اختصاصی خود را وارد کنید (به‌طور مثال: https://yourdomain.com).
    • اگر از دامنه استفاده می‌کنید، باید SSL و پروتکل HTTPS فعال باشد.
    • در صورتی که از IP استفاده می‌کنید، باید اطمینان حاصل کنید که دسترسی از شبکه‌های موبایل به سرور شما فراهم است.
۳. تنظیمات SSL در اپلیکیشن موبایل

نسخه موبایل Jitsi Meet به‌طور پیش‌فرض از SSL/TLS برای رمزنگاری ارتباطات استفاده می‌کند. برای اطمینان از اتصال ایمن:

  • گواهی SSL معتبر: از گواهی SSL معتبر برای دامنه سرور استفاده کنید. در صورتی که از Let’s Encrypt استفاده می‌کنید، باید اطمینان حاصل کنید که گواهی به‌درستی تنظیم و اعتبارسنجی شده است.
  • بررسی صحت گواهی SSL: در صورتی که سرور شما از گواهی خود امضا (self-signed certificate) استفاده می‌کند، ممکن است نیاز به انجام تنظیماتی برای پذیرش این گواهی در اپلیکیشن موبایل داشته باشید.
۴. پیکربندی تنظیمات Prosody

در صورت نیاز به احراز هویت کاربران یا دسترسی محدودتر به سرور، باید تنظیمات Prosody را به‌طور مناسب انجام دهید. در این صورت، اطمینان حاصل کنید که تنظیمات XMPP سرور در فایل prosody.cfg.lua به درستی انجام شده است.

۵. پیکربندی فایل jitsi-meet-config.js

در سرور اختصاصی، فایل config.js که در مسیر /etc/jitsi/meet/ قرار دارد، باید به‌طور خاص برای اتصال موبایل تنظیم شود. این فایل را باز کرده و مطمئن شوید که تنظیمات مربوط به bosh و host به‌درستی پیکربندی شده است.

  • تنظیمات BOSH: در صورتی که سرور شما از پروتکل BOSH برای ارتباط با سرور استفاده می‌کند، باید پیکربندی‌های لازم را در این فایل انجام دهید.
  • دامنه: دامنه یا IP سرور اختصاصی باید در این فایل به‌طور صحیح وارد شود.
۶. اتصال به سرور و تست اتصال

پس از وارد کردن تنظیمات مربوطه در اپلیکیشن موبایل و سرور، اپلیکیشن را باز کنید و تست کنید که آیا قادر به اتصال به سرور اختصاصی هستید یا خیر.

  • اتصال به جلسه: برای تست اتصال، می‌توانید یک جلسه جدید ایجاد کنید و از طریق اپلیکیشن موبایل وارد شوید.
  • مراجعه به گزارشات: در صورتی که اتصال به سرور با مشکل مواجه شود، می‌توانید لاگ‌های Jicofo و Videobridge را بررسی کنید تا علت خطا را شناسایی کنید.
۷. اشکال‌زدایی و رفع مشکلات اتصال

اگر مشکلی در اتصال به سرور اختصاصی دارید، این اقدامات را امتحان کنید:

  • بررسی پیکربندی فایروال: اطمینان حاصل کنید که پورت‌های مورد نیاز Jitsi در فایروال سرور باز هستند. پورت‌های 443 و 10000 UDP باید در دسترس باشند.
  • بررسی پیکربندی SSL: اگر اتصال از طریق HTTPS انجام نمی‌شود، مطمئن شوید که گواهی SSL معتبر و تنظیمات آن به درستی پیکربندی شده است.
  • تنظیمات NAT و Proxy: در صورت استفاده از NAT یا پروکسی، اطمینان حاصل کنید که تنظیمات مربوطه در سرور به درستی انجام شده است.

جمع‌بندی

اتصال نسخه موبایل Jitsi Meet به سرور اختصاصی یک فرآیند ساده است که با تنظیم دامنه صحیح، پیکربندی SSL، و تنظیمات مناسب در سرور و اپلیکیشن موبایل قابل انجام است. پس از تنظیم درست، می‌توانید جلسات ویدیویی را به‌راحتی از طریق دستگاه‌های موبایل برگزار کنید و از تمامی امکانات موجود در سرور اختصاصی خود بهره‌برداری کنید.

 [/cdb_course_lesson][/cdb_course_lessons]

[cdb_course_lessons title=”بخش 3. سفارشی‌سازی رابط کاربری”][cdb_course_lesson title=”فصل 1. ساختار رابط کاربری Jitsi Meet”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”آشنایی با معماری رابط کاربری Jitsi (مبتنی بر React)” subtitle=”توضیحات کامل”]رابط کاربری Jitsi Meet به‌صورت کاملاً ماژولار و بر پایه React طراحی شده است. این ساختار مدرن باعث شده تا توسعه‌دهندگان بتوانند به‌راحتی بخش‌های مختلف این نرم‌افزار را سفارشی‌سازی، گسترش یا حذف کنند. استفاده از Redux برای مدیریت وضعیت (state management) در کنار React، امکان مدیریت داده‌ها و تعامل بین کامپوننت‌ها را به شکلی پایدار و قابل‌پیش‌بینی فراهم کرده است. در این بخش به‌طور کامل ساختار معماری رابط کاربری Jitsi Meet را بررسی می‌کنیم و مسیرهای فایل‌ها و ساختار پوشه‌ها را معرفی خواهیم کرد.


ساختار پروژه رابط کاربری Jitsi Meet

کد رابط کاربری Jitsi Meet در پروژه GitHub آن و در مسیر زیر قرار دارد:

/usr/share/jitsi-meet

در صورت کلون کردن سورس کامل پروژه از GitHub، ساختار فولدر مشابه زیر خواهد بود:

jitsi-meet/
├── react/
│   ├── features/
│   ├── modules/
│   ├── base/
│   └── ui/
├── images/
├── css/
├── config.js
├── interface_config.js
└── static/

پوشه react/features/

بخش اصلی رابط کاربری در این مسیر پیاده‌سازی شده است. هر فایل در این دایرکتوری نماینده یک ویژگی یا قابلیت خاص است. برای مثال:

  • features/chat: ماژول مربوط به چت داخلی
  • features/toolbox: منوی پایین برای کنترل صدا، تصویر و اشتراک‌گذاری
  • features/lobby: مدیریت اتاق انتظار و دسترسی کاربران

استفاده از Redux برای مدیریت State

Jitsi از Redux به‌عنوان راهکار مدیریت داده‌ها استفاده می‌کند. استورها، اکشن‌ها و ریدوسرها (reducers) در این مسیرها قرار دارند:

react/features/base/redux/
react/features/base/app/

برای مثال، یک اکشن جهت تغییر تنظیمات UI از نوع زیر است:

dispatch({
    type: 'SET_TOOLBOX_VISIBLE',
    visible: true
});

و ریدوسر متناظر در فایل:

react/features/toolbox/reducer.js

قرار دارد.


چگونگی رندر شدن رابط کاربری

فایل ورودی اصلی رابط کاربری:

react/index.web.js

در این فایل، ReactDOM کل رابط کاربری را در عنصر <div id="react"> در index.html رندر می‌کند:

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('#react')
);

مسیر و مدیریت CSS

برای شخصی‌سازی ظاهر رابط کاربری، فایل‌های CSS در مسیر زیر قرار دارند:

/usr/share/jitsi-meet/css/

و در حالت توسعه (dev mode) معمولاً در سورس کد:

jitsi-meet/css/all.css

توصیه می‌شود تغییرات ظاهری را به‌صورت ماژولار و از طریق override کردن classها انجام دهید.


نحوه کامپایل رابط کاربری پس از تغییرات

اگر Jitsi را از سورس نصب کرده‌اید، پس از هرگونه تغییر در کد رابط کاربری لازم است آن را دوباره build کنید:

npm install
make

در صورتی که فقط فایل‌های استاتیک (مثل CSS یا تصاویر) را تغییر داده‌اید، کافیست از make برای بازسازی استفاده شود:

make

مسیر فایل پیکربندی مربوط به رابط کاربری

برخی تنظیمات رابط کاربری که با React در تعامل هستند، در فایل زیر قرار دارند:

/etc/jitsi/meet/your-domain-config.js

برای مثال، فعال/غیرفعال کردن دکمه اشتراک‌گذاری یا چت:

toolbarButtons: [
    'microphone', 'camera', 'chat', 'desktop', 'hangup'
]

جمع‌بندی

معماری رابط کاربری Jitsi Meet بر پایه React و Redux طراحی شده است تا انعطاف‌پذیری بالا، قابلیت گسترش و عملکرد مناسب در محیط‌های مختلف را فراهم کند. استفاده از ساختار ماژولار در پوشه features امکان توسعه‌ی آسان هر قابلیت را به توسعه‌دهندگان می‌دهد. همچنین، رندر مرکزی از طریق ReactDOM و مدیریت استیت توسط Redux باعث یکپارچگی بالای تجربه کاربری می‌شود. برای هرگونه سفارشی‌سازی ظاهری یا عملکردی، باید به مسیرهای کد و پیکربندی که در این بخش معرفی شد توجه ویژه‌ای داشت.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”معرفی دایرکتوری‌های اصلی UI در Jitsi Meet” subtitle=”توضیحات کامل”]رابط کاربری Jitsi Meet شامل چندین دایرکتوری و فایل پیکربندی است که هرکدام نقش خاصی در ساختار، ظاهر و عملکرد رابط دارند. در این بخش، به‌طور کامل و با جزئیات به معرفی و بررسی عملکرد و کاربرد هرکدام از این مسیرها می‌پردازیم تا بتوانید آن‌ها را به‌درستی برای سفارشی‌سازی، توسعه و نگهداری مورد استفاده قرار دهید.


دایرکتوری react/features/ (ماژول‌های رابط کاربری)

این دایرکتوری، ستون فقرات رابط کاربری Jitsi Meet است و شامل تمام ماژول‌های مستقل React است که هر کدام بخشی از UI را مدیریت می‌کنند. هر زیرپوشه‌ی آن یک ویژگی خاص از رابط کاربری را پیاده‌سازی می‌کند و شامل اجزای زیر است:

  • کامپوننت‌های React (JSX/JS) برای رندر هر بخش
  • استایل‌های مربوطه (CSS-in-JS)
  • Redux actions و reducers برای مدیریت وضعیت
نمونه‌هایی از زیرپوشه‌ها:
  • chat/: مدیریت پنل گفت‌وگوی داخلی
  • toolbox/: منوی پایین شامل دکمه‌های میکروفون، دوربین، اشتراک‌گذاری صفحه و غیره
  • lobby/: کنترل وضعیت لابی و تأیید کاربران
  • participants-pane/: مدیریت و نمایش لیست شرکت‌کنندگان

برای مثال، برای ویرایش UI پنجره چت می‌توانید وارد مسیر زیر شوید:

react/features/chat/components/web/Chat.js

فایل interface_config.js (تنظیمات نمایشی اولیه)

این فایل مسئول تنظیمات ظاهری و رابط کاربری اولیه است. برخلاف config.js که بیشتر به پیکربندی هسته‌ای و امنیتی مربوط است، این فایل بر روی نحوه‌ی نمایش المان‌ها در UI تمرکز دارد.

مسیر فایل:
/usr/share/jitsi-meet/interface_config.js
مثال‌هایی از تنظیمات مهم در این فایل:
APP_NAME: 'Jitsi Meet',
SHOW_JITSI_WATERMARK: false,
DEFAULT_REMOTE_DISPLAY_NAME: 'مهمان',
DISABLE_VIDEO_BACKGROUND: true,
نکته مهم:

در نسخه‌های جدید Jitsi، بیشتر این تنظیمات به مرور به config.js منتقل شده‌اند و فایل interface_config.js نقش محدودتری پیدا کرده است، اما هنوز برای سفارشی‌سازی‌های ظاهری مانند واترمارک و برندینگ استفاده می‌شود.


فایل config.js (تنظیمات عمومی)

این فایل اصلی‌ترین محل برای تعریف تنظیمات عمومی Jitsi Meet است. تمامی تنظیماتی که مربوط به سرور، کاربران، میکروفون، دوربین، کیفیت و موارد امنیتی هستند، در این فایل قرار دارند.

مسیر فایل:
/etc/jitsi/meet/YOUR-DOMAIN-config.js
مثال‌هایی از تنظیمات:
enableNoAudioDetection: true,
startWithAudioMuted: true,
startWithVideoMuted: false,
enableWelcomePage: false,
prejoinPageEnabled: true,
requireDisplayName: true,
toolbarButtons: [
    'microphone', 'camera', 'chat', 'desktop', 'hangup'
]

هر تغییر در این فایل بلافاصله در کلاینت سمت کاربر اعمال می‌شود (بعد از ریفرش صفحه).


دایرکتوری images/ (تصاویر رابط کاربری)

این پوشه حاوی تصاویر و آیکون‌هایی است که در رابط کاربری مورد استفاده قرار می‌گیرند، مانند لوگو، واترمارک، آیکون‌های دکمه‌ها و…

مسیر معمول:
/usr/share/jitsi-meet/images/
نمونه‌هایی از فایل‌ها:
  • watermark.png: برای نمایش واترمارک در گوشه تصویر
  • jitsiLogo.png: لوگوی پیش‌فرض Jitsi
  • icon-share.svg: آیکون اشتراک‌گذاری صفحه

برای تغییر لوگو یا حذف واترمارک کافیست فایل‌ها را با تصاویر دلخواه خود جایگزین کنید.

مثال:

cp custom-logo.png /usr/share/jitsi-meet/images/watermark.png

دایرکتوری css/ (استایل‌های ظاهری)

این دایرکتوری شامل فایل‌های CSS است که ظاهر کلی رابط کاربری را تعیین می‌کنند. در محیط production، کدهای React معمولاً از CSS-in-JS استفاده می‌کنند، اما برخی تنظیمات پایه‌ای مثل فونت‌ها یا overrideهای کلی در این فایل‌ها انجام می‌شود.

مسیر:
/usr/share/jitsi-meet/css/
فایل مهم:
  • all.css: فایل تجمیعی اصلی برای تمام استایل‌های ظاهری

مثال: تغییر فونت پیش‌فرض در all.css:

body {
    font-family: 'IRANSans', sans-serif;
}

دایرکتوری lang/ (فایل‌های زبان)

این دایرکتوری شامل ترجمه‌ی رابط کاربری Jitsi به زبان‌های مختلف است. اگر قصد دارید زبان فارسی یا زبان خاصی را اضافه یا اصلاح کنید، باید در این پوشه فایل مورد نظر را ویرایش یا اضافه کنید.

مسیر:
/usr/share/jitsi-meet/lang/
نمونه فایل:
  • main-fa.json: ترجمه‌ی رابط به فارسی
  • main-enGB.json: زبان انگلیسی (بریتانیا)

مثال ویرایش یک رشته در فایل فارسی:

"me": "من",
"chat": "گفت‌وگو",
"invite": "دعوت",
"muteEveryone": "قطع صدای همه"

بعد از اعمال تغییرات، برای مشاهده ترجمه‌ی جدید کافیست صفحه را refresh کنید.


جمع‌بندی

ساختار فایل‌ها و دایرکتوری‌های UI در Jitsi Meet به‌گونه‌ای طراحی شده که توسعه‌دهنده بتواند به‌راحتی آن را سفارشی‌سازی کند. پوشه react/features هسته‌ی اصلی رابط کاربری است و شامل همه ماژول‌های React می‌باشد. فایل‌های config.js و interface_config.js به ترتیب برای پیکربندی عمومی و نمایشی استفاده می‌شوند. تصاویر، استایل‌ها و فایل‌های زبان نیز در پوشه‌های images/, css/, و lang/ قرار دارند که هرکدام امکان شخصی‌سازی کاملی برای ظاهر و زبان پلتفرم فراهم می‌کنند. این شناخت پایه‌ای برای هر نوع توسعه و سفارشی‌سازی بر بستر Jitsi کاملاً ضروری است.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 2. تغییر ظاهر و رنگ‌بندی رابط کاربری”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ویرایش فایل‌های CSS و SCSS” subtitle=”توضیحات کامل”]در Jitsi Meet، برای اعمال تغییرات ظاهری سفارشی‌سازی شده، شما می‌توانید استایل‌ها را از طریق فایل‌های CSS موجود در نسخه Build شده (production) یا با ویرایش مستقیم فایل‌های SCSS در نسخه توسعه (source) انجام دهید. بسته به نوع نصب شما (مثلاً نصب از سورس یا بسته deb)، رویکرد متفاوتی نیاز خواهد بود. در این بخش، روش‌های مختلف برای ویرایش و اعمال CSS و SCSS به‌صورت عملی و گام‌به‌گام بررسی می‌شود.


ویرایش فایل‌های CSS در محیط Production (نسخه نصب‌شده)

در نصب‌های production (مثلاً نصب با nginx یا بسته deb)، فایل‌های CSS از قبل build و bundle شده‌اند. بنابراین شما نمی‌توانید مستقیماً فایل‌های SCSS را ویرایش کنید، اما می‌توانید روی فایل all.css کار کنید.

مسیر فایل:
/usr/share/jitsi-meet/css/all.css
مثال: تغییر رنگ پس‌زمینه صفحه اصلی
body {
    background-color: #1a1a1a !important;
}
نحوه اعمال:
  1. فایل را ویرایش کنید با استفاده از ویرایشگر دلخواه، مثلاً nano:
sudo nano /usr/share/jitsi-meet/css/all.css
  1. فایل را ذخیره کرده و سرویس وب را ریستارت کنید (در صورت کش مرورگر، Ctrl+F5 کنید):
sudo systemctl restart nginx

ویرایش فایل‌های SCSS در نسخه توسعه (ساخت از سورس)

اگر Jitsi Meet را از سورس نصب کرده‌اید، می‌توانید مستقیماً فایل‌های SCSS را ویرایش کرده و رابط کاربری را مجدد build کنید.

مسیر فایل‌های SCSS:
~/jitsi-meet/css/

در این مسیر، فایل‌هایی مانند main.scss، _variables.scss و _mixins.scss قرار دارند.

مثال: تغییر رنگ دکمه‌ها در فایل _variables.scss
$primaryColor: #0d6efd;
$buttonBackground: $primaryColor;

سپس، برای build مجدد:

cd ~/jitsi-meet
make

این کار فایل‌های SCSS را به CSS کامپایل می‌کند و تغییرات در پوشه‌ی /static/ اعمال می‌شوند.


استفاده از ابزار Inspect برای یافتن کلاس‌ها

برای یافتن کلاس CSS که باید تغییر دهید:

  1. صفحه وب Jitsi خود را باز کنید.
  2. روی عنصر مورد نظر راست‌کلیک کرده و “Inspect” را بزنید.
  3. کلاس و استایل مربوط به آن عنصر را پیدا کرده و در all.css یا فایل SCSS خود override کنید.
مثال: مخفی کردن دکمه Invite در پایین صفحه
.toolbox-button[aria-label="Invite"] {
    display: none !important;
}

افزودن CSS سفارشی بدون دست‌کاری سورس

اگر ترجیح می‌دهید کدهای اصلی دست نخورند، می‌توانید فایل CSS سفارشی بسازید و آن را در فایل HTML لود کنید.

مراحل:
  1. فایل دلخواه بسازید:
sudo nano /usr/share/jitsi-meet/css/custom.css
  1. محتوای سفارشی خود را بنویسید:
body {
    background-color: #f0f0f0;
}
  1. فایل index.html را ویرایش کنید:
sudo nano /usr/share/jitsi-meet/index.html

قبل از بسته شدن تگ </head>، این خط را اضافه کنید:

<link rel="stylesheet" href="css/custom.css">
  1. فایل را ذخیره کرده و مرورگر را ریفرش کنید.

پاک‌سازی کش مرورگر

تغییرات CSS ممکن است بلافاصله در مرورگر نمایش داده نشود. برای اطمینان از اعمال آن‌ها، از ریفرش سخت استفاده کنید:

  • Windows: Ctrl + F5
  • Mac: Cmd + Shift + R

جمع‌بندی

برای ویرایش ظاهر رابط Jitsi Meet، می‌توان از دو روش استفاده کرد: دست‌کاری مستقیم فایل‌های CSS در نسخه‌ی نصب‌شده یا کار با فایل‌های SCSS در نسخه‌ی توسعه و ساخت مجدد UI. مسیرهای اصلی شامل /usr/share/jitsi-meet/css/all.css برای CSS و ~/jitsi-meet/css/ برای SCSS هستند. همچنین با افزودن فایل‌های CSS سفارشی به index.html می‌توان بدون تغییر سورس، رابط را به‌دلخواه خود تغییر داد. این روش‌ها به شما امکان می‌دهند تا به‌صورت کامل و حرفه‌ای، تجربه‌ی کاربری Jitsi Meet را مطابق نیازهای خود شخصی‌سازی کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”شخصی‌سازی رنگ‌ها، فونت‌ها و دکمه‌ها” subtitle=”توضیحات کامل”]شخصی‌سازی رابط کاربری Jitsi Meet برای هماهنگ‌سازی با هویت بصری برند یا نیازهای خاص سازمان، یکی از مهم‌ترین مراحل در راه‌اندازی نسخه اختصاصی از این پلتفرم است. در این بخش، به‌صورت جامع و کاربردی به نحوه‌ی تغییر رنگ‌ها، فونت‌ها و دکمه‌ها می‌پردازیم و تمامی تنظیمات را به‌صورت دقیق، با مسیر فایل‌ها و دستورات موردنیاز ارائه می‌کنیم.


مسیرهای اصلی مربوط به استایل‌ها

در نصب معمولی (Production):

/usr/share/jitsi-meet/css/all.css

در حالت توسعه (Source Build):

~/jitsi-meet/css/

در صورت استفاده از SCSS:

  • main.scss: فایل اصلی ترکیب‌کننده استایل‌ها
  • _variables.scss: متغیرهای پایه مانند رنگ و فونت
  • _buttons.scss: استایل‌های مرتبط با دکمه‌ها

شخصی‌سازی رنگ‌ها

در نسخه توسعه، رنگ‌ها معمولاً به‌صورت متغیر تعریف شده‌اند.

مسیر فایل:
~/jitsi-meet/css/_variables.scss
مثال: تغییر رنگ اصلی و رنگ پس‌زمینه
$primaryColor: #0d6efd;
$backgroundColor: #f8f9fa;

برای اعمال تغییرات:

cd ~/jitsi-meet
make

در نصب‌های production:

sudo nano /usr/share/jitsi-meet/css/all.css

و به‌صورت مستقیم، رنگ عنصر را override کنید:

body {
    background-color: #f8f9fa !important;
}

.button {
    background-color: #0d6efd !important;
}

شخصی‌سازی فونت‌ها

برای تغییر فونت کلی رابط کاربری:

مسیر فایل:
/usr/share/jitsi-meet/css/all.css

یا در حالت توسعه:

~/jitsi-meet/css/_variables.scss
مثال: اعمال فونت IRANSans برای زبان فارسی

ابتدا فونت را در مسیر دلخواه آپلود کرده و در index.html آن را تعریف کنید:

<link rel="stylesheet" href="css/fonts.css">

در فایل fonts.css:

@font-face {
    font-family: 'IRANSans';
    src: url('../fonts/IRANSans.woff') format('woff');
}

body, .title, .toolbox {
    font-family: 'IRANSans', sans-serif !important;
}

شخصی‌سازی استایل دکمه‌ها

برای ویرایش رنگ، شکل، گوشه‌ها و آیکن دکمه‌ها، می‌توانید کلاس‌های مرتبط را override کنید.

مسیر فایل:
/usr/share/jitsi-meet/css/all.css
مثال: گرد کردن دکمه‌ها و تغییر رنگ hover
.button {
    border-radius: 8px !important;
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

.button:hover {
    background-color: #0a58ca !important;
}

حذف یا تغییر دکمه‌های خاص

برای مخفی کردن یا ویرایش دکمه‌هایی مانند Invite، Share Screen و… از کلاس‌های aria-label استفاده کنید.

مثال: حذف دکمه Invite
.toolbox-button[aria-label="Invite"] {
    display: none !important;
}

نکته: سفارشی‌سازی بدون تغییر سورس

برای نگه‌داشتن ساختار اصلی پروژه، پیشنهاد می‌شود فایل‌های CSS سفارشی ایجاد کرده و آن‌ها را در index.html بارگذاری کنید.

مسیر و نحوه:
  1. ایجاد فایل:
sudo nano /usr/share/jitsi-meet/css/custom.css
  1. وارد کردن استایل‌ها
  2. اضافه کردن در index.html:
<link rel="stylesheet" href="css/custom.css">

پاک‌سازی کش برای مشاهده تغییرات

حتماً پس از هر تغییر، مرورگر را به‌صورت سخت ریفرش کنید:

  • Windows: Ctrl + F5
  • macOS: Cmd + Shift + R

جمع‌بندی

در Jitsi Meet، امکان شخصی‌سازی کامل رابط کاربری از طریق فایل‌های CSS و SCSS وجود دارد. برای تغییر رنگ‌ها، فونت‌ها و دکمه‌ها، باید فایل‌های مربوطه در مسیرهای /usr/share/jitsi-meet/css/ یا ~/jitsi-meet/css/ را ویرایش کنید. همچنین برای حفظ ساختار سورس اصلی، می‌توانید استایل‌های دلخواه را در یک فایل مجزا نوشته و در HTML فراخوانی کنید. این روش‌ها امکان ایجاد یک تجربه کاربری منحصربه‌فرد و سازگار با هویت سازمانی شما را فراهم می‌کنند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 3. تغییر لوگو، favicon و نام برنامه”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”جایگزینی فایل‌های لوگو” subtitle=”توضیحات کامل”]یکی از مهم‌ترین مراحل در شخصی‌سازی رابط کاربری Jitsi Meet، تغییر لوگوهای پیش‌فرض و جایگزینی آن‌ها با برند سازمانی شماست. این مورد شامل لوگوی واترمارک (Watermark)، آیکون تب مرورگر (Favicon) و سایر موارد گرافیکی موجود در UI می‌شود. در این بخش از آموزش های ارائه شده توسط فرازنتورک، مراحل کامل و عملی جایگزینی فایل‌های گرافیکی را بررسی می‌کنیم.


فایل‌های لوگو در Jitsi Meet

لوگوها در Jitsi Meet در دایرکتوری زیر قرار دارند:

/usr/share/jitsi-meet/images/

فایل‌های گرافیکی اصلی که می‌توان آن‌ها را جایگزین کرد:

فایل توضیح
watermark.png لوگویی که هنگام اجرای کنفرانس در سمت راست پایین صفحه ظاهر می‌شود
favicon.ico آیکون تب مرورگر
logo-deep-linking.png لوگوی صفحه اتصال موبایل (deep linking)
jitsilogo.png لوگوی صفحه ابتدایی

جایگزینی لوگوی واترمارک (Watermark)

مسیر فایل:
/usr/share/jitsi-meet/images/watermark.png
مراحل:
  1. لوگوی دلخواه خود را آماده کرده و نام آن را دقیقاً watermark.png بگذارید.
  2. با دستور زیر لوگوی پیش‌فرض را جایگزین کنید:
sudo cp /مسیر/لوگوی/جدید/watermark.png /usr/share/jitsi-meet/images/watermark.png
  1. دسترسی فایل را بررسی کنید:
sudo chmod 644 /usr/share/jitsi-meet/images/watermark.png

جایگزینی Favicon

مسیر فایل:
/usr/share/jitsi-meet/images/favicon.ico
مراحل:
  1. آیکون دلخواه را به فرمت .ico تبدیل کنید (ترجیحاً 32×32 یا 64×64 پیکسل).
  2. سپس دستور زیر را اجرا کنید:
sudo cp /مسیر/آیکون/جدید/favicon.ico /usr/share/jitsi-meet/images/favicon.ico
  1. دسترسی مناسب را اعمال کنید:
sudo chmod 644 /usr/share/jitsi-meet/images/favicon.ico

جایگزینی سایر فایل‌های گرافیکی

فایل‌هایی مانند:
  • jitsilogo.png
  • logo-deep-linking.png

برای این فایل‌ها نیز کافی است فایل جدید را با همان نام جایگزین کنید:

sudo cp /مسیر/لوگو/logo-deep-linking.png /usr/share/jitsi-meet/images/logo-deep-linking.png
sudo cp /مسیر/لوگو/jitsilogo.png /usr/share/jitsi-meet/images/jitsilogo.png

پاک‌سازی کش مرورگر

برای مشاهده تغییرات لوگو:

  • در ویندوز: Ctrl + F5
  • در مک: Cmd + Shift + R

در صورت ادامه کش شدن لوگو، می‌توانید cache nginx را هم پاک کنید (در صورت فعال بودن reverse proxy):

sudo systemctl restart nginx

جمع‌بندی

برای شخصی‌سازی لوگوهای Jitsi Meet، کافی‌ست فایل‌های گرافیکی مانند watermark.png، favicon.ico و سایر لوگوها را در مسیر /usr/share/jitsi-meet/images/ با نسخه‌های جدید جایگزین کنید. با این روش ساده، ظاهر پلتفرم را با هویت بصری برند خود تطبیق می‌دهید، بدون اینکه نیازی به تغییرات پیچیده در کد منبع داشته باشید. حفظ نام فایل و فرمت صحیح، کلید عملکرد صحیح لوگوهاست.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تغییر عنوان صفحه (Title) و نام برند” subtitle=”توضیحات کامل”]یکی از ابتدایی‌ترین و مهم‌ترین گام‌های سفارشی‌سازی رابط کاربری در Jitsi Meet، تغییر عنوان صفحه مرورگر، نام برند، و لینک واترمارک است. این تنظیمات از طریق فایل interface_config.js انجام می‌شود. در این بخش به‌صورت جامع و عملی، نحوه انجام این تغییرات را بررسی می‌کنیم.


مسیر فایل پیکربندی نمایشی:

/usr/share/jitsi-meet/interface_config.js

این فایل شامل تنظیمات رابط کاربری مانند نمایش لوگو، عنوان صفحه، رنگ‌ها، لینک‌ها و… است و برای تغییر عنوان برند و لینک‌های مربوط به آن باید چند متغیر کلیدی را ویرایش کنیم.


متغیرهای مرتبط:

متغیر توضیح
APP_NAME عنوان نمایش داده شده در تب مرورگر و برخی قسمت‌های UI
BRAND_WATERMARK_LINK لینکی که هنگام کلیک روی واترمارک اجرا می‌شود
SHOW_WATERMARK_FOR_GUESTS مشخص می‌کند که آیا واترمارک برای کاربران مهمان نمایش داده شود یا نه

مراحل تغییرات:

ابتدا فایل را با یک ویرایشگر متنی باز کنید. برای مثال:

sudo nano /usr/share/jitsi-meet/interface_config.js

در داخل این فایل، مقادیر زیر را جستجو کرده و مطابق نیاز تغییر دهید:

تغییر عنوان صفحه (Title):
APP_NAME: 'پلتفرم ویدیوکنفرانس شما',

مثال:

APP_NAME: 'دیدار مجازی شرکت فناوران',
تغییر لینک واترمارک برند:
BRAND_WATERMARK_LINK: 'https://yourcompany.com',

مثال:

BRAND_WATERMARK_LINK: 'https://fanavaran-co.ir',
نمایش یا عدم نمایش واترمارک برای میهمان‌ها:
SHOW_WATERMARK_FOR_GUESTS: true,

در صورت تمایل می‌توانید آن را روی false قرار دهید تا کاربران غیرمجاز یا میهمان‌ها واترمارک برند را نبینند:

SHOW_WATERMARK_FOR_GUESTS: false,

ذخیره و خروج از فایل:

در ویرایشگر nano، کلیدهای زیر را بزنید:

  • برای ذخیره: Ctrl + O
  • برای خروج: Ctrl + X

بارگذاری مجدد مرورگر برای مشاهده تغییرات:

بعد از اعمال تغییرات، مرورگر را با یکی از کلیدهای زیر ریفرش کنید:

  • ویندوز: Ctrl + F5
  • مک: Cmd + Shift + R

نکته امنیتی:

در نسخه‌های جدید Jitsi، فایل interface_config.js به تدریج در حال جایگزینی با مقادیر تعریف‌شده در config.js و فایل‌های React است. با این حال، برای نسخه‌های سنتی و بدون بازسازی Front-end، این فایل همچنان کاربرد دارد. در صورت استفاده از نسخه‌های React-based Development، بهتر است از شخصی‌سازی در سطح سورس‌کد استفاده کنید.


جمع‌بندی

برای تغییر عنوان صفحه و برند در Jitsi Meet، فایل پیکربندی رابط کاربری interface_config.js را ویرایش کرده و متغیرهای APP_NAME، BRAND_WATERMARK_LINK و SHOW_WATERMARK_FOR_GUESTS را مطابق برند خود تنظیم کنید. این تنظیمات به شما امکان می‌دهد ظاهر کلی پلتفرم را به‌راحتی و بدون نیاز به تغییرات پیچیده در ساختار کد منبع، متناسب با سازمان یا برند خود شخصی‌سازی کنید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 4. سفارشی‌سازی صفحه خوش‌آمدگویی (Welcome Page)”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”فعال/غیرفعال کردن صفحه ورود پیش‌فرض” subtitle=”توضیحات کامل”]در نسخه‌های سفارشی‌شده Jitsi Meet، ممکن است نیاز داشته باشید صفحه ورود پیش‌فرض را که به‌صورت گرافیکی برای ورود کاربر قبل از ورود به جلسه نمایش داده می‌شود، فعال یا غیرفعال کنید. این قابلیت معمولاً در ترکیب با سیستم احراز هویت (مانند JWT یا LDAP) و یا برای محدودسازی دسترسی به جلسات استفاده می‌شود.

در این بخش، روش کامل فعال‌سازی یا غیرفعال‌سازی این صفحه را به‌صورت عملی بررسی می‌کنیم.


مفهوم صفحه ورود پیش‌فرض

صفحه ورود پیش‌فرض معمولاً زمانی نمایش داده می‌شود که:

  • احراز هویت مبتنی بر prosody و auth domain فعال شده باشد.
  • کاربران غیرمجاز نیاز به ورود با نام کاربری و رمز داشته باشند.
  • تنظیمات guest access غیرفعال شده باشد.

مسیر اصلی فایل‌های تنظیمات

  1. فایل مربوط به احراز هویت prosody:
/etc/prosody/conf.avail/meet.example.com.cfg.lua
  1. فایل مربوط به پیکربندی وب:
/etc/jitsi/meet/meet.example.com-config.js

(در هر دستور meet.example.com را با دامنه واقعی خود جایگزین کنید.)


فعال‌سازی صفحه ورود با استفاده از domain-based authentication

برای فعال‌سازی صفحه ورود، ابتدا باید احراز هویت را فعال کنید:

ویرایش فایل Prosody:
sudo nano /etc/prosody/conf.avail/meet.example.com.cfg.lua

در این فایل:

  1. یک host جدید برای auth.meet.example.com تعریف کنید:
VirtualHost "auth.meet.example.com"
    authentication = "internal_plain"
  1. دامنه اصلی را به صورت زیر ویرایش کنید تا احراز هویت را از این host بخواهد:
VirtualHost "meet.example.com"
    authentication = "anonymous"
    allow_unauthed_ssl = true
  1. بخش زیر را اضافه کنید تا امکان تعیین میزبان وجود داشته باشد:
Component "conference.meet.example.com" "muc"
    storage = "memory"
    modules_enabled = { "muc_lobby_rooms" }
    lobby_muc = "lobby.meet.example.com"
    main_muc = "conference.meet.example.com"
  1. فعال‌سازی لابی اختیاری است ولی به نمایش فرم ورود کمک می‌کند.

ایجاد کاربر جهت ورود:

برای ایجاد کاربر در سیستم احراز هویت داخلی:

sudo prosodyctl register admin auth.meet.example.com yourpassword

ویرایش فایل پیکربندی وب:
sudo nano /etc/jitsi/meet/meet.example.com-config.js

و مطمئن شوید مقادیر زیر به درستی تنظیم شده‌اند:

anonymousdomain: 'guest.meet.example.com',

غیرفعال‌سازی صفحه ورود

برای غیرفعال کردن کامل صفحه ورود، کافی است:

  1. احراز هویت را غیرفعال کنید (در prosody):
VirtualHost "meet.example.com"
    authentication = "anonymous"
  1. مقدار anonymousdomain را در config.js حذف یا کامنت کنید:
// anonymousdomain: 'guest.meet.example.com',
  1. کاربران اکنون مستقیماً وارد جلسه می‌شوند بدون نیاز به ورود.

ریست سرویس‌ها برای اعمال تغییرات

پس از تغییرات، سرویس‌های مربوط را ریستارت کنید:

sudo systemctl restart prosody
sudo systemctl restart jicofo
sudo systemctl restart jitsi-videobridge2

جمع‌بندی

صفحه ورود پیش‌فرض در Jitsi Meet یک قابلیت مهم امنیتی است که برای کنترل دسترسی و احراز هویت کاربران به کار می‌رود. با استفاده از تنظیمات prosody و پیکربندی config.js می‌توانید آن را به‌راحتی فعال یا غیرفعال کنید. این قابلیت به شما اجازه می‌دهد در محیط‌های سازمانی، دسترسی فقط برای کاربران مجاز فراهم شود و میهمانان نیاز به تأیید یا ورود credentials داشته باشند. تنظیم دقیق این قابلیت نقش مهمی در امنیت و کنترل دسترسی جلسات دارد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تغییر محتوای خوش‌آمدگویی (title, description, footer)” subtitle=”توضیحات کامل”]در صفحه ابتدایی Jitsi Meet (پیش از شروع جلسه)، یک پنجره ورودی نمایش داده می‌شود که معمولاً شامل عنوان (title)، توضیحاتی (description) درباره استفاده از پلتفرم و یک پابرگ (footer) است. برای برندینگ اختصاصی یا شخصی‌سازی تجربه کاربری، تغییر این بخش‌ها بسیار کاربردی و مؤثر است. در این بخش به‌صورت کاملاً عملی و با ذکر مسیرها و دستورات لازم، نحوه ویرایش این بخش‌ها را شرح می‌دهیم.


مسیر فایل‌های مورد نیاز

تمامی محتواهای نمایشی (از جمله title، توضیحات و footer) در فایل‌های جاوااسکریپتی که در پروژه React محور Jitsi Meet نوشته شده‌اند، قرار دارند. فایل‌های اصلی برای این تغییرات عبارتند از:

/usr/share/jitsi-meet/interface_config.js
/usr/share/jitsi-meet/static/welcomePageAdditionalContent.js
/usr/share/jitsi-meet/lang/main-*.json

توجه: اگر از نسخه سورسی استفاده می‌کنید، مسیرها در پوشه react/features/welcome/components/ و فایل‌های JSON ترجمه در مسیر lang/ قرار دارند.


تغییر عنوان صفحه و توضیحات

ویرایش فایل interface_config.js
sudo nano /usr/share/jitsi-meet/interface_config.js

در این فایل، مقادیر زیر را ویرایش کنید:

APP_NAME: 'جلسات امن شما',
DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.png',
SHOW_WATERMARK_FOR_GUESTS: true,

این مقادیر به ترتیب:

  • APP_NAME: عنوان پلتفرم که در بالای فرم جلسه نمایش داده می‌شود.
  • DEFAULT_WELCOME_PAGE_LOGO_URL: مسیر لوگوی بالا در صفحه خوش‌آمدگویی.
  • SHOW_WATERMARK_FOR_GUESTS: نمایش واترمارک برای مهمان‌ها.

ویرایش محتوای نمایش داده‌شده در بخش توضیحات (description)

در نسخه‌های جدید Jitsi Meet، برای توضیح اولیه صفحه، باید فایل زیر را ویرایش کنید:

مسیر فایل محتوای اضافی:
sudo nano /usr/share/jitsi-meet/static/welcomePageAdditionalContent.js

در این فایل یک کامپوننت React تعریف شده است که می‌توانید متن دلخواه را جایگزین کنید:

import React from 'react';

export default function WelcomePageAdditionalContent() {
    return (
        <div style={{ marginTop: '2em', textAlign: 'center', color: '#666' }}>
            <h2>به جلسات تصویری امن ما خوش آمدید</h2>
            <p>از اینجا می‌توانید یک اتاق جدید ایجاد کنید یا به جلسه‌ای بپیوندید.</p>
        </div>
    );
}

برای مثال، می‌توانید محتوای فارسی دلخواه و رنگ‌بندی متفاوتی در این بخش قرار دهید.


ویرایش footer (پابرگ) صفحه خوش‌آمدگویی

برای ویرایش footer صفحه، در نسخه‌هایی که فایل interface_config.js هنوز فعال است، مقدار زیر را اضافه یا ویرایش کنید:

APP_NAME: 'Jitsi اختصاصی',
WELCOME_PAGE_DESCRIPTION: 'جلسات ویدئویی رایگان و امن.',
FOOTER_TEXT: 'تمامی حقوق متعلق به شرکت شماست.'

توجه: اگر از نسخه‌های جدید استفاده می‌کنید که interface_config.js دیگر استفاده نمی‌شود، باید مستقیماً فایل WelcomePage.js در مسیر سورس و سپس فایل‌های ترجمه مربوط را ویرایش و پروژه را بیلد کنید.


ترجمه محتوای خوش‌آمدگویی (در صورت چندزبانه بودن)

برای اضافه‌کردن یا اصلاح ترجمه متن‌های نمایشی، فایل‌های زیر را ویرایش کنید:

sudo nano /usr/share/jitsi-meet/lang/main-fa.json

و مقادیر زیر را به دلخواه تغییر دهید:

{
  "welcomepage.title": "به کنفرانس ویدیویی خوش آمدید",
  "welcomepage.description": "اتاق خود را بسازید و دیگران را دعوت کنید",
  "welcomepage.footer": "پشتیبانی شده توسط زیرساخت Jitsi Meet"
}

پس از ویرایش، مرورگر را refresh کنید یا کش آن را پاک کنید تا تغییرات اعمال شوند.


جمع‌بندی

برای شخصی‌سازی کامل صفحه خوش‌آمدگویی Jitsi Meet، می‌توانید با ویرایش فایل‌های interface_config.js، welcomePageAdditionalContent.js و فایل‌های ترجمه در مسیر lang/، عنوان، توضیحات، لوگو و پابرگ را کاملاً مطابق نیاز خود تغییر دهید. این تغییرات نه تنها باعث حرفه‌ای‌تر شدن ظاهر محیط می‌شوند، بلکه نقش مهمی در انتقال پیام برند و ساده‌سازی تجربه کاربر دارند. پس از هر تغییر، ریفرش کامل مرورگر یا پاک‌سازی کش پیشنهاد می‌شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ویرایش فایل React: react/features/welcome/components/WelcomePage.web.js” subtitle=”توضیحات کامل”]در صورتی که بخواهید صفحه خوش‌آمدگویی در Jitsi Meet را به‌صورت اختصاصی‌تر تغییر دهید یا ویژگی‌های خاصی را اضافه کنید، می‌توانید فایل React مربوط به صفحه خوش‌آمدگویی را ویرایش کنید. این فایل در مسیر زیر قرار دارد:

react/features/welcome/components/WelcomePage.web.js

این فایل جزء ماژول‌های رابط کاربری Jitsi Meet است و مسئول نمایش صفحه خوش‌آمدگویی هنگام ورود به سیستم است.


مراحل ویرایش فایل WelcomePage.web.js

1. وارد کردن فایل برای ویرایش

برای شروع ویرایش، باید به دایرکتوری جایی که فایل WelcomePage.web.js قرار دارد بروید و آن را با ویرایشگر متن مورد نظر خود باز کنید. به‌عنوان مثال:

cd /path/to/jitsi-meet/react/features/welcome/components/
sudo nano WelcomePage.web.js
2. ساختار فایل WelcomePage.web.js

در این فایل، می‌توانید ساختار رابط کاربری صفحه خوش‌آمدگویی، استایل‌ها، و متن‌های آن را تغییر دهید. در اینجا یک نمونه ساختار از این فایل آورده شده است:

import React from 'react';
import { Button, Text } from '@jitsi/react-components'; // اجزای رابط کاربری از Jitsi
import { translate } from 'react-i18next';

class WelcomePage extends React.Component {

    render() {
        const { t } = this.props;

        return (
            <div className="welcome-page">
                <div className="welcome-title">
                    <h1>{t('welcomepage.title')}</h1>
                </div>
                <div className="welcome-description">
                    <p>{t('welcomepage.description')}</p>
                </div>
                <div className="welcome-footer">
                    <Text>{t('welcomepage.footer')}</Text>
                </div>
                <Button
                    className="start-button"
                    onClick={() => this.startMeeting()}
                >
                    {t('welcomepage.startMeetingButton')}
                </Button>
            </div>
        );
    }

    startMeeting() {
        console.log("شروع جلسه جدید");
        // شما می‌توانید متد شروع جلسه خود را اینجا فراخوانی کنید
    }
}

export default translate()(WelcomePage);
3. توضیحات کد
  • translate(): این تابع برای ترجمه متون در Jitsi Meet استفاده می‌شود. با استفاده از آن، متن‌ها به‌صورت پویا و مطابق با زبان انتخابی کاربر بارگذاری می‌شوند.
  • دکمه شروع جلسه (start-button): این دکمه برای آغاز جلسه جدید استفاده می‌شود و در اینجا می‌توانید عملکرد آن را به دلخواه تغییر دهید.
  • متغیرهای welcomepage.title، welcomepage.description، welcomepage.footer: این مقادیر مربوط به محتوای متنی در صفحه خوش‌آمدگویی هستند که باید در فایل‌های ترجمه به زبان‌های مختلف تنظیم شوند. برای نمونه، این مقادیر می‌توانند در فایل JSON ترجمه قرار گیرند.
4. ویرایش محتوای متنی در ترجمه‌ها

اگر نیاز به تغییر محتوای متنی دارید، باید این مقادیر را در فایل‌های ترجمه جاوااسکریپت یا JSON در مسیر lang/ ویرایش کنید:

برای فارسی، فایل مربوطه در مسیر lang/main-fa.json است:

{
  "welcomepage.title": "به کنفرانس ویدیویی خوش آمدید",
  "welcomepage.description": "اتاق خود را بسازید و دیگران را دعوت کنید",
  "welcomepage.footer": "پشتیبانی شده توسط زیرساخت Jitsi Meet",
  "welcomepage.startMeetingButton": "شروع جلسه"
}
5. استفاده از استایل‌ها

در این فایل، می‌توانید استایل‌ها را هم اضافه کنید. اگر نیاز به اعمال تغییرات در استایل‌های CSS دارید، می‌توانید به کلاس‌های مختلف مانند welcome-page، welcome-title، welcome-footer و غیره در فایل CSS مربوطه اشاره کنید.

.welcome-page {
    background-color: #f5f5f5;
    padding: 20px;
}

.welcome-title h1 {
    font-size: 2.5rem;
    color: #333;
}

.welcome-footer {
    margin-top: 20px;
    text-align: center;
}
6. بیلد مجدد و اعمال تغییرات

پس از ویرایش این فایل و سایر فایل‌های مرتبط، باید پروژه را مجدداً بیلد کنید تا تغییرات اعمال شوند.

برای بیلد پروژه، به پوشه اصلی Jitsi Meet رفته و دستور زیر را اجرا کنید:

make

سپس پس از بیلد شدن پروژه، سرور Jitsi Meet را مجدداً راه‌اندازی کنید تا تغییرات جدید بارگذاری شوند:

sudo systemctl restart jitsi-videobridge
sudo systemctl restart jicofo

جمع‌بندی

با ویرایش فایل WelcomePage.web.js در مسیر react/features/welcome/components/، می‌توانید محتوای صفحه خوش‌آمدگویی Jitsi Meet را شخصی‌سازی کرده و ویژگی‌هایی مانند عنوان صفحه، توضیحات، footer و دکمه‌ها را طبق نیاز خود تغییر دهید. پس از اعمال تغییرات در این فایل و فایل‌های ترجمه، باید پروژه را بیلد کرده و سرور را ریستارت کنید تا تغییرات در سیستم اعمال شوند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 5. غیرفعال کردن یا حذف ابزارهای خاص در UI”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”حذف دکمه‌های Record، Livestream، Share، Chat و…” subtitle=”توضیحات کامل”]در Jitsi Meet، دکمه‌هایی مانند Record، Livestream، Share و Chat در رابط کاربری به‌صورت پیش‌فرض برای کاربران قابل دسترسی هستند. اگر بخواهید این دکمه‌ها را از رابط کاربری حذف کنید، باید تنظیمات مربوط به آن‌ها را در فایل‌های پیکربندی یا کدهای رابط کاربری جابجا کنید.


مراحل حذف دکمه‌ها از رابط کاربری

1. ویرایش فایل interface_config.js

برای حذف یا غیرفعال کردن دکمه‌های خاص از رابط کاربری، اولین جایی که باید به آن مراجعه کنید، فایل پیکربندی interface_config.js است. این فایل تنظیمات نمایش آیتم‌ها و ویژگی‌های مختلف رابط کاربری Jitsi را مدیریت می‌کند.

فایل interface_config.js معمولاً در مسیر زیر قرار دارد:

/usr/share/jitsi-meet/interface_config.js

برای ویرایش آن:

sudo nano /usr/share/jitsi-meet/interface_config.js

در این فایل، بخش‌های مختلفی برای کنترل دکمه‌ها و ویژگی‌های رابط وجود دارد. برای حذف دکمه‌های خاص، تنظیمات زیر را بررسی و ویرایش کنید:

2. تنظیمات دکمه‌های قابل حذف

برای هر دکمه‌ای که می‌خواهید از رابط کاربری حذف شود، می‌توانید تنظیمات زیر را در فایل interface_config.js تغییر دهید:

// فایل: /usr/share/jitsi-meet/interface_config.js

TOOLBAR_BUTTONS: [
    'microphone',               // دکمه میکروفون
    'camera',                   // دکمه دوربین
    'hangup',                   // دکمه قطع تماس
    'invite',                   // دکمه دعوت
    'mute-everyone',            // دکمه بی‌صدا کردن همه
    'participants-pane',        // دکمه پنل شرکت‌کنندگان
    'profile',                  // دکمه پروفایل
    'chat',                     // دکمه چت
    'settings',                 // دکمه تنظیمات
    'videoquality',             // دکمه کیفیت ویدئو
    'filmstrip',                // دکمه نوار فیلم
    'tileview'                  // دکمه نمایش گرید
],

// حذف دکمه Livestream<br /><br />
// اگر دکمه Livestream وجود داشته باشد، آن را حذف کنید<br /><br />
ENABLE_LIVESTREAMING: false,</p><br />
<p>// حذف دکمه Share<br /><br />
ENABLE_SCREENSHARING: false,</p><br />
<p>// حذف دکمه Chat<br /><br />
TOOLBAR_BUTTONS: [<br /><br />
'microphone', 'camera', 'hangup', 'invite', 'mute-everyone', 'participants-pane', 'profile', 'settings', 'videoquality', 'filmstrip', 'tileview'<br /><br />
],<br /><br />

در اینجا چند نکته مهم وجود دارد:

  • TOOLBAR_BUTTONS: این تنظیم به شما اجازه می‌دهد که دکمه‌های مختلف را از نوار ابزار حذف کنید. برای حذف یک دکمه، کافی است آن را از این آرایه حذف کنید.
  • ENABLE_LIVESTREAMING: با تنظیم این گزینه به false، دکمه مربوط به Livestream غیرفعال می‌شود.
  • ENABLE_SCREENSHARING: با تنظیم این گزینه به false، دکمه Share Screen غیرفعال می‌شود.
3. ویرایش فایل config.js (در صورت نیاز)

اگر می‌خواهید به‌صورت عمومی یا برای همه کاربران این دکمه‌ها را غیرفعال کنید، باید فایل پیکربندی config.js را بررسی کنید. این فایل تنظیمات عمومی‌تر Jitsi Meet را شامل می‌شود.

فایل config.js معمولاً در مسیر زیر قرار دارد:

/etc/jitsi/meet/<domain>-config.js

برای ویرایش آن:

sudo nano /etc/jitsi/meet/<domain>-config.js

در این فایل، تنظیماتی مشابه به آنچه که در interface_config.js پیدا کردید وجود دارد. در صورتی که بخواهید دکمه‌هایی مانند Record یا Livestream را غیرفعال کنید، باید متغیرهای مناسب را به‌صورت زیر تنظیم کنید:

// غیرفعال کردن قابلیت‌های اضافی مانند Livestream و Screen Sharing
config.disableRecordings = true;
config.disableLivestreaming = true;
config.disableScreensharing = true;
4. حذف دکمه‌های Chat و Recording در بخش‌های خاص

اگر همچنان نیاز دارید که در برخی بخش‌های رابط، دکمه‌های خاصی مانند Chat یا Recording حذف شوند، می‌توانید از کدهای React در فایل‌های مربوطه در مسیر react/features/ استفاده کنید. به‌عنوان‌مثال:

در مسیر react/features/toolbar/components/Toolbar.web.js، شما می‌توانید دکمه‌های اضافی را حذف یا غیرفعال کنید.

برای ویرایش:

cd /path/to/jitsi-meet/react/features/toolbar/components/
sudo nano Toolbar.web.js

در اینجا، دکمه‌هایی مانند Chat یا Record ممکن است به این صورت معرفی شده باشند:

<Button
    onClick={this._onClick}
    aria-label={t('toolbar.accessibilityLabel.chat')}
>
    {t('toolbar.chat')}
</Button>

برای حذف این دکمه‌ها، می‌توانید کدهای مربوطه را از فایل حذف یا آن‌ها را به‌صورت شرطی غیرفعال کنید.

5. ریستارت کردن سرور Jitsi Meet

پس از اعمال تغییرات در این فایل‌ها، باید Jitsi Meet را ریستارت کنید تا تغییرات جدید اعمال شوند.

برای ریستارت کردن سرور Jitsi:

sudo systemctl restart jitsi-videobridge
sudo systemctl restart jicofo

جمع‌بندی

برای حذف دکمه‌های مختلف مانند Record، Livestream، Share و Chat در Jitsi Meet، شما می‌توانید فایل‌های پیکربندی interface_config.js و config.js را ویرایش کرده و تنظیمات مربوط به هر دکمه را غیرفعال کنید. همچنین، در صورت نیاز می‌توانید کدهای React موجود در مسیر react/features/ را ویرایش کرده و دکمه‌ها را در سطح رابط کاربری حذف کنید. بعد از انجام تغییرات، باید سرور Jitsi را ریستارت کنید تا تغییرات جدید اعمال شوند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیمات مربوطه در فایل interface_config.js” subtitle=”توضیحات کامل”]فایل interface_config.js یکی از فایل‌های مهم پیکربندی در Jitsi Meet است که تنظیمات مختلف مربوط به رابط کاربری را مدیریت می‌کند. در این فایل، شما می‌توانید نمایش دکمه‌ها، ویژگی‌های مختلف رابط، و سایر تنظیمات نمایشی را تنظیم کنید.

این فایل معمولاً در مسیر زیر قرار دارد:

/usr/share/jitsi-meet/interface_config.js

برای ویرایش آن، از دستور زیر استفاده کنید:

sudo nano /usr/share/jitsi-meet/interface_config.js

در اینجا، به برخی از تنظیمات مهم و متداول در این فایل اشاره می‌کنیم که به شما کمک می‌کند ویژگی‌های مختلف رابط کاربری را کنترل کنید، از جمله حذف دکمه‌ها یا تغییر نحوه نمایش آن‌ها.


تنظیمات دکمه‌ها و ابزارهای نوار ابزار

یکی از مهم‌ترین بخش‌های interface_config.js مربوط به نوار ابزار (Toolbar) است. شما می‌توانید با استفاده از تنظیمات زیر دکمه‌های مختلف را در نوار ابزار فعال یا غیرفعال کنید.

1. غیرفعال کردن دکمه‌ها

در بخش TOOLBAR_BUTTONS، می‌توانید دکمه‌های مختلف را غیرفعال کنید. به‌عنوان مثال، برای حذف دکمه‌های Chat، Record و Share، می‌توانید تنظیمات زیر را به کار ببرید:

// فایل: /usr/share/jitsi-meet/interface_config.js

TOOLBAR_BUTTONS: [
    'microphone',  // دکمه میکروفون
    'camera',      // دکمه دوربین
    'hangup',      // دکمه قطع تماس
    'invite',      // دکمه دعوت
    'mute-everyone',  // دکمه بی‌صدا کردن همه
    'participants-pane', // دکمه پنل شرکت‌کنندگان
    'profile',      // دکمه پروفایل
    'settings',     // دکمه تنظیمات
    'videoquality', // دکمه کیفیت ویدئو
    'filmstrip',    // دکمه نوار فیلم
    'tileview'      // دکمه نمایش گرید
],

با استفاده از این تنظیمات، دکمه‌های Chat، Record و Share که به‌طور پیش‌فرض در نوار ابزار نمایش داده می‌شوند، حذف خواهند شد. به‌طور مشابه، می‌توانید سایر دکمه‌ها را نیز حذف یا اضافه کنید.

2. غیرفعال کردن قابلیت ضبط (Record) و پخش زنده (Livestream)

اگر بخواهید قابلیت‌های Recording و Livestreaming را به‌طور کامل غیرفعال کنید، می‌توانید متغیرهای زیر را در فایل interface_config.js تنظیم کنید:

// فایل: /usr/share/jitsi-meet/interface_config.js

ENABLE_RECORDING: false,  // غیرفعال کردن قابلیت ضبط
ENABLE_LIVESTREAMING: false,  // غیرفعال کردن قابلیت پخش زنده

این تنظیمات باعث می‌شود که دکمه‌های مربوط به ضبط و پخش زنده در رابط کاربری نمایش داده نشوند و کاربران نتوانند از آن‌ها استفاده کنند.

3. تنظیمات نمایش دکمه‌های مختلف

شما می‌توانید تنظیمات دیگری نیز برای کنترل نحوه نمایش دکمه‌ها استفاده کنید. به‌عنوان‌مثال، برای تغییر نحوه نمایش دکمه‌ها در دستگاه‌های موبایل یا دسکتاپ، می‌توانید از تنظیمات مربوط به نمایش دکمه‌ها استفاده کنید:

// فایل: /usr/share/jitsi-meet/interface_config.js

TOOLBAR_ALWAYS_VISIBLE: [
    'microphone', 'camera', 'hangup', 'invite', 'mute-everyone'
],

// دکمه‌هایی که فقط در دستگاه‌های موبایل نمایش داده می‌شوند
TOOLBAR_MOBILE_VISIBLE: [
    'participants-pane', 'settings', 'chat'
],

تنظیمات دیگر رابط کاربری

در این بخش، به برخی دیگر از تنظیمات مهم رابط کاربری اشاره می‌کنیم که می‌توانید در فایل interface_config.js پیکربندی کنید.

1. تنظیم زبان پیش‌فرض

برای تنظیم زبان پیش‌فرض رابط کاربری، متغیر DEFAULT_LANGUAGE را تنظیم کنید. به‌عنوان‌مثال، برای استفاده از زبان فارسی، تنظیمات زیر را انجام دهید:

// فایل: /usr/share/jitsi-meet/interface_config.js

DEFAULT_LANGUAGE: 'fa',  // زبان پیش‌فرض به فارسی
2. فعال‌سازی یا غیرفعال‌سازی قابلیت‌های خاص

برای تنظیم و کنترل قابلیت‌های خاص مانند اشتراک صفحه، ویدئو کیفیت، یا مشاهده فیلم به‌صورت گرید، می‌توانید متغیرهای مربوط به آن‌ها را در این فایل تنظیم کنید.

برای مثال، برای فعال‌سازی یا غیرفعال‌سازی قابلیت اشتراک صفحه:

// فایل: /usr/share/jitsi-meet/interface_config.js

ENABLE_SCREENSHARING: true,  // فعال‌سازی اشتراک صفحه

همچنین برای کنترل نمایش کیفیت ویدئو یا تعداد شرکت‌کنندگان:

// فایل: /usr/share/jitsi-meet/interface_config.js

ENABLE_VIDEO_QUALITY: true,  // فعال‌سازی کیفیت ویدئو
ENABLE_TILE_VIEW: true,  // فعال‌سازی نمای گرید
3. فعال‌سازی یا غیرفعال‌سازی صفحه ورود

اگر بخواهید صفحه ورود پیش‌فرض Jitsi Meet را فعال یا غیرفعال کنید، می‌توانید از تنظیمات زیر استفاده کنید:

// فایل: /usr/share/jitsi-meet/interface_config.js

ENABLE_WELCOME_PAGE: true,  // فعال‌سازی صفحه خوش‌آمدگویی

جمع‌بندی

فایل interface_config.js یکی از مهم‌ترین فایل‌های پیکربندی رابط کاربری Jitsi Meet است. با استفاده از این فایل، می‌توانید دکمه‌ها و ابزارهای مختلف را از نوار ابزار حذف کنید، قابلیت‌های اضافی مانند Recording و Livestreaming را غیرفعال کنید، و تنظیمات زبان و نمایش دکمه‌ها را کنترل کنید. با ویرایش این فایل و اعمال تغییرات مورد نظر، می‌توانید تجربه کاربری Jitsi Meet را به دلخواه خود سفارشی کنید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 6. افزودن دکمه یا عملکرد جدید به نوار ابزار (Toolbar)”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”معرفی ساختار دکمه‌ها در Toolbar” subtitle=”توضیحات کامل”]در Jitsi Meet، نوار ابزار (Toolbar) مجموعه‌ای از دکمه‌ها را در خود جای می‌دهد که به کاربران این امکان را می‌دهد تا کنترل‌هایی برای تعامل با جلسه و تنظیمات آن داشته باشند. ساختار این دکمه‌ها به‌طور عمده در فایل‌های پیکربندی مانند interface_config.js تعریف می‌شود. در اینجا به معرفی اجزای کلیدی و نحوه پیکربندی دکمه‌ها در نوار ابزار Jitsi Meet پرداخته‌ایم.

دکمه‌های پیش‌فرض در نوار ابزار

دکمه‌ها در نوار ابزار Jitsi Meet به‌طور معمول برای کنترل اجزای مختلف جلسه طراحی شده‌اند. این دکمه‌ها به‌طور پیش‌فرض شامل موارد زیر هستند:

  • microphone: دکمه برای فعال/غیرفعال کردن میکروفون.
  • camera: دکمه برای فعال/غیرفعال کردن دوربین.
  • hangup: دکمه برای قطع تماس.
  • invite: دکمه برای ارسال دعوت به دیگران.
  • mute-everyone: دکمه برای بی‌صدا کردن همه شرکت‌کنندگان.
  • participants-pane: دکمه برای نمایش فهرست شرکت‌کنندگان.
  • profile: دکمه برای دسترسی به تنظیمات پروفایل کاربر.
  • chat: دکمه برای باز کردن پنل چت.
  • settings: دکمه برای باز کردن تنظیمات جلسه.
  • videoquality: دکمه برای تنظیم کیفیت ویدئو.
  • filmstrip: دکمه برای نمایش ویدئو در نوار فیلم.
  • tileview: دکمه برای نمایش تصاویر ویدئویی به‌صورت شبکه‌ای.

پیکربندی دکمه‌ها

دکمه‌ها در فایل interface_config.js قابل پیکربندی هستند. با ویرایش این فایل می‌توانید دکمه‌ها را حذف کرده، ترتیب آن‌ها را تغییر داده یا دکمه‌های جدیدی اضافه کنید.

برای ویرایش دکمه‌ها، به فایل interface_config.js بروید:

sudo nano /usr/share/jitsi-meet/interface_config.js

سپس در این فایل، بخش TOOLBAR_BUTTONS را پیدا کنید که شامل آرایه‌ای از دکمه‌ها است. برای مثال:

TOOLBAR_BUTTONS: [
    'microphone',               // دکمه میکروفون
    'camera',                   // دکمه دوربین
    'hangup',                   // دکمه قطع تماس
    'invite',                   // دکمه دعوت
    'mute-everyone',            // دکمه بی‌صدا کردن همه
    'participants-pane',        // دکمه پنل شرکت‌کنندگان
    'profile',                  // دکمه پروفایل
    'chat',                     // دکمه چت
    'settings',                 // دکمه تنظیمات
    'videoquality',             // دکمه کیفیت ویدئو
    'filmstrip',                // دکمه نوار فیلم
    'tileview'                  // دکمه نمایش گرید
],

سفارشی‌سازی نوار ابزار

شما می‌توانید این آرایه را به‌طور کامل یا جزئی تغییر دهید. برای مثال، اگر بخواهید دکمه Record را حذف کنید، کافی است که آن را از این آرایه حذف کنید:

TOOLBAR_BUTTONS: [
    'microphone',               // دکمه میکروفون
    'camera',                   // دکمه دوربین
    'hangup',                   // دکمه قطع تماس
    'invite',                   // دکمه دعوت
    'mute-everyone',            // دکمه بی‌صدا کردن همه
    'participants-pane',        // دکمه پنل شرکت‌کنندگان
    'profile',                  // دکمه پروفایل
    'chat',                     // دکمه چت
    'settings',                 // دکمه تنظیمات
    'videoquality',             // دکمه کیفیت ویدئو
    'filmstrip',                // دکمه نوار فیلم
    'tileview'                  // دکمه نمایش گرید
],

همچنین برای تغییر ترتیب دکمه‌ها، کافی است موقعیت آن‌ها را در این آرایه تغییر دهید. مثلاً اگر بخواهید دکمه chat را به ابتدای لیست منتقل کنید، کافی است آن را به ابتدای آرایه ببرید:

TOOLBAR_BUTTONS: [
    'chat',                     // دکمه چت (جایگاه جدید)
    'microphone',               // دکمه میکروفون
    'camera',                   // دکمه دوربین
    'hangup',                   // دکمه قطع تماس
    'invite',                   // دکمه دعوت
    'mute-everyone',            // دکمه بی‌صدا کردن همه
    'participants-pane',        // دکمه پنل شرکت‌کنندگان
    'profile',                  // دکمه پروفایل
    'settings',                 // دکمه تنظیمات
    'videoquality',             // دکمه کیفیت ویدئو
    'filmstrip',                // دکمه نوار فیلم
    'tileview'                  // دکمه نمایش گرید
],

جمع‌بندی

در این بخش، به معرفی ساختار و نحوه پیکربندی دکمه‌ها در نوار ابزار Jitsi Meet پرداخته شد. شما می‌توانید با ویرایش آرایه TOOLBAR_BUTTONS در فایل interface_config.js دکمه‌ها را سفارشی‌سازی کرده و به دلخواه خود تغییر دهید. این تغییرات می‌توانند شامل حذف یا اضافه کردن دکمه‌ها، تغییر ترتیب آن‌ها یا حتی تغییر ویژگی‌های هر دکمه باشند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”توسعه یک دکمه جدید با React Component اختصاصی” subtitle=”توضیحات کامل”]Jitsi Meet به‌عنوان یک پلتفرم متن‌باز برای کنفرانس ویدیویی، به کاربران و توسعه‌دهندگان این امکان را می‌دهد که ویژگی‌ها و اجزای مختلف رابط کاربری آن را بر اساس نیازهای خاص خود سفارشی کنند. یکی از این اجزای سفارشی‌شده، دکمه‌ها در نوار ابزار هستند که می‌توانند به‌راحتی با استفاده از React Componentهای اختصاصی گسترش یابند.

در این بخش، نحوه توسعه یک دکمه جدید با React Component اختصاصی برای استفاده در نوار ابزار Jitsi Meet توضیح داده خواهد شد.

مراحل توسعه یک دکمه جدید در Jitsi Meet

۱. آماده‌سازی محیط توسعه

قبل از شروع، باید مطمئن شوید که محیط توسعه شما به درستی پیکربندی شده است. برای این کار، از گام‌های زیر پیروی کنید:

  1. کلون کردن مخزن Jitsi Meet: اگر هنوز مخزن Jitsi Meet را کلون نکرده‌اید، ابتدا آن را از GitHub کلون کنید:
    git clone https://github.com/jitsi/jitsi-meet.git
    
  2. نصب وابستگی‌ها: پس از کلون کردن مخزن، وارد دایرکتوری پروژه شوید و وابستگی‌های پروژه را نصب کنید:
    cd jitsi-meet
    npm install
    
  3. شروع به توسعه: برای شروع محیط توسعه را با دستور زیر راه‌اندازی کنید:
    make dev
    
۲. ایجاد React Component برای دکمه جدید

حالا که محیط توسعه آماده است، می‌توانیم یک React Component جدید برای دکمه ایجاد کنیم. فرض کنید می‌خواهیم دکمه‌ای به نام CustomButton اضافه کنیم.

  1. ساخت فایل React Component جدید: ابتدا یک فایل جدید برای دکمه خود ایجاد کنید. به‌طور معمول، فایل‌های مربوط به دکمه‌ها در مسیر react/features/toolbar قرار دارند. مسیر فایل: react/features/toolbar/components/CustomButton.js
    import React from 'react';
    import { connect } from 'react-redux';
    import { IconButton } from '@mui/material';
    
    const CustomButton = ({ dispatch }) => {
        const handleClick = () => {
            console.log('Custom button clicked!');
            // اضافه کردن عملکرد دلخواه اینجا
        };
    
        return (
            <IconButton onClick={handleClick}>
                <span>🎉</span> {/* نماد یا آیکون دکمه */}
            </IconButton>
        );
    };
    
    export default connect()(CustomButton);
    

در اینجا، از IconButton از Material UI برای طراحی دکمه استفاده کرده‌ایم. می‌توانید آیکون‌های مختلفی را بر اساس نیاز خود قرار دهید.

۳. افزودن دکمه به نوار ابزار

حالا که React Component دکمه خود را ایجاد کرده‌ایم، باید این دکمه را به نوار ابزار (Toolbar) اضافه کنیم. برای این کار، باید آن را در نوار ابزار Toolbar مورد استفاده قرار دهیم.

  1. ویرایش فایل Toolbar: فایل مربوط به نوار ابزار در مسیر react/features/toolbar/components/Toolbar.js قرار دارد. این فایل را باز کرده و دکمه جدید را به لیست دکمه‌ها اضافه کنید.
    import React from 'react';
    import { connect } from 'react-redux';
    import CustomButton from './CustomButton';  // وارد کردن دکمه جدید
    
    const Toolbar = ({ ...props }) => {
        return (
            <div className="toolbar">
                {/* سایر دکمه‌ها */}
                <CustomButton />  {/* اضافه کردن دکمه جدید */}
            </div>
        );
    };
    
    export default connect()(Toolbar);
    

در اینجا، CustomButton که قبلاً تعریف کرده‌ایم، به نوار ابزار اضافه شده است.

۴. به‌روزرسانی تنظیمات در interface_config.js

اگر می‌خواهید دکمه جدید را در نوار ابزار پیش‌فرض فعال کنید، باید آن را به پیکربندی TOOLBAR_BUTTONS در فایل interface_config.js اضافه کنید. به‌طور معمول این فایل در مسیر زیر قرار دارد:

/usr/share/jitsi-meet/interface_config.js

در این فایل، متغیر TOOLBAR_BUTTONS را ویرایش کنید تا دکمه جدید شما به نوار ابزار اضافه شود:

TOOLBAR_BUTTONS: [
    'microphone',
    'camera',
    'hangup',
    'invite',
    'mute-everyone',
    'participants-pane',
    'profile',
    'chat',
    'settings',
    'videoquality',
    'filmstrip',
    'tileview',
    'custom-button'  // اضافه کردن دکمه جدید
],

۵. ایجاد عملکرد برای دکمه

در مرحله قبلی، دکمه‌ای برای نمایش داده شد، اما این دکمه هنوز هیچ عملکرد خاصی ندارد. شما می‌توانید با افزودن کدهای اختصاصی به داخل handleClick در React Component خود، عملکرد دلخواه دکمه را تعریف کنید. برای مثال:

const handleClick = () => {
   alert('Custom button clicked!');
};

۶. تست دکمه در محیط توسعه

پس از اعمال تغییرات، از دستور زیر برای بازبینی تغییرات خود استفاده کنید و در مرورگر آن‌ها را مشاهده کنید:

make dev

جمع‌بندی

در این بخش، نحوه توسعه یک دکمه جدید با استفاده از React Component اختصاصی در Jitsi Meet شرح داده شد. ابتدا یک Component جدید در React ایجاد کردیم و سپس آن را به نوار ابزار اصلی اضافه کردیم. همچنین نحوه تعریف عملکرد برای دکمه و به‌روزرسانی پیکربندی‌های لازم را نیز توضیح دادیم. این امکان به شما این اجازه را می‌دهد که به راحتی ویژگی‌های جدیدی به رابط کاربری Jitsi Meet اضافه کنید.

 

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استفاده از Redux برای مدیریت وضعیت” subtitle=”توضیحات کامل”]Redux یک ابزار محبوب برای مدیریت وضعیت در اپلیکیشن‌های React است که به‌ویژه زمانی که اپلیکیشن‌ها پیچیده می‌شوند، استفاده از آن می‌تواند به مدیریت داده‌ها و وضعیت کمک زیادی کند. در Jitsi Meet، که از React برای رابط کاربری استفاده می‌کند، می‌توان از Redux برای مدیریت وضعیت‌های مختلف استفاده کرد، مانند وضعیت‌های اتصالات، تنظیمات، وضعیت میکروفن و دوربین، و سایر پارامترهای مرتبط.

در این بخش، نحوه استفاده از Redux برای مدیریت وضعیت در Jitsi Meet را بررسی خواهیم کرد و نشان خواهیم داد چگونه می‌توان یک وضعیت جدید را مدیریت کرده و با استفاده از Redux آن را در اپلیکیشن به‌اشتراک گذاشت.

مراحل استفاده از Redux در Jitsi Meet

۱. نصب Redux و React-Redux

اگر پروژه شما از قبل از Redux استفاده نمی‌کند، باید ابتدا پکیج‌های redux و react-redux را نصب کنید. این پکیج‌ها به شما این امکان را می‌دهند که وضعیت (State) را در میان کامپوننت‌ها مدیریت کنید.

برای نصب این پکیج‌ها از دستور زیر استفاده کنید:

npm install redux react-redux
۲. پیکربندی Store Redux

برای استفاده از Redux، ابتدا باید یک Store ایجاد کنید که در آن وضعیت (State) نگهداری شود. این Store باید به تمامی کامپوننت‌های React متصل شود تا بتوانند وضعیت را مدیریت کنند.

  1. ایجاد فایل store.js: در مسیر react/features/redux/، یک فایل به نام store.js ایجاد کنید:
    import { createStore } from 'redux';
    import rootReducer from './reducers'; // فایل مربوط به ریدوسرها
    
    const store = createStore(
        rootReducer, // ریدوسرها
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // برای استفاده از DevTools Redux
    );
    
    export default store;
    
  2. ایجاد ریدوسرها: ریدوسرها مسئول مدیریت وضعیت و به‌روزرسانی آن‌ها بر اساس اکشن‌هایی هستند که به Store ارسال می‌شوند. یک ریدوسر ساده می‌تواند مانند زیر باشد:در مسیر react/features/redux/reducers/، یک فایل به نام statusReducer.js ایجاد کنید:
    const initialState = {
        isMicOn: true,
        isCameraOn: true,
    };
    
    const statusReducer = (state = initialState, action) => {
        switch (action.type) {
            case 'TOGGLE_MIC':
                return { ...state, isMicOn: !state.isMicOn };
            case 'TOGGLE_CAMERA':
                return { ...state, isCameraOn: !state.isCameraOn };
            default:
                return state;
        }
    };
    
    export default statusReducer;
    
  3. ترکیب ریدوسرها: اگر چندین ریدوسر دارید، باید آن‌ها را با استفاده از combineReducers ترکیب کنید. در مسیر react/features/redux/reducers/، یک فایل به نام index.js ایجاد کنید:
    import { combineReducers } from 'redux';
    import statusReducer from './statusReducer';
    
    const rootReducer = combineReducers({
        status: statusReducer,  // اضافه کردن ریدوسرها به ریشه
    });
    
    export default rootReducer;
    
۳. اتصال Redux به React

حالا که Store و ریدوسرها را پیکربندی کرده‌ایم، باید اپلیکیشن React خود را به Redux متصل کنیم.

  1. وارد کردن Provider در ریشه اپلیکیشن: برای اتصال Redux به اپلیکیشن React، از Provider از پکیج react-redux استفاده می‌کنیم. این کامپوننت باید در ریشه اپلیکیشن قرار گیرد تا Store به تمامی کامپوننت‌ها منتقل شود.در فایل اصلی اپلیکیشن (معمولاً index.js)، باید Store را به Provider ارسال کنید:
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import App from './App';
    import store from './features/redux/store';  // وارد کردن Store
    
    ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
    );
    
۴. استفاده از وضعیت در کامپوننت‌ها

حالا که Redux به اپلیکیشن شما متصل شده است، می‌توانید از وضعیت‌ها در کامپوننت‌ها استفاده کنید. برای این کار از useSelector برای خواندن وضعیت و از useDispatch برای ارسال اکشن‌ها استفاده می‌کنیم.

  1. خواندن وضعیت با useSelector: برای خواندن وضعیت از Store، از useSelector استفاده می‌کنیم. به‌عنوان مثال، برای خواندن وضعیت میکروفن و دوربین، می‌توانیم از کد زیر استفاده کنیم:
    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    
    const VideoControls = () => {
        const isMicOn = useSelector(state => state.status.isMicOn);
        const isCameraOn = useSelector(state => state.status.isCameraOn);
        const dispatch = useDispatch();
    
        const toggleMic = () => {
            dispatch({ type: 'TOGGLE_MIC' });
        };
    
        const toggleCamera = () => {
            dispatch({ type: 'TOGGLE_CAMERA' });
        };
    
        return (
            <div>
                <button onClick={toggleMic}>
                    {isMicOn ? 'Mute Mic' : 'Unmute Mic'}
                </button>
                <button onClick={toggleCamera}>
                    {isCameraOn ? 'Turn Off Camera' : 'Turn On Camera'}
                </button>
            </div>
        );
    };
    
    export default VideoControls;
    

    در این کد:

    • از useSelector برای خواندن وضعیت میکروفن و دوربین استفاده کرده‌ایم.
    • از useDispatch برای ارسال اکشن‌ها به Store استفاده کرده‌ایم.
  2. ارسال اکشن‌ها با useDispatch: برای تغییر وضعیت‌ها، از useDispatch استفاده می‌کنیم تا اکشن‌های مربوطه به Store ارسال شوند. در مثال بالا، با کلیک روی دکمه‌ها، اکشن‌های TOGGLE_MIC و TOGGLE_CAMERA به Store ارسال می‌شوند که وضعیت‌های isMicOn و isCameraOn را تغییر می‌دهند.
۵. تست عملکرد

پس از پیاده‌سازی کدهای بالا، برای تست آن‌ها، دستور زیر را در محیط توسعه اجرا کنید تا تغییرات شما در مرورگر اعمال شود:

make dev

جمع‌بندی

در این بخش، نحوه استفاده از Redux برای مدیریت وضعیت در Jitsi Meet را بررسی کردیم. ابتدا پیکربندی‌های لازم برای Redux و React-Redux را انجام دادیم، سپس ریدوسرها و Store را ساختیم و اپلیکیشن را به Redux متصل کردیم. در نهایت، یاد گرفتیم که چگونه از useSelector و useDispatch برای مدیریت وضعیت در کامپوننت‌ها استفاده کنیم. این امکان به شما این اجازه را می‌دهد که وضعیت‌ها را به‌صورت متمرکز و با استفاده از Redux مدیریت کنید و عملکرد اپلیکیشن خود را بهبود دهید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 7. چندزبانه‌سازی و سفارشی‌سازی ترجمه‌ها”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نحوه تغییر ترجمه‌ها در lang/” subtitle=”توضیحات کامل”]در Jitsi Meet، ترجمه‌ها و متون مختلف در فایل‌های زبان مختلف ذخیره می‌شوند. این فایل‌ها در دایرکتوری lang/ قرار دارند و می‌توانید ترجمه‌ها را برای زبان‌های مختلف به‌راحتی تغییر دهید یا اضافه کنید. این تنظیمات به شما این امکان را می‌دهند که رابط کاربری Jitsi را به زبان‌های مختلف یا به‌طور خاص برای کاربران خود شخصی‌سازی کنید.

در این بخش، نحوه تغییر ترجمه‌ها در دایرکتوری lang/ را توضیح خواهیم داد و مراحلی را که باید برای اضافه کردن یا ویرایش ترجمه‌ها دنبال کنید، بررسی خواهیم کرد.

مراحل تغییر ترجمه‌ها در lang/

۱. مکان دایرکتوری lang

فایل‌های ترجمه Jitsi Meet در دایرکتوری lang/ قرار دارند که شامل فایل‌های JSON برای هر زبان است. این فایل‌ها حاوی جفت‌های کلید و مقدار هستند که نشان‌دهنده متن‌های مختلف برای رابط کاربری می‌باشند.

مسیر دایرکتوری lang/ به‌صورت زیر است:

react/ i18n / lang/

در داخل این دایرکتوری، برای هر زبان یک فایل JSON جداگانه وجود دارد. به‌عنوان مثال:

  • en.json برای زبان انگلیسی
  • de.json برای زبان آلمانی
  • fr.json برای زبان فرانسه
۲. ساختار فایل‌های ترجمه

در هر فایل JSON، شما یک جفت کلید و مقدار خواهید داشت که متن‌ها و ترجمه‌ها را تعیین می‌کند. به‌عنوان مثال، فایل en.json (زبان انگلیسی) ممکن است به این صورت باشد:

{
    "welcomeMessage": "Welcome to Jitsi Meet!",
    "joinButton": "Join Meeting",
    "leaveButton": "Leave Meeting",
    "muteButton": "Mute",
    "unmuteButton": "Unmute"
}

در اینجا، "welcomeMessage" کلید است که مقدار آن متن نمایشی “Welcome to Jitsi Meet!” است. هر زمان که نیاز به تغییر متن نمایش داده‌شده در رابط کاربری دارید، کافی است مقدار کلید مربوطه را ویرایش کنید.

۳. ویرایش فایل ترجمه برای زبان‌های مختلف

برای تغییر ترجمه‌ها، باید فایل JSON مناسب زبان را ویرایش کنید. به‌عنوان مثال، اگر می‌خواهید ترجمه پیام خوش‌آمدگویی را به زبان فارسی تغییر دهید، مراحل زیر را دنبال کنید:

  1. فایل fa.json را در مسیر lang/ پیدا کنید (اگر فایل فارسی وجود ندارد، می‌توانید یک فایل جدید با نام fa.json ایجاد کنید).
  2. ترجمه‌ها را ویرایش کنید یا به آن‌ها اضافه کنید:
{
    "welcomeMessage": "به Jitsi Meet خوش آمدید!",
    "joinButton": "پیوستن به جلسه",
    "leaveButton": "ترک جلسه",
    "muteButton": "بی‌صدا کردن",
    "unmuteButton": "باز کردن صدای میکروفن"
}

در اینجا، پیام خوش‌آمدگویی به فارسی تغییر کرده است.

۴. اضافه کردن ترجمه جدید برای زبان‌های خاص

اگر می‌خواهید زبان جدیدی را به اپلیکیشن اضافه کنید، کافی است یک فایل جدید JSON ایجاد کرده و ترجمه‌ها را برای آن زبان اضافه کنید.

  1. فایل جدیدی مانند es.json برای زبان اسپانیایی ایجاد کنید.
  2. ترجمه‌های مربوط به اسپانیایی را در این فایل اضافه کنید:
{
    "welcomeMessage": "¡Bienvenido a Jitsi Meet!",
    "joinButton": "Unirse a la reunión",
    "leaveButton": "Dejar la reunión",
    "muteButton": "Silenciar",
    "unmuteButton": "Reactivar micrófono"
}
۵. پیکربندی زبان پیش‌فرض در Jitsi Meet

برای تعیین زبان پیش‌فرض یا فعال کردن زبان جدید در Jitsi Meet، باید در فایل تنظیمات interface_config.js زبان پیش‌فرض را مشخص کنید.

  1. فایل interface_config.js را در مسیر config/ پیدا کنید.
  2. مقدار متغیر LANG را به زبان دلخواه تغییر دهید:
const LANG = 'fa';  // فارسی
  1. پس از این تغییرات، زبان فارسی به‌عنوان زبان پیش‌فرض برای کاربران نمایش داده خواهد شد.
۶. بارگذاری مجدد و بررسی تغییرات

پس از اعمال تغییرات در فایل‌های ترجمه، اپلیکیشن Jitsi Meet را مجدداً بارگذاری کنید تا تغییرات اعمال شود. اگر از حالت توسعه استفاده می‌کنید، می‌توانید با استفاده از دستور زیر اپلیکیشن را مجدداً راه‌اندازی کنید:

make dev

جمع‌بندی

در این بخش، نحوه تغییر ترجمه‌ها در Jitsi Meet را بررسی کردیم. ابتدا با مکان دایرکتوری lang/ آشنا شدیم که شامل فایل‌های JSON برای زبان‌های مختلف است. سپس یاد گرفتیم که چگونه فایل‌های ترجمه را ویرایش کرده و پیام‌ها و دکمه‌ها را به زبان‌های مختلف ترجمه کنیم. همچنین، نحوه اضافه کردن زبان‌های جدید به پروژه و تغییر زبان پیش‌فرض در فایل interface_config.js را یاد گرفتیم. این روش‌ها به شما این امکان را می‌دهند که رابط کاربری Jitsi Meet را به‌طور کامل سفارشی‌سازی کنید و تجربه‌ای کاربری متناسب با نیازهای خود فراهم آورید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”اضافه کردن زبان جدید و تنظیم آن به صورت پیش‌فرض” subtitle=”توضیحات کامل”]در Jitsi Meet، امکان اضافه کردن زبان‌های جدید برای رابط کاربری فراهم است. این ویژگی به شما این امکان را می‌دهد که اپلیکیشن را به زبان‌های مختلف برای کاربران خود در دسترس قرار دهید. در این بخش، نحوه اضافه کردن زبان جدید به پروژه و تنظیم آن به عنوان زبان پیش‌فرض را به‌طور کامل توضیح خواهیم داد.

مراحل اضافه کردن زبان جدید به Jitsi Meet

برای اضافه کردن زبان جدید، چندین مرحله ساده وجود دارد که به شرح زیر است:


۱. اضافه کردن فایل ترجمه زبان جدید

  1. ابتدا باید فایل ترجمه زبان جدید را ایجاد کنید. فایل‌های ترجمه در دایرکتوری lang/ قرار دارند. به‌عنوان مثال، برای اضافه کردن زبان اسپانیایی، یک فایل جدید به نام es.json در این دایرکتوری ایجاد کنید.مسیر دایرکتوری lang/ به‌صورت زیر است:
    react/i18n/lang/
    
  2. سپس، در فایل جدیدی که ایجاد کرده‌اید (مثلاً es.json برای زبان اسپانیایی)، ترجمه‌های مربوط به متون مختلف رابط کاربری را اضافه کنید. هر فایل JSON باید جفت‌های کلید و مقدار را برای هر متن در اپلیکیشن شامل شود.به‌عنوان مثال، محتوای فایل es.json می‌تواند به شکل زیر باشد:
    {
        "welcomeMessage": "¡Bienvenido a Jitsi Meet!",
        "joinButton": "Unirse a la reunión",
        "leaveButton": "Dejar la reunión",
        "muteButton": "Silenciar",
        "unmuteButton": "Reactivar micrófono",
        "endCallButton": "Finalizar llamada"
    }
    

    این ترجمه‌ها برای دکمه‌ها و پیام‌های مختلف در رابط کاربری خواهند بود.


۲. تنظیم زبان پیش‌فرض

بعد از اینکه فایل ترجمه زبان جدید را اضافه کردید، باید این زبان را به‌عنوان زبان پیش‌فرض تنظیم کنید. برای این کار، فایل پیکربندی interface_config.js را ویرایش می‌کنید.

  1. فایل interface_config.js در مسیر زیر قرار دارد:
    /usr/share/jitsi-meet/interface_config.js
    
  2. در این فایل، باید متغیر LANG را پیدا کنید و زبان جدیدی که اضافه کرده‌اید (مثل es برای اسپانیایی) را به‌عنوان زبان پیش‌فرض تنظیم کنید.برای این‌که زبان اسپانیایی به‌عنوان زبان پیش‌فرض تنظیم شود، باید متغیر LANG را به صورت زیر ویرایش کنید:
    const LANG = 'es';  // اسپانیایی
    

    پس از انجام این تغییرات، زبان اسپانیایی به‌عنوان زبان پیش‌فرض برای کاربران نمایش داده خواهد شد.


۳. اضافه کردن زبان جدید به گزینه‌های زبان در UI

برای این‌که زبان جدیدی که اضافه کرده‌اید به‌عنوان یک انتخاب برای کاربران در رابط کاربری نمایش داده شود، باید فایل پیکربندی interface_config.js را ویرایش کنید.

  1. در فایل interface_config.js، به بخش LANGUAGES بروید و زبان جدید را به آرایه اضافه کنید.به‌عنوان مثال، برای اضافه کردن زبان اسپانیایی، خط زیر را به آرایه LANGUAGES اضافه کنید:
    LANGUAGES: [
        'en',  // انگلیسی
        'de',  // آلمانی
        'fr',  // فرانسه
        'es'   // اسپانیایی
    ],
    
  2. با این کار، زبان اسپانیایی به‌عنوان یک گزینه در منوی انتخاب زبان برای کاربران نمایش داده می‌شود.

۴. بررسی و بارگذاری مجدد

پس از انجام تغییرات، برای بارگذاری مجدد تنظیمات و مشاهده زبان جدید، باید اپلیکیشن را مجدداً راه‌اندازی کنید. اگر از حالت توسعه استفاده می‌کنید، می‌توانید با استفاده از دستور زیر اپلیکیشن را مجدداً راه‌اندازی کنید:

make dev

اگر به‌صورت نهایی در حال اجرای Jitsi Meet هستید، می‌توانید سرور را با استفاده از دستورات زیر ریستارت کنید:

sudo systemctl restart jitsi-videobridge2
sudo systemctl restart prosody
sudo systemctl restart jicofo

جمع‌بندی

در این بخش، نحوه اضافه کردن زبان جدید به Jitsi Meet و تنظیم آن به‌عنوان زبان پیش‌فرض را بررسی کردیم. ابتدا فایل ترجمه زبان جدید را در دایرکتوری lang/ ایجاد کردیم و سپس زبان جدید را به‌عنوان زبان پیش‌فرض در فایل interface_config.js تنظیم کردیم. همچنین، زبان جدید را به منوی انتخاب زبان در رابط کاربری اضافه کردیم تا کاربران بتوانند زبان جدید را انتخاب کنند. در نهایت، با بارگذاری مجدد اپلیکیشن، تغییرات اعمال شدند. این مراحل به شما این امکان را می‌دهند که Jitsi Meet را به زبان‌های مختلف برای کاربران خود سفارشی‌سازی کنید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 8. واکنش‌گرایی (Responsive) و Mobile Optimization”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”بررسی Breakpointهای پیش‌فرض” subtitle=”توضیحات کامل”]در هنگام توسعه وب‌سایت‌ها و اپلیکیشن‌های ریسپانسیو، Breakpointها نقاطی هستند که طراحی و چیدمان صفحه تغییر می‌کند تا با اندازه‌های مختلف صفحه‌نمایش تطابق پیدا کند. Jitsi Meet نیز از Breakpointهای پیش‌فرض برای تنظیم طرح و قالب رابط کاربری در دستگاه‌های مختلف مانند موبایل، تبلت و دسکتاپ استفاده می‌کند. این Breakpointها در کدهای CSS و SCSS تنظیم شده‌اند تا تجربه کاربری بهینه‌ای ارائه دهند.

در این بخش، به بررسی Breakpointهای پیش‌فرض در Jitsi Meet و نحوه تنظیم و سفارشی‌سازی آن‌ها خواهیم پرداخت.


۱. Breakpointهای پیش‌فرض در Jitsi Meet

Jitsi Meet از Breakpointهای استاندارد برای ریسپانسیو کردن رابط کاربری خود استفاده می‌کند. این Breakpointها معمولاً در فایل‌های SCSS قرار دارند و به‌طور خاص برای تطابق با اندازه‌های صفحه‌نمایش مختلف طراحی شده‌اند. برای مشاهده و ویرایش این Breakpoint‌ها، باید فایل‌های مربوطه را بررسی کنیم.


۲. فایل‌های مربوطه

Breakpointها معمولاً در فایل‌های SCSS قرار دارند که در دایرکتوری css/ و scss/ پروژه Jitsi Meet ذخیره شده‌اند. این فایل‌ها، با استفاده از دستورات @media, تنظیمات طرح را برای اندازه‌های مختلف صفحه‌نمایش انجام می‌دهند.

مسیر فایل‌های CSS و SCSS به شرح زیر است:

react/styles/

۳. ساختار Breakpointها در Jitsi Meet

Breakpointها در Jitsi Meet با استفاده از اندازه‌های صفحه‌نمایش و ویژگی‌های min-width یا max-width به‌طور معمول در CSS تنظیم می‌شوند. این ویژگی‌ها معمولاً در فایل‌های SCSS در دایرکتوری styles/ تعریف می‌شوند.

در فایل‌های SCSS، معمولا Breakpointها به صورت زیر تعریف می‌شوند:

$small-screen: 480px;
$medium-screen: 768px;
$large-screen: 1024px;
$extra-large-screen: 1200px;

این Breakpointها به‌طور پیش‌فرض برای اندازه‌های مختلف صفحه‌نمایش در Jitsi Meet تنظیم شده‌اند:

  • small-screen : برای گوشی‌های موبایل و صفحه‌نمایش‌های کوچک
  • medium-screen : برای تبلت‌ها و صفحه‌نمایش‌های متوسط
  • large-screen : برای دسکتاپ‌ها و صفحه‌نمایش‌های بزرگ
  • extra-large-screen : برای صفحه‌نمایش‌های بسیار بزرگ

۴. استفاده از Breakpointها در فایل‌های CSS/SCSS

در فایل‌های CSS و SCSS، از Breakpointها برای تعریف چیدمان‌های مختلف در اندازه‌های مختلف صفحه‌نمایش استفاده می‌شود. به‌طور مثال، برای تغییر ویژگی‌های چیدمان در صفحه‌نمایش‌های مختلف، می‌توانیم از دستورات @media به شکل زیر استفاده کنیم:

/* برای صفحه‌نمایش‌های کوچکتر از 480px (گوشی‌های موبایل) */
@media (max-width: $small-screen) {
    .container {
        flex-direction: column;
    }
}

/* برای صفحه‌نمایش‌های بین 480px و 768px (تبلت‌ها) */
@media (min-width: $small-screen) and (max-width: $medium-screen) {
    .container {
        flex-direction: row;
    }
}

/* برای صفحه‌نمایش‌های بین 768px و 1024px (دستگاه‌های متوسط) */
@media (min-width: $medium-screen) and (max-width: $large-screen) {
    .container {
        flex-direction: row;
    }
}

/* برای صفحه‌نمایش‌های بزرگتر از 1024px */
@media (min-width: $large-screen) {
    .container {
        flex-direction: row;
    }
}

در این مثال، براساس اندازه صفحه‌نمایش، چیدمان‌های مختلف برای .container اعمال می‌شود. این کار کمک می‌کند که رابط کاربری برای اندازه‌های مختلف صفحه‌نمایش به‌طور بهینه نمایش داده شود.


۵. سفارشی‌سازی Breakpointها

اگر بخواهید Breakpointها را برای پروژه خود سفارشی‌سازی کنید، می‌توانید مقادیر متغیرهای تعریف‌شده برای Breakpointها را تغییر دهید. به‌عنوان مثال، اگر بخواهید یک Breakpoint جدید برای صفحه‌نمایش‌های خیلی کوچک اضافه کنید، می‌توانید کد زیر را به فایل SCSS خود اضافه کنید:

$extra-small-screen: 360px;  /* Breakpoint جدید برای صفحه‌نمایش‌های کوچکتر از 360px */

سپس می‌توانید این Breakpoint را در دستورات @media خود استفاده کنید:

@media (max-width: $extra-small-screen) {
    .container {
        flex-direction: column;
    }
}

۶. بررسی و بارگذاری مجدد

پس از اعمال تغییرات و سفارشی‌سازی Breakpoint‌ها، برای مشاهده تغییرات، باید فایل‌های CSS و SCSS را مجدداً کامپایل کنید و اپلیکیشن را بارگذاری مجدد کنید. اگر از حالت توسعه استفاده می‌کنید، می‌توانید دستور زیر را برای کامپایل مجدد و بارگذاری استفاده کنید:

make dev

اگر در حال اجرای نسخه نهایی هستید، می‌توانید با استفاده از دستور زیر اپلیکیشن را مجدداً راه‌اندازی کنید:

sudo systemctl restart jitsi-videobridge2
sudo systemctl restart prosody
sudo systemctl restart jicofo

جمع‌بندی

در این بخش، بررسی کردیم که چگونه Breakpointها در Jitsi Meet تنظیم شده‌اند و نحوه استفاده از آن‌ها برای بهینه‌سازی رابط کاربری برای اندازه‌های مختلف صفحه‌نمایش. ما Breakpointهای پیش‌فرض Jitsi Meet را شناسایی کرده و نحوه تغییر و سفارشی‌سازی آن‌ها را توضیح دادیم. با استفاده از فایل‌های SCSS و دستورات @media، می‌توان چیدمان‌ها و ویژگی‌های مختلف را برای دستگاه‌های مختلف تنظیم کرد. این امکان به شما کمک می‌کند که رابط کاربری Jitsi Meet را به‌طور بهینه و ریسپانسیو برای کاربران مختلف تنظیم کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”بهینه‌سازی UI برای صفحه‌نمایش‌های کوچک” subtitle=”توضیحات کامل”]در طراحی وب و اپلیکیشن‌های موبایل، بهینه‌سازی رابط کاربری (UI) برای صفحه‌نمایش‌های کوچک یکی از مهم‌ترین جنبه‌های ایجاد تجربه کاربری مناسب است. از آنجا که بسیاری از کاربران از دستگاه‌های موبایل و تبلت‌ها برای دسترسی به سرویس‌ها استفاده می‌کنند، باید UI به‌گونه‌ای طراحی شود که در صفحه‌نمایش‌های کوچک به خوبی نمایش داده شود و قابلیت استفاده بهینه داشته باشد. در این بخش، نحوه بهینه‌سازی رابط کاربری Jitsi Meet برای صفحه‌نمایش‌های کوچک بررسی خواهد شد.


۱. بررسی مشکلات رایج در صفحه‌نمایش‌های کوچک

قبل از پرداختن به بهینه‌سازی رابط کاربری، باید مشکلاتی که ممکن است در صفحه‌نمایش‌های کوچک ایجاد شوند، شناسایی کنیم:

  • عرض محدود صفحه‌نمایش: بسیاری از دستگاه‌های موبایل دارای صفحه‌نمایش‌های کوچک هستند که محدودیت‌هایی برای نمایش عناصر مختلف در صفحه ایجاد می‌کنند.
  • تاچ‌اسکرین‌ها: در صفحه‌نمایش‌های کوچک، بسیاری از کاربران از تاچ‌اسکرین برای تعامل با UI استفاده می‌کنند. بنابراین، باید عناصر قابل‌کلیک (مانند دکمه‌ها و لینک‌ها) به‌گونه‌ای طراحی شوند که راحتی استفاده را تضمین کنند.
  • محل‌بندی‌های پیچیده: استفاده از طراحی‌های پیچیده یا چیدمان‌های چند ستونه می‌تواند منجر به ایجاد فضای غیرضروری و سخت برای پیمایش در صفحه شود.

۲. استفاده از Breakpointهای مناسب برای صفحه‌نمایش‌های کوچک

برای اطمینان از اینکه رابط کاربری Jitsi Meet به‌درستی در صفحه‌نمایش‌های کوچک نمایش داده می‌شود، می‌توان از Breakpointهای مختلف در CSS/SCSS استفاده کرد. در این بخش، به‌ویژه برای دستگاه‌های موبایل، Breakpointها تنظیم می‌شوند تا تجربه کاربری بهینه ارائه شود.

در فایل SCSS، می‌توان از Breakpointهای خاص برای صفحه‌نمایش‌های کوچک به‌صورت زیر استفاده کرد:

/* برای صفحه‌نمایش‌های کوچکتر از 480px (گوشی‌های موبایل) */
@media (max-width: 480px) {
    .container {
        flex-direction: column;
    }

    .header {
        font-size: 14px;
    }

    .button {
        padding: 10px;
        font-size: 12px;
    }
}

در این مثال، تنظیمات برای صفحه‌نمایش‌های کوچکتر از 480px (گوشی‌های موبایل) اعمال می‌شود. در این حالت، چیدمان‌های چندستونه به یک ستون تبدیل می‌شوند و اندازه قلم‌ها و دکمه‌ها کوچک‌تر می‌شوند تا فضای بیشتری برای محتوا ایجاد شود.


۳. استفاده از طراحی ساده و کم‌حجم برای صفحه‌نمایش‌های کوچک

برای صفحه‌نمایش‌های کوچک، بهتر است از طراحی ساده و کم‌حجم استفاده شود تا کاربران به راحتی بتوانند با رابط کاربری تعامل داشته باشند. برخی از راهکارها شامل:

  • استفاده از آیکون‌ها به‌جای متن: آیکون‌ها فضای کمتری اشغال می‌کنند و برای کاربران تلفن‌های همراه مناسب‌تر هستند.
  • حذف یا پنهان‌سازی ویژگی‌های غیرضروری: ویژگی‌هایی که در صفحه‌نمایش‌های کوچک کاربرد زیادی ندارند می‌توانند پنهان شوند یا از دسترس خارج شوند.
  • ساخت منوهای کشویی یا هامبورگری: این منوها به کاربر این امکان را می‌دهند که گزینه‌های اضافی را با کشیدن صفحه‌نمایش یا باز کردن منو مشاهده کنند.

برای پنهان کردن برخی از دکمه‌ها یا ویژگی‌ها در صفحه‌نمایش‌های کوچک، می‌توان از دستورهای CSS مانند display: none استفاده کرد:

/* پنهان‌سازی دکمه‌های اضافی در صفحه‌نمایش‌های کوچکتر از 480px */
@media (max-width: 480px) {
    .toolbar-button.record, .toolbar-button.live-stream {
        display: none;
    }
}

در این کد، دکمه‌های “Record” و “Live Stream” در صفحه‌نمایش‌های کوچکتر از 480px پنهان می‌شوند.


۴. بهینه‌سازی تصاویر و رسانه‌ها برای صفحه‌نمایش‌های کوچک

تصاویر و رسانه‌ها باید برای صفحه‌نمایش‌های کوچک بهینه شوند تا بارگذاری سریع‌تری داشته باشند و فضای کمتری مصرف کنند. برای بهینه‌سازی تصاویر می‌توان از تکنیک‌های زیر استفاده کرد:

  • استفاده از فرمت‌های مناسب برای تصاویر: فرمت‌هایی مانند WebP می‌توانند حجم تصاویر را کاهش دهند بدون اینکه کیفیت به‌طور قابل‌توجهی کاهش یابد.
  • استفاده از ویژگی srcset: برای بارگذاری تصاویر با کیفیت متناسب با اندازه صفحه‌نمایش، می‌توان از ویژگی srcset در تگ <img> استفاده کرد. این ویژگی تصاویر مختلف را بسته به اندازه صفحه‌نمایش بارگذاری می‌کند.
<img 
    srcset="image-480w.jpg 480w, image-800w.jpg 800w, image-1200w.jpg 1200w" 
    sizes="(max-width: 480px) 100vw, 800px"
    src="image-800w.jpg" alt="Responsive Image" />

این روش به شما این امکان را می‌دهد که تصاویر مختلف را با توجه به اندازه صفحه‌نمایش بارگذاری کنید.


۵. بهینه‌سازی نوار ابزار (Toolbar) برای صفحه‌نمایش‌های کوچک

برای نوار ابزار (Toolbar)، در صفحه‌نمایش‌های کوچک باید تغییرات خاصی ایجاد کرد تا دسترسی به دکمه‌ها راحت‌تر و سریع‌تر باشد. به‌عنوان مثال، می‌توانید از نمای “آیکون‌های کوچک” استفاده کنید یا نوار ابزار را به حالت کشویی تبدیل کنید تا فضای بیشتری در اختیار سایر عناصر قرار گیرد.

برای تنظیم نوار ابزار در صفحه‌نمایش‌های کوچک می‌توانید از کد زیر استفاده کنید:

/* تغییر نوار ابزار در صفحه‌نمایش‌های کوچکتر از 480px */
@media (max-width: 480px) {
    .toolbar {
        flex-direction: column;
        justify-content: flex-start;
    }
    .toolbar-button {
        font-size: 14px;
        padding: 8px;
    }
}

در این کد، نوار ابزار به حالت عمودی (ستونه) تبدیل می‌شود و دکمه‌ها برای صفحه‌نمایش‌های کوچک تغییر اندازه می‌دهند.


جمع‌بندی

در این بخش، بررسی کردیم که چگونه رابط کاربری Jitsi Meet را برای صفحه‌نمایش‌های کوچک بهینه‌سازی کنیم. با استفاده از Breakpointها، طراحی ساده، پنهان‌سازی ویژگی‌های غیرضروری، و بهینه‌سازی تصاویر می‌توان تجربه کاربری بهتری را در دستگاه‌های موبایل و تبلت فراهم کرد. همچنین، با استفاده از تنظیمات CSS و SCSS و تغییرات در نوار ابزار، می‌توان رابط کاربری را به‌گونه‌ای طراحی کرد که برای کاربران دستگاه‌های کوچک مناسب باشد. این اقدامات باعث بهبود دسترسی و عملکرد اپلیکیشن در انواع دستگاه‌ها می‌شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”غیرفعال‌سازی ویژگی‌هایی در موبایل برای سبک‌تر شدن” subtitle=”توضیحات کامل”]در طراحی رابط کاربری برای دستگاه‌های موبایل، یکی از روش‌های مهم برای بهبود عملکرد و تجربه کاربری، غیرفعال‌سازی ویژگی‌ها و امکانات غیرضروری است. این کار می‌تواند به کاهش بارگذاری منابع، افزایش سرعت بارگذاری صفحات و جلوگیری از شلوغی صفحه‌نمایش کمک کند. در ادامه، نحوه غیرفعال‌سازی برخی از ویژگی‌ها در نسخه موبایل Jitsi Meet را بررسی خواهیم کرد.


۱. غیرفعال‌سازی دکمه‌ها و ویژگی‌های اضافی

در برخی موارد، ویژگی‌هایی مانند ضبط (Record)، پخش زنده (Livestream)، اشتراک‌گذاری (Share) یا چت (Chat) ممکن است برای کاربران موبایل به دلیل محدودیت فضای صفحه‌نمایش یا عملکرد غیرضروری باشند. این ویژگی‌ها می‌توانند غیرفعال شوند تا صفحه سبک‌تر و دسترسی آسان‌تر شود.

برای غیرفعال‌سازی دکمه‌ها در نسخه موبایل، می‌توان از CSS Media Queries استفاده کرد و ویژگی‌ها را فقط در صفحه‌نمایش‌های کوچک مخفی یا غیرفعال کرد. به‌عنوان مثال، برای مخفی کردن دکمه “Record” در موبایل، از کد زیر استفاده می‌کنیم:

/* غیرفعال‌سازی دکمه Record در صفحه‌نمایش‌های کوچکتر از 480px */
@media (max-width: 480px) {
    .toolbar-button.record {
        display: none;
    }
}

این کد دکمه “Record” را فقط در صفحه‌نمایش‌های کوچکتر از 480px غیرفعال می‌کند.


۲. غیرفعال‌سازی قابلیت‌های اضافی مانند چت، اشتراک‌گذاری و پخش زنده

برای غیرفعال‌سازی قابلیت‌های دیگری مانند چت، اشتراک‌گذاری و پخش زنده می‌توان همان روش را به‌کار برد. به‌عنوان مثال:

/* غیرفعال‌سازی چت و اشتراک‌گذاری در موبایل */
@media (max-width: 480px) {
    .toolbar-button.chat,
    .toolbar-button.share {
        display: none;
    }
}

در این حالت، چت و اشتراک‌گذاری فقط در صفحه‌نمایش‌های کوچکتر از 480px غیرفعال خواهند شد.


۳. غیرفعال‌سازی ویژگی‌های پخش ویدئو در صفحه‌نمایش‌های کوچک

ویژگی‌هایی مانند پخش ویدئو (که می‌تواند منابع زیادی مصرف کند) می‌تواند در صفحه‌نمایش‌های کوچک یا دستگاه‌های موبایل غیرفعال شود. این کار می‌تواند به بهبود عملکرد و سرعت بارگذاری کمک کند. برای این منظور، از کد زیر استفاده کنید:

/* غیرفعال‌سازی ویدئو در صفحه‌نمایش‌های کوچکتر از 480px */
@media (max-width: 480px) {
    .video-container {
        display: none;
    }
}

این کد باعث می‌شود که ویدئو در دستگاه‌های موبایل مخفی شود و به‌جای آن، از تصاویر ثابت یا دیگر محتوای سبک‌تر استفاده شود.


۴. غیرفعال‌سازی آیکون‌ها و منوهای اضافی

در برخی مواقع، آیکون‌ها و منوهای اضافی که در نسخه دسکتاپ کاربرد دارند، می‌توانند فضای زیادی در صفحه موبایل بگیرند. برای ساده‌سازی رابط کاربری، می‌توان برخی از منوها و آیکون‌ها را در نسخه موبایل غیرفعال کرد.

برای این کار می‌توانید از دستور display: none در CSS استفاده کنید تا برخی آیکون‌ها یا منوها را پنهان کنید:

/* غیرفعال‌سازی منوی اضافی در صفحه‌نمایش‌های کوچکتر از 480px */
@media (max-width: 480px) {
    .extra-menu,
    .additional-icons {
        display: none;
    }
}

در این کد، منوها و آیکون‌های اضافی در صفحه‌نمایش‌های کوچکتر از 480px غیرفعال می‌شوند.


۵. غیرفعال‌سازی ویژگی‌های ارتباطی مانند صدا و تصویر

در بعضی موارد ممکن است بخواهید برخی از ویژگی‌های ارتباطی مانند صدا یا تصویر را در دستگاه‌های موبایل غیرفعال کنید تا استفاده از منابع کاهش یابد و تجربه کاربری سبک‌تری ارائه شود. برای این کار می‌توانید کدهای زیر را اعمال کنید:

/* غیرفعال‌سازی قابلیت تصویر و صدا در صفحه‌نمایش‌های کوچکتر از 480px */
@media (max-width: 480px) {
    .audio-button,
    .video-button {
        display: none;
    }
}

این کد باعث می‌شود که دکمه‌های صدا و تصویر در نسخه موبایل غیرفعال شوند.


۶. کاهش کیفیت تصویر و ویدئو برای صفحه‌نمایش‌های کوچک

یکی دیگر از راه‌های غیرفعال‌سازی ویژگی‌ها در موبایل، کاهش کیفیت تصویر و ویدئو است. این کار می‌تواند باعث افزایش سرعت بارگذاری و کاهش مصرف داده شود. در این بخش، به تنظیمات کیفیت ویدئو در Jitsi خواهیم پرداخت.

برای کاهش کیفیت ویدئو و تصاویر در صفحه‌نمایش‌های کوچک، می‌توان از تنظیمات پیش‌فرض Jitsi و تغییرات خاص استفاده کرد:

// تغییر کیفیت ویدئو برای صفحه‌نمایش‌های کوچک
const config = {
    videoQuality: {
        minHeight: 240, // تنظیم حداقل کیفیت ویدئو به 240p
        maxHeight: 480   // تنظیم حداکثر کیفیت ویدئو به 480p
    }
};

در این تنظیمات، کیفیت ویدئو برای دستگاه‌های موبایل به 240p و 480p محدود می‌شود که می‌تواند به بهینه‌سازی مصرف داده و عملکرد کمک کند.


جمع‌بندی

غیرفعال‌سازی ویژگی‌های غیرضروری در دستگاه‌های موبایل به سبک‌تر شدن رابط کاربری و بهبود عملکرد کمک می‌کند. با استفاده از CSS Media Queries، می‌توان دکمه‌ها و ویژگی‌های اضافی را در صفحه‌نمایش‌های کوچک غیرفعال کرد و تنها ویژگی‌هایی را که در موبایل به آن‌ها نیاز است، فعال نگه داشت. همچنین، کاهش کیفیت ویدئو و تصویر، پنهان‌سازی آیکون‌ها و منوهای اضافی، و استفاده از تکنیک‌های بهینه‌سازی می‌تواند تجربه کاربری بهتری را برای کاربران موبایل فراهم کند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 9. بارگذاری پویای تنظیمات ظاهر از فایل یا پایگاه‌داده”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”بارگذاری پویا (Dynamic) فایل config/interface_config در هنگام load” subtitle=”توضیحات کامل”]در پیکربندی Jitsi Meet، فایل interface_config.js برای تنظیمات رابط کاربری استفاده می‌شود. این فایل تنظیمات مختلفی مانند دکمه‌ها، منوها، رنگ‌ها، تصاویر و دیگر ویژگی‌های رابط کاربری را مدیریت می‌کند. در این قسمت، نحوه بارگذاری پویا و داینامیک این فایل در هنگام بارگذاری صفحه و به‌طور خاص هنگام load را بررسی خواهیم کرد.


۱. مفاهیم بارگذاری پویا

بارگذاری پویا به معنای بارگذاری و اعمال تنظیمات به‌طور خودکار در زمان بارگذاری صفحه است، بدون اینکه نیاز به بارگذاری مجدد یا تغییر دستی فایل‌ها داشته باشیم. در Jitsi Meet، این کار می‌تواند به‌وسیله‌ی جاوااسکریپت و به‌طور خاص با استفاده از مکانیزم‌هایی مانند window.CONFIG و window.interfaceConfig انجام شود.

این نوع بارگذاری به‌ویژه برای محیط‌های سفارشی‌سازی‌شده کاربرد دارد. به‌طور معمول، در این فرآیند، فایل interface_config.js به‌صورت پویا بارگذاری می‌شود و تنظیمات آن در زمان اجرای برنامه بر اساس نیازهای خاص هر جلسه تغییر می‌کند.


۲. ایجاد فایل config/interface_config برای بارگذاری پویا

برای پیاده‌سازی بارگذاری پویا، ابتدا باید اطمینان حاصل کنید که فایل interface_config.js به‌صورت قابل دسترسی و قابل ویرایش باشد. معمولاً این فایل در مسیر /usr/share/jitsi-meet/config/ قرار دارد. برای بارگذاری پویا، این فایل باید به‌طور خودکار از سرور یا از یک فایل تنظیمات دیگر خوانده شود.

مثال:

// فایل interface_config.js
window.interfaceConfig = {
    TOOLBAR_BUTTONS: [
        'microphone', 'camera', 'hangup', 'invite', 'mute-everyone',
        'participants-pane', 'profile', 'chat', 'settings', 'videoquality', 
        'filmstrip', 'tileview'
    ],
    SHOW_WATERMARK_FOR_GUESTS: true,
    APP_NAME: "My Custom Jitsi",
    BRAND_WATERMARK_LINK: "https://example.com"
};

۳. تغییر پویا interface_config.js با جاوااسکریپت

برای بارگذاری و ویرایش تنظیمات interface_config.js به‌صورت داینامیک در هنگام بارگذاری، می‌توان از جاوااسکریپت استفاده کرد تا مقادیر جدید از یک فایل یا URL خارجی بارگذاری شود.

در اینجا یک مثال از بارگذاری پویا interface_config.js از یک URL خارجی با استفاده از جاوااسکریپت آورده شده است:

// بارگذاری فایل تنظیمات پویا
function loadDynamicConfig() {
    const script = document.createElement('script');
    script.src = 'https://example.com/config/interface_config.js'; // مسیر فایل تنظیمات
    script.onload = function () {
        // اعمال تنظیمات پس از بارگذاری
        console.log('interface_config.js loaded successfully');
    };
    script.onerror = function () {
        console.error('Failed to load interface_config.js');
    };
    document.head.appendChild(script);
}

// اجرای بارگذاری پویا هنگام بارگذاری صفحه
window.onload = function () {
    loadDynamicConfig();
};

این کد، فایل interface_config.js را از یک URL خارجی بارگذاری می‌کند و تنظیمات آن را در زمان بارگذاری صفحه اعمال می‌کند.


۴. استفاده از window.CONFIG برای پیکربندی پویا

در برخی موارد، ممکن است نیاز باشد که از یک متغیر پیکربندی مشترک برای بارگذاری تنظیمات استفاده کنیم. برای این کار، می‌توانیم از متغیر window.CONFIG در فایل config.js استفاده کنیم تا تنظیمات پویا را به‌طور متمرکز اعمال کنیم.

به‌عنوان مثال:

// config.js
window.CONFIG = {
    hosts: {
        domain: "example.com",
        muc: "conference.example.com"
    },
    deploymentInfo: {
        env: "production"
    }
};

سپس در هنگام بارگذاری interface_config.js می‌توانیم از مقادیر موجود در window.CONFIG برای سفارشی‌سازی رابط کاربری استفاده کنیم.


۵. استفاده از AJAX برای بارگذاری پویا

یکی دیگر از روش‌های متداول برای بارگذاری تنظیمات به‌طور پویا، استفاده از AJAX است. این روش امکان بارگذاری تنظیمات از یک سرور به‌طور دینامیک و بدون نیاز به بارگذاری مجدد صفحه را فراهم می‌کند.

در اینجا یک مثال از نحوه استفاده از AJAX برای بارگذاری پویا تنظیمات از یک سرور آورده شده است:

// استفاده از AJAX برای بارگذاری تنظیمات از یک سرور
function loadConfigFromServer() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://example.com/config/interface_config.json', true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const config = JSON.parse(xhr.responseText);
            applyDynamicConfig(config);
        }
    };
    xhr.send();
}

// اعمال تنظیمات بارگذاری‌شده به رابط کاربری
function applyDynamicConfig(config) {
    window.interfaceConfig = config;
    console.log('Dynamic configuration applied');
}

// اجرای بارگذاری هنگام بارگذاری صفحه
window.onload = function () {
    loadConfigFromServer();
};

در این مثال، از یک فایل JSON به‌عنوان منبع پیکربندی استفاده می‌شود که از طریق AJAX بارگذاری می‌شود. پس از دریافت تنظیمات، تابع applyDynamicConfig تنظیمات را اعمال می‌کند.


جمع‌بندی

بارگذاری پویا فایل interface_config.js می‌تواند به شما این امکان را بدهد که تنظیمات رابط کاربری Jitsi Meet را به‌صورت داینامیک و بدون نیاز به تغییر دستی فایل‌ها مدیریت کنید. این کار می‌تواند با استفاده از روش‌های مختلفی مانند بارگذاری فایل از URL خارجی، استفاده از window.CONFIG یا استفاده از AJAX انجام شود. این نوع بارگذاری پویا به‌ویژه در محیط‌های سفارشی‌سازی‌شده و محیط‌های پر بار می‌تواند به کاهش پیچیدگی و افزایش انعطاف‌پذیری کمک کند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”اعمال تنظیمات متناسب با برند یا شرکت خاص به‌صورت run-time” subtitle=”توضیحات کامل”]در محیط‌های سفارشی‌شده مانند Jitsi Meet، بسیاری از سازمان‌ها و برندها نیاز دارند که تنظیمات رابط کاربری و پیکربندی‌های خاص به‌صورت پویا و در زمان اجرا (run-time) تغییر کند. این به‌ویژه در زمانی که نیاز به تغییر نام برند، رنگ‌ها، لوگوها و ویژگی‌های دیگر به‌طور خودکار برای هر جلسه یا استفاده‌کننده خاص وجود داشته باشد، بسیار مفید است.

در این بخش، نحوه اعمال تنظیمات متناسب با برند یا شرکت خاص به‌صورت پویا در زمان اجرا توضیح داده می‌شود. این فرآیند می‌تواند از طریق بارگذاری پویا و استفاده از جاوااسکریپت برای تغییر تنظیمات مرتبط با برند در زمان لود صفحه انجام شود.


۱. استفاده از تنظیمات پویا برای سفارشی‌سازی برند در Jitsi Meet

در Jitsi Meet، تعدادی از تنظیمات مربوط به برند مانند APP_NAME، BRAND_WATERMARK_LINK و SHOW_WATERMARK_FOR_GUESTS وجود دارند که می‌توانند برای نمایش برند یا شرکت خاص تنظیم شوند. این تنظیمات معمولاً در فایل interface_config.js قرار دارند، اما می‌توان آن‌ها را در زمان اجرا به‌طور پویا تغییر داد.

برای اعمال تنظیمات متناسب با برند یا شرکت خاص، ابتدا باید این اطلاعات را از یک منبع پویا مانند یک API یا یک فایل تنظیمات خارجی بارگذاری کنید. سپس می‌توانید از این تنظیمات برای تغییر ویژگی‌های رابط کاربری استفاده کنید.


۲. اعمال تنظیمات از API خارجی

فرض کنید که تنظیمات برند شما در یک API خارجی قرار دارد که اطلاعات برند مانند نام برند، لینک watermark، و رنگ‌ها را ارائه می‌دهد. می‌توان از این اطلاعات برای تغییر تنظیمات Jitsi به‌صورت پویا استفاده کرد.

در اینجا یک مثال از نحوه بارگذاری تنظیمات برند از یک API آورده شده است:

// تابع بارگذاری تنظیمات برند از API
function loadBrandSettings() {
    fetch('https://example.com/api/brand-settings')
        .then(response => response.json())
        .then(data => {
            // اعمال تنظیمات برند در رابط کاربری
            updateBrandSettings(data);
        })
        .catch(error => {
            console.error('Error loading brand settings:', error);
        });
}

// تابع برای اعمال تنظیمات برند به interface_config.js
function updateBrandSettings(brandSettings) {
    // تغییر نام اپلیکیشن
    window.interfaceConfig.APP_NAME = brandSettings.appName;

    // تغییر لینک watermark
    window.interfaceConfig.BRAND_WATERMARK_LINK = brandSettings.watermarkLink;

    // تعیین اینکه watermark برای مهمانان نمایش داده شود یا نه
    window.interfaceConfig.SHOW_WATERMARK_FOR_GUESTS = brandSettings.showWatermarkForGuests;

    // تغییر رنگ‌ها و سایر تنظیمات برند
    applyBrandColors(brandSettings.colors);
}

// اعمال رنگ‌های برند
function applyBrandColors(colors) {
    document.body.style.setProperty('--primary-color', colors.primary);
    document.body.style.setProperty('--secondary-color', colors.secondary);
}

// بارگذاری تنظیمات برند هنگام بارگذاری صفحه
window.onload = function () {
    loadBrandSettings();
};

در این مثال، از تابع loadBrandSettings برای بارگذاری تنظیمات برند از یک API استفاده می‌شود. پس از بارگذاری تنظیمات، تابع updateBrandSettings برای اعمال این تنظیمات به interface_config.js استفاده می‌شود. در اینجا از تابع applyBrandColors برای اعمال رنگ‌های برند نیز استفاده شده است.


۳. بارگذاری تنظیمات از یک فایل JSON

اگر تنظیمات برند در یک فایل JSON محلی یا روی سرور قرار دارد، می‌توان این فایل را نیز به‌طور پویا بارگذاری و تنظیمات آن را اعمال کرد.

مثال:

// تابع بارگذاری تنظیمات برند از یک فایل JSON
function loadBrandConfig() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/config/brand-settings.json', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            const brandSettings = JSON.parse(xhr.responseText);
            updateBrandSettings(brandSettings);
        } else {
            console.error('Failed to load brand settings');
        }
    };
    xhr.send();
}

// بارگذاری تنظیمات برند هنگام بارگذاری صفحه
window.onload = function () {
    loadBrandConfig();
};

در اینجا فایل brand-settings.json شامل اطلاعات برند مانند نام برند، لینک watermark، رنگ‌ها و سایر تنظیمات برند است. با استفاده از این روش، تنظیمات به‌صورت پویا از یک فایل JSON خوانده می‌شود و بلافاصله در رابط کاربری اعمال می‌شود.


۴. اعمال تنظیمات برای هر کاربر یا جلسه

اگر نیاز به اعمال تنظیمات برند به‌طور خاص برای هر کاربر یا هر جلسه Jitsi دارید، می‌توانید از شناسه‌های کاربری یا شناسه‌های جلسه استفاده کنید تا تنظیمات خاص برای هر جلسه یا کاربر اعمال شود.

برای این کار می‌توان از متغیرهای موجود در URL یا اطلاعات کاربر استفاده کرد. به‌عنوان مثال، فرض کنید که اطلاعات برند به‌طور خاص برای هر جلسه از URL ارسال می‌شود:

// خواندن اطلاعات برند از URL
function getBrandSettingsFromUrl() {
    const urlParams = new URLSearchParams(window.location.search);
    const brandId = urlParams.get('brandId');
    
    // بارگذاری تنظیمات برند خاص با استفاده از brandId
    fetch(`https://example.com/api/brand-settings/${brandId}`)
        .then(response => response.json())
        .then(data => {
            updateBrandSettings(data);
        })
        .catch(error => {
            console.error('Error loading brand settings for session:', error);
        });
}

// بارگذاری تنظیمات برند برای هر جلسه
window.onload = function () {
    getBrandSettingsFromUrl();
};

در این مثال، با استفاده از متغیر brandId که از URL استخراج شده، تنظیمات برند خاص برای هر جلسه Jitsi بارگذاری و اعمال می‌شود.


جمع‌بندی

اعمال تنظیمات متناسب با برند یا شرکت خاص به‌صورت پویا و در زمان اجرا (run-time) در Jitsi Meet می‌تواند از طریق بارگذاری تنظیمات از منابع خارجی مانند API یا فایل JSON انجام شود. این تنظیمات شامل ویژگی‌هایی مانند نام برند، لینک watermark، رنگ‌ها و ویژگی‌های سفارشی رابط کاربری هستند. استفاده از روش‌هایی مانند بارگذاری از URL یا شناسایی هر کاربر یا جلسه می‌تواند به شما این امکان را بدهد که تنظیمات خاص برند یا شرکت خود را به‌طور داینامیک و بدون نیاز به تغییرات دستی اعمال کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”معرفی ساختار Jitsi-as-a-Service” subtitle=”توضیحات کامل”]Jitsi-as-a-Service (JaaS) یک راه‌حل مبتنی بر سرویس است که به کاربران این امکان را می‌دهد تا به راحتی از قابلیت‌های Jitsi Meet استفاده کنند بدون آنکه نیازی به پیکربندی و نگهداری زیرساخت‌های خود داشته باشند. JaaS یک پلتفرم ابری برای انجام جلسات و کنفرانس‌های ویدیویی فراهم می‌آورد که بر اساس Jitsi Meet ساخته شده و امکانات پیشرفته‌ای مانند مقیاس‌پذیری، قابلیت اطمینان بالا و پشتیبانی از موارد مختلف را به‌صورت سرویس ارائه می‌دهد.

این سرویس به‌ویژه برای کسانی که نمی‌خواهند بر پیکربندی پیچیده سرور و نگهداری سیستم‌های ویدیویی تمرکز کنند، مناسب است. در ادامه به بررسی اجزای مختلف ساختار Jitsi-as-a-Service و نحوه عملکرد آن پرداخته می‌شود.


اجزای اصلی ساختار Jitsi-as-a-Service

  1. پشتیبانی از مقیاس‌پذیری و قابلیت‌های ابری: Jitsi-as-a-Service به‌طور کامل بر پایه ابر (cloud-based) طراحی شده است که به این معنی است که شما می‌توانید بدون نگرانی در مورد محدودیت‌های سخت‌افزاری یا مدیریت منابع، جلسات خود را مقیاس‌پذیر کنید. این قابلیت برای سازمان‌ها و کسب‌وکارهایی که نیاز به انعطاف‌پذیری دارند بسیار مهم است.
  2. API و SDK برای ادغام آسان: Jitsi-as-a-Service شامل APIها و SDKهایی است که به توسعه‌دهندگان این امکان را می‌دهد که ویژگی‌های کنفرانس ویدیویی را به‌راحتی در اپلیکیشن‌های خود ادغام کنند. این ابزارها به شما این امکان را می‌دهند که جلسات ویدیویی را در پلتفرم‌های مختلف (مانند وب، موبایل و دسکتاپ) به راحتی پیاده‌سازی کنید.
  3. میزبانی و امنیت پیشرفته: در Jitsi-as-a-Service، تمامی سرورها و زیرساخت‌ها توسط تیم‌های متخصص در جیتسی و شرکت‌های میزبان ابری مدیریت می‌شوند. این به این معناست که سازمان‌ها می‌توانند بدون نگرانی از پیکربندی امنیتی و مدیریت سرورهای خود، از امنیت پیشرفته و به‌روز بهره‌مند شوند.
  4. پشتیبانی از مقیاس‌پذیری خودکار: Jitsi-as-a-Service می‌تواند به‌طور خودکار منابع را براساس تقاضای جلسه (مثلاً تعداد شرکت‌کنندگان در جلسه) مقیاس‌بندی کند. این ویژگی به شما این امکان را می‌دهد که عملکرد بهینه را در هنگام نیاز داشته باشید و از اتلاف منابع جلوگیری کنید.
  5. پشتیبانی از قابلیت‌های اضافی مانند رکورد و پخش زنده: Jitsi-as-a-Service قابلیت‌های پیشرفته‌ای مانند ضبط جلسه و پخش زنده را ارائه می‌دهد که برای سازمان‌ها و کاربردهای تجاری مفید است. شما می‌توانید این ویژگی‌ها را با استفاده از تنظیمات موجود در API یا از طریق پنل مدیریتی کنترل کنید.
  6. قابلیت نظارت و گزارش‌دهی: با استفاده از Jitsi-as-a-Service، شما قادر به نظارت بر جلسات در حال اجرا خواهید بود. این ویژگی به‌ویژه برای مدیران و اپراتورهای پشتیبانی مفید است که نیاز دارند اطلاعات دقیق درباره استفاده از سیستم و عملکرد آن داشته باشند.

نحوه استفاده از Jitsi-as-a-Service

  1. ثبت‌نام در Jitsi-as-a-Service: برای استفاده از Jitsi-as-a-Service، ابتدا باید در سرویس ثبت‌نام کنید. این فرآیند معمولاً شامل دریافت یک API Key است که برای دسترسی به قابلیت‌های سرویس مورد نیاز است.
  2. تنظیمات و سفارشی‌سازی: پس از ثبت‌نام و دریافت دسترسی، شما می‌توانید تنظیمات پیشرفته‌ای مانند نام برند، لوگو، تنظیمات رابط کاربری و سایر ویژگی‌ها را بر اساس نیاز خود سفارشی‌سازی کنید. این کار از طریق داشبورد مدیریتی یا APIها انجام می‌شود.
  3. ادغام API و SDK: برای استفاده از قابلیت‌های Jitsi-as-a-Service در اپلیکیشن‌های خود، می‌توانید از APIها و SDKهای ارائه شده استفاده کنید. این ابزارها به شما این امکان را می‌دهند که جلسات ویدیویی را به‌راحتی در برنامه‌های تحت وب یا موبایل خود پیاده‌سازی کنید.
  4. پیکربندی ویژگی‌های اضافی: شما می‌توانید ویژگی‌های اضافی مانند ضبط جلسه، پخش زنده، کنترل کیفیت ویدیو و سایر تنظیمات پیشرفته را از طریق API یا داشبورد مدیریتی پیکربندی کنید.

مزایای Jitsi-as-a-Service

  • سادگی استفاده: بدون نیاز به پیکربندی پیچیده، کاربران می‌توانند به‌راحتی جلسات ویدیویی را برگزار کنند.
  • مقیاس‌پذیری: می‌توانید جلسات خود را براساس نیاز مقیاس‌بندی کنید.
  • امنیت بالا: تمامی تنظیمات امنیتی به‌صورت پیش‌فرض انجام می‌شود و شما نیازی به مدیریت سرور و امنیت خود ندارید.
  • افزایش بهره‌وری: با استفاده از API و SDKهای موجود، می‌توانید جلسات ویدیویی را به‌راحتی در سیستم‌های دیگر ادغام کنید.
  • پشتیبانی از قابلیت‌های اضافی: ویژگی‌هایی مانند ضبط، پخش زنده و نظارت بر عملکرد به شما کمک می‌کنند تا مدیریت بهتری بر جلسات خود داشته باشید.

جمع‌بندی

Jitsi-as-a-Service یک پلتفرم بسیار مفید و مقیاس‌پذیر است که به کاربران این امکان را می‌دهد که جلسات ویدیویی با کیفیت بالا را بدون نگرانی از پیکربندی و نگهداری سرورها انجام دهند. این سرویس از طریق APIها و SDKها به توسعه‌دهندگان این امکان را می‌دهد که جلسات ویدیویی را به‌راحتی در اپلیکیشن‌های خود ادغام کنند و از ویژگی‌های پیشرفته‌ای مانند ضبط، پخش زنده و نظارت بر عملکرد بهره‌مند شوند. با استفاده از این سرویس، سازمان‌ها می‌توانند بر عملکرد و امنیت سیستم‌های خود نظارت کنند و به‌راحتی از قابلیت‌های پیشرفته‌ای مانند مقیاس‌پذیری خودکار بهره‌برداری کنند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 10. ابزارها و روش‌های تست رابط کاربری”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استفاده از Storybook برای تست Componentها” subtitle=”توضیحات کامل”]Storybook یک ابزار منبع باز است که به شما این امکان را می‌دهد که کامپوننت‌های رابط کاربری (UI) خود را به‌صورت مستقل و در یک محیط جداگانه تست، توسعه و مستندسازی کنید. این ابزار به‌ویژه برای توسعه‌دهندگان و طراحان بسیار مفید است زیرا می‌توانند بدون نیاز به اجرای پروژه‌های کامل، هر کامپوننت را به‌طور جداگانه مشاهده و آزمایش کنند. در این بخش، به بررسی نحوه استفاده از Storybook برای تست کامپوننت‌ها در Jitsi Meet و سایر پروژه‌ها خواهیم پرداخت.


اجزای اصلی Storybook

  1. کامپوننت‌ها:
    در Storybook، هر کامپوننت UI به‌صورت جداگانه نمایش داده می‌شود. شما می‌توانید هر تغییراتی که در یک کامپوننت ایجاد می‌کنید، به‌راحتی مشاهده و تست کنید. این امر به‌ویژه در مواقعی که چندین نسخه از یک کامپوننت وجود دارد، مفید است.
  2. داستان‌ها (Stories):
    داستان‌ها نمایشی از یک کامپوننت در حالت‌های مختلف هستند. به‌طور معمول، هر کامپوننت در Storybook با چندین وضعیت مختلف مانند حالت‌های مختلف ورودی، رنگ‌ها یا اندازه‌ها ارائه می‌شود. داستان‌ها به شما این امکان را می‌دهند که رفتار یک کامپوننت را در شرایط مختلف تست کنید.
  3. پلاگین‌ها:
    Storybook از پلاگین‌هایی پشتیبانی می‌کند که می‌توانید برای افزودن قابلیت‌های بیشتر به محیط تست خود از آن‌ها استفاده کنید. پلاگین‌ها شامل ابزارهایی برای تست‌های بصری، دسترسی، و نمایش مستندات هستند.
  4. کنترل‌کننده‌ها (Controls):
    این ویژگی به شما این امکان را می‌دهد که ورودی‌های کامپوننت‌ها را به‌صورت تعاملی تغییر دهید و مشاهده کنید که چگونه کامپوننت‌ها در پاسخ به تغییرات ورودی رفتار می‌کنند.

نحوه نصب و راه‌اندازی Storybook در پروژه Jitsi Meet

برای استفاده از Storybook در پروژه Jitsi Meet یا هر پروژه React دیگری، ابتدا باید Storybook را نصب و راه‌اندازی کنید. در اینجا مراحل راه‌اندازی به‌صورت گام‌به‌گام توضیح داده شده است:

  1. نصب Storybook: ابتدا باید Storybook را به پروژه خود اضافه کنید. برای این کار از دستور زیر استفاده کنید:
    npx sb init
    

    این دستور یک پیکربندی پایه‌ای برای Storybook ایجاد کرده و dependencies لازم را نصب می‌کند.

  2. افزودن داستان‌ها (Stories): پس از نصب Storybook، باید فایل‌های stories را ایجاد کنید. برای هر کامپوننتی که می‌خواهید در Storybook مشاهده کنید، یک فایل داستان (مثلاً Button.stories.js) بسازید و کدهای زیر را در آن وارد کنید:
    import React from 'react';
    import { Button } from './Button';
    
    export default {
      title: 'Example/Button',
      component: Button,
    };
    
    const Template = (args) => <Button {...args} />;
    
    export const Default = Template.bind({});
    Default.args = {
      label: 'Click me',
    };
    
    export const Disabled = Template.bind({});
    Disabled.args = {
      label: 'Click me',
      disabled: true,
    };
    

    در اینجا، Button.stories.js دو حالت مختلف از کامپوننت Button را نمایش می‌دهد: حالت پیش‌فرض و حالت غیرفعال (disabled).

  3. راه‌اندازی Storybook: بعد از اضافه کردن فایل‌های داستان، می‌توانید Storybook را با دستور زیر راه‌اندازی کنید:
    npm run storybook
    

    این دستور یک سرور محلی راه‌اندازی می‌کند که می‌توانید کامپوننت‌های خود را به‌صورت تعاملی مشاهده کنید.

  4. تست کامپوننت‌ها: پس از راه‌اندازی Storybook، می‌توانید کامپوننت‌ها را در محیط وب مشاهده کنید. برای هر کامپوننتی که ساخته‌اید، Storybook به شما نمایش‌هایی از آن‌ها را در شرایط مختلف نشان می‌دهد. شما می‌توانید کامپوننت‌ها را تغییر داده و نتایج آن‌ها را فوراً ببینید.

استفاده از Storybook برای تست ویژگی‌های مختلف کامپوننت‌ها

  1. تست تعاملات (Interactions): با استفاده از Storybook، می‌توانید تعاملات کامپوننت‌ها را تست کنید. برای مثال، اگر یک دکمه دارید که هنگام کلیک کردن کاری انجام می‌دهد، می‌توانید بررسی کنید که آیا دکمه به‌درستی واکنش نشان می‌دهد.مثال:
    import { action } from '@storybook/addon-actions';
    export const WithAction = Template.bind({});
    WithAction.args = {
      label: 'Click me',
      onClick: action('button-click'),
    };
    

    در اینجا، با استفاده از addon-actions، هر بار که دکمه کلیک می‌شود، یک عمل (action) ثبت می‌شود که می‌توانید آن را در کنسول مشاهده کنید.

  2. تست تغییرات ورودی (Controls): یکی از ویژگی‌های مفید Storybook، کنترل‌های ورودی (Controls) است که به شما این امکان را می‌دهد تا مقادیر ورودی کامپوننت‌ها را تغییر داده و به‌طور زنده مشاهده کنید که چگونه این تغییرات بر ظاهر و رفتار کامپوننت تأثیر می‌گذارد.برای استفاده از کنترل‌ها، کافی است از کد زیر استفاده کنید:
    export const DynamicLabel = Template.bind({});
    DynamicLabel.args = {
      label: 'Dynamic Button Label',
    };
    DynamicLabel.argTypes = {
      label: { control: 'text' },
    };
    

    در این مثال، می‌توانید به‌طور تعاملی متن دکمه را تغییر دهید و تغییرات را در Storybook مشاهده کنید.

  3. تست پاسخگویی (Responsiveness): یکی از نکات مهم در تست کامپوننت‌ها، بررسی واکنش‌پذیری (Responsiveness) آن‌ها است. شما می‌توانید Storybook را به‌گونه‌ای پیکربندی کنید که کامپوننت‌ها را در اندازه‌های مختلف صفحه‌نمایش تست کنید.برای این کار، می‌توانید از Addon @storybook/addon-viewport استفاده کنید. ابتدا آن را نصب کنید:
    npm install @storybook/addon-viewport
    

    سپس در Storybook پیکربندی کنید:

    import { withViewport } from '@storybook/addon-viewport';
    
    export default {
      title: 'Example/Button',
      decorators: [withViewport],
    };
    

    حالا می‌توانید تست کامپوننت‌ها را در اندازه‌های مختلف صفحه‌نمایش انجام دهید.


جمع‌بندی

استفاده از Storybook برای تست و مستندسازی کامپوننت‌های رابط کاربری یک روش بسیار مفید و کارآمد است که به توسعه‌دهندگان و طراحان این امکان را می‌دهد تا کامپوننت‌ها را در شرایط مختلف تست کرده و از عملکرد صحیح آن‌ها مطمئن شوند. این ابزار به‌ویژه در پروژه‌های بزرگ مانند Jitsi Meet، که شامل تعداد زیادی کامپوننت است، بسیار مفید است. با نصب و پیکربندی Storybook، می‌توانید کامپوننت‌ها را به‌صورت جداگانه تست کرده و تعاملات، ورودی‌ها، پاسخگویی و ویژگی‌های مختلف آن‌ها را بررسی کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تست تعاملی UI با Cypress یا Puppeteer” subtitle=”توضیحات کامل”]برای تست رابط کاربری (UI) وب‌سایت‌ها و اپلیکیشن‌ها، ابزارهای مختلفی وجود دارند که به شما کمک می‌کنند تا تعاملات کاربر را شبیه‌سازی کرده و عملکرد UI را ارزیابی کنید. Cypress و Puppeteer از جمله ابزارهای محبوب برای این کار هستند. در این بخش به معرفی و نحوه استفاده از این ابزارها برای انجام تست‌های تعاملی UI خواهیم پرداخت.


معرفی Cypress

Cypress یک ابزار تست خودکار برای برنامه‌های وب است که به‌طور خاص برای تست‌های End-to-End (E2E) طراحی شده است. Cypress به‌راحتی می‌تواند تعاملات کاربر را شبیه‌سازی کند، مانند کلیک روی دکمه‌ها، پر کردن فرم‌ها، و پیمایش در صفحات. این ابزار به‌ویژه برای توسعه‌دهندگان و تیم‌های QA که نیاز به تست‌های سریع و دقیق دارند، مناسب است.

مزایای Cypress:

  • تست‌های خودکار سریع: Cypress به‌طور مستقیم در داخل مرورگر اجرا می‌شود، به همین دلیل تست‌ها سریع‌تر از ابزارهای مشابه مانند Selenium هستند.
  • دستورات آسان و شبیه‌سازی تعاملات کاربر: Cypress برای شبیه‌سازی کلیک‌ها، تایپ کردن، حرکت کردن در صفحات و دیگر تعاملات طراحی شده است.
  • گزارش‌گیری و debugging دقیق: این ابزار به شما این امکان را می‌دهد که گزارش‌های دقیق و مفصلی از تست‌ها دریافت کنید و در صورت بروز خطا، مستقیماً از داخل ابزار، اشکال‌زدایی کنید.
  • آسانی در نصب و پیکربندی: Cypress به‌راحتی در پروژه‌ها نصب و تنظیم می‌شود و نیاز به تنظیمات پیچیده ندارد.

نحوه استفاده از Cypress برای تست تعاملی UI

  1. نصب Cypress:ابتدا باید Cypress را به پروژه خود اضافه کنید. برای این کار، دستور زیر را در ترمینال وارد کنید:
    npm install cypress --save-dev
    
  2. اجرای Cypress:پس از نصب، می‌توانید Cypress را با دستور زیر اجرا کنید:
    npx cypress open
    

    این دستور یک رابط گرافیکی باز می‌کند که به شما این امکان را می‌دهد که تست‌های خود را مدیریت کرده و مشاهده کنید.

  3. نوشتن تست‌ها:برای نوشتن تست‌ها، می‌توانید فایل‌های تست را در دایرکتوری cypress/integration اضافه کنید. یک نمونه تست برای تست ورود به سیستم به شکل زیر خواهد بود:
    describe('Login Test', () => {
      it('should login successfully', () => {
        cy.visit('https://yourapp.com/login');
        cy.get('input[name=username]').type('testuser');
        cy.get('input[name=password]').type('password123');
        cy.get('button[type=submit]').click();
        cy.url().should('include', '/dashboard');
      });
    });
    

    در این مثال، تست ورود به سیستم با شبیه‌سازی تایپ در فیلدهای ورودی و کلیک روی دکمه ورود انجام می‌شود.

  4. اجرای تست‌ها:پس از نوشتن تست‌ها، می‌توانید آن‌ها را از داخل رابط Cypress اجرا کنید و نتایج آن‌ها را مشاهده کنید.

معرفی Puppeteer

Puppeteer یک کتابخانه Node.js است که برای کنترل مرورگر Chrome یا Chromium طراحی شده است. با استفاده از Puppeteer می‌توانید تعاملات کاربر را شبیه‌سازی کنید، صفحات را به‌طور خودکار پیمایش کنید، داده‌ها را استخراج کنید و حتی تصاویر اسکرین‌شات بگیرید. Puppeteer معمولاً برای تست‌های E2E، استخراج داده‌های وب (web scraping) و گرفتن اسکرین‌شات‌های خودکار از صفحات استفاده می‌شود.

مزایای Puppeteer:

  • کنترل دقیق بر مرورگر: Puppeteer به شما این امکان را می‌دهد که مرورگر را به‌طور کامل کنترل کنید، از جمله کلیک کردن، تایپ کردن، پیمایش و گرفتن اسکرین‌شات.
  • سفارشی‌سازی بیشتر: از آنجایی که Puppeteer به‌صورت کد نوشته شده و به‌طور مستقیم با مرورگر کار می‌کند، می‌توانید رفتارهای پیچیده‌تری را شبیه‌سازی کنید.
  • قابلیت تست‌گیری از صفحات کامل: می‌توانید به‌طور خودکار صفحات را بارگذاری کرده و اسکرین‌شات بگیرید یا داده‌ها را استخراج کنید.

نحوه استفاده از Puppeteer برای تست تعاملی UI

  1. نصب Puppeteer:برای نصب Puppeteer در پروژه خود، دستور زیر را در ترمینال وارد کنید:
    npm install puppeteer --save-dev
    
  2. نوشتن تست‌ها:در Puppeteer، می‌توانید تست‌های خود را به‌طور کامل در فایل‌های جاوااسکریپت بنویسید. یک تست ساده برای شبیه‌سازی ورود به سیستم به شکل زیر خواهد بود:
    const puppeteer = require('puppeteer');
    
    describe('Login Test', () => {
      let browser;
      let page;
    
      beforeAll(async () => {
        browser = await puppeteer.launch();
        page = await browser.newPage();
      });
    
      afterAll(async () => {
        await browser.close();
      });
    
      it('should login successfully', async () => {
        await page.goto('https://yourapp.com/login');
        await page.type('input[name=username]', 'testuser');
        await page.type('input[name=password]', 'password123');
        await page.click('button[type=submit]');
        await page.waitForNavigation();
        expect(page.url()).toContain('/dashboard');
      });
    });
    

    در این مثال، ما ابتدا مرورگر را باز کرده و سپس یک صفحه جدید ایجاد می‌کنیم. سپس فرم ورود را پر کرده و بر روی دکمه ارسال کلیک می‌کنیم. در نهایت، بررسی می‌کنیم که آیا به صفحه داشبورد هدایت شده‌ایم یا نه.

  3. اجرای تست‌ها:پس از نوشتن تست‌ها، می‌توانید آن‌ها را با دستور زیر اجرا کنید:
    node test.js
    

    این دستور تست‌ها را اجرا کرده و نتایج را در کنسول نمایش می‌دهد.


جمع‌بندی

هم Cypress و هم Puppeteer ابزارهای قدرتمندی برای انجام تست‌های تعاملی UI هستند، اما هر کدام ویژگی‌ها و مزایای خاص خود را دارند:

  • Cypress مناسب برای تست‌های خودکار سریع و به‌ویژه برای پروژه‌هایی است که نیاز به تست‌های سریع و دقیق در مرورگر دارند.
  • Puppeteer برای تست‌های پیچیده‌تر و سفارشی‌تر مناسب است که نیاز به کنترل دقیق بر مرورگر یا استخراج داده‌ها دارند.

با استفاده از این ابزارها، می‌توانید به‌راحتی تعاملات کاربر را شبیه‌سازی کنید و عملکرد UI اپلیکیشن خود را بررسی و ارزیابی کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تست ریسپانسیو با ابزارهای DevTools و ابزارهای خودکار” subtitle=”توضیحات کامل”]تست ریسپانسیو (Responsive Testing) به بررسی رفتار و نمایش صفحات وب در اندازه‌های مختلف صفحه‌نمایش و دستگاه‌ها می‌پردازد. هدف این تست، اطمینان از نمایش صحیح محتوای وب‌سایت یا اپلیکیشن در دستگاه‌های مختلف از جمله گوشی‌های هوشمند، تبلت‌ها و دسکتاپ‌ها است. برای انجام این تست، ابزارهای مختلفی مانند DevTools و ابزارهای خودکار وجود دارند که هرکدام ویژگی‌ها و مزایای خاص خود را دارند. در این بخش، به معرفی این ابزارها و نحوه استفاده از آن‌ها برای تست ریسپانسیو خواهیم پرداخت.


تست ریسپانسیو با DevTools

DevTools یک مجموعه از ابزارهای داخلی مرورگر است که به توسعه‌دهندگان این امکان را می‌دهد که به‌صورت مستقیم کد HTML، CSS، JavaScript و دیگر بخش‌های سایت را بررسی و اصلاح کنند. این ابزارها در تمام مرورگرهای اصلی مانند Chrome، Firefox، Edge و Safari در دسترس هستند و برای تست ریسپانسیو بسیار مفید هستند.

نحوه استفاده از DevTools برای تست ریسپانسیو

  1. باز کردن DevTools: برای باز کردن DevTools در Chrome یا دیگر مرورگرهای مشابه، کافی است کلیدهای F12 یا Ctrl + Shift + I (در ویندوز) و یا Cmd + Option + I (در مک) را فشار دهید.
  2. ورود به حالت ریسپانسیو: پس از باز کردن DevTools، می‌توانید وارد حالت ریسپانسیو شوید. در DevTools، بخش Responsive Mode به شما این امکان را می‌دهد که صفحه وب را در اندازه‌های مختلف شبیه‌سازی کنید.برای این کار، از گزینه Toggle Device Toolbar که نماد یک گوشی و تبلت است، استفاده کنید. این گزینه در گوشه بالای سمت چپ DevTools قرار دارد.
  3. انتخاب دستگاه و اندازه صفحه: بعد از ورود به حالت ریسپانسیو، شما می‌توانید از میان پیش‌فرض‌های مختلف دستگاه‌ها مانند iPhone، iPad، Galaxy S5 و … یکی را انتخاب کنید. همچنین می‌توانید ابعاد صفحه را به‌صورت دستی وارد کنید تا سایز دلخواه خود را برای آزمایش تنظیم کنید.
  4. تست تعاملات و مشاهده رفتار: در حالت ریسپانسیو، می‌توانید تعاملات مختلفی مانند اسکرول کردن، کلیک کردن، تایپ کردن و تغییر اندازه پنجره مرورگر را شبیه‌سازی کنید تا مطمئن شوید که رابط کاربری در ابعاد مختلف به‌درستی نمایش داده می‌شود.
  5. بررسی مقیاس تصاویر و محتوای صفحه: DevTools به شما این امکان را می‌دهد که بررسی کنید آیا تصاویر و محتوا به‌درستی در اندازه‌های مختلف صفحه مقیاس می‌شوند و به‌درستی در صفحه جا می‌شوند یا خیر.

تست ریسپانسیو با ابزارهای خودکار

ابزارهای خودکار برای تست ریسپانسیو طراحی شده‌اند تا بتوانند تست‌ها را به‌صورت خودکار و در ابعاد و دستگاه‌های مختلف انجام دهند. این ابزارها می‌توانند تست‌های دقیق‌تری را انجام دهند و حتی برای سایت‌هایی که چندین صفحه دارند، فرایند تست را سریع‌تر کنند.

1. Selenium WebDriver

Selenium یک ابزار محبوب برای تست خودکار است که امکان شبیه‌سازی تعاملات کاربر را در مرورگرهای مختلف فراهم می‌کند. با استفاده از Selenium می‌توانید ابعاد مختلف صفحه را شبیه‌سازی کنید و تعاملات کاربران را تست کنید.

نحوه استفاده از Selenium برای تست ریسپانسیو:
  1. نصب Selenium: ابتدا باید Selenium WebDriver را نصب کنید. برای نصب آن در پروژه Node.js می‌توانید از دستور زیر استفاده کنید:
    npm install selenium-webdriver
    
  2. نوشتن اسکریپت تست: در اسکریپت‌های Selenium، می‌توانید اندازه پنجره مرورگر را تغییر دهید و صفحه را در اندازه‌های مختلف تست کنید. یک نمونه کد برای تغییر اندازه صفحه در Selenium به شکل زیر است:
    const {Builder} = require('selenium-webdriver');
    
    (async function test() {
      let driver = await new Builder().forBrowser('chrome').build();
      
      try {
        await driver.get('https://yourwebsite.com');
        
        // تغییر اندازه پنجره برای تست ریسپانسیو
        await driver.manage().window().setRect({ width: 375, height: 667 });
        // این اندازه معادل صفحه یک گوشی موبایل است.
        
        // انجام سایر تست‌ها...
      } finally {
        await driver.quit();
      }
    })();
    
  3. اجرای تست: شما می‌توانید این اسکریپت‌ها را برای شبیه‌سازی دستگاه‌های مختلف اجرا کنید و از طریق آن‌ها بررسی کنید که UI به‌درستی بارگذاری و عمل می‌کند.

2. BrowserStack

BrowserStack یک پلتفرم تست ابری است که به شما این امکان را می‌دهد که سایت خود را بر روی مرورگرها و دستگاه‌های مختلف آزمایش کنید. این ابزار به‌ویژه برای تست ریسپانسیو مفید است، چرا که شما می‌توانید سایت خود را بر روی صدها دستگاه و مرورگر واقعی آزمایش کنید.

نحوه استفاده از BrowserStack:
  1. ثبت‌نام و ورود به پلتفرم: ابتدا به وب‌سایت BrowserStack بروید و یک حساب کاربری ایجاد کنید.
  2. انتخاب دستگاه و مرورگر: پس از ورود، شما می‌توانید از بین هزاران دستگاه موبایل، تبلت و دسکتاپ، انتخاب کنید. سپس می‌توانید مرورگر مورد نظر خود را انتخاب کنید.
  3. آزمایش ریسپانسیو: پس از انتخاب دستگاه و مرورگر، می‌توانید سایت خود را مشاهده کرده و تست‌های مختلف ریسپانسیو را انجام دهید. این ابزار همچنین به شما امکان می‌دهد که تست‌های خودکار برای شبیه‌سازی تعاملات کاربران بنویسید.

3. Lighthouse

Lighthouse یک ابزار متن‌باز است که توسط Google توسعه یافته و برای تست عملکرد، دسترسی‌پذیری، SEO و ریسپانسیو صفحات وب استفاده می‌شود. Lighthouse می‌تواند یک گزارش کامل از وضعیت ریسپانسیو صفحه ایجاد کند.

نحوه استفاده از Lighthouse:
  1. استفاده از Lighthouse در Chrome DevTools: برای استفاده از Lighthouse، کافی است از تب Lighthouse در DevTools استفاده کنید.
    • DevTools را باز کرده و وارد تب Lighthouse شوید.
    • گزینه Responsive را انتخاب کنید و گزارشی کامل از عملکرد ریسپانسیو صفحه دریافت کنید.
  2. تولید گزارش: پس از انجام تست، Lighthouse گزارشی دقیق از عملکرد ریسپانسیو و عملکرد صفحه در دستگاه‌های مختلف ایجاد می‌کند.

جمع‌بندی

تست ریسپانسیو بخش حیاتی فرآیند توسعه وب است و ابزارهای مختلفی برای انجام این تست‌ها وجود دارد. DevTools ابزار ساده و مفیدی است که برای شبیه‌سازی نمایش در دستگاه‌های مختلف به‌صورت دستی استفاده می‌شود. از سوی دیگر، ابزارهای خودکار مانند Selenium و BrowserStack برای انجام تست‌های گسترده و خودکار مفید هستند. Lighthouse نیز می‌تواند گزارشی دقیق و جامع از وضعیت ریسپانسیو یک صفحه ارائه دهد.

تست ریسپانسیو باید بخشی از فرآیند توسعه و نگهداری هر وب‌سایت یا اپلیکیشن باشد تا از نمایش صحیح آن در دستگاه‌های مختلف اطمینان حاصل کنید.

 [/cdb_course_lesson][/cdb_course_lessons]

[cdb_course_lessons title=”بخش 4. توسعه و سفارشی‌سازی ویژگی‌ها”][cdb_course_lesson title=”فصل 1. سفارشی‌سازی ویژگی‌های پیش‌فرض Jitsi”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تغییرات در ویژگی‌های اصلی Jitsi مانند اشتراک‌گذاری صفحه، صوت و ویدئو” subtitle=”توضیحات کامل”]Jitsi Meet یک پلتفرم قدرتمند برای برگزاری جلسات آنلاین است که به کاربران اجازه می‌دهد تا به‌صورت رایگان و بدون نیاز به نصب نرم‌افزار خاص، به‌طور مستقیم از طریق مرورگر با یکدیگر ارتباط برقرار کنند. این پلتفرم از ویژگی‌هایی مانند اشتراک‌گذاری صفحه، مکالمات صوتی و ویدیویی، و چت گروهی پشتیبانی می‌کند. این قسمت به بررسی نحوه تغییرات و سفارشی‌سازی این ویژگی‌های اصلی می‌پردازد.


1. اشتراک‌گذاری صفحه (Screen Sharing)

اشتراک‌گذاری صفحه یکی از ویژگی‌های اصلی در جلسات آنلاین است که به کاربران امکان می‌دهد تا محتوای صفحه‌ی خود را به دیگران نشان دهند. این ویژگی در Jitsi به‌صورت پیش‌فرض فعال است، اما ممکن است بخواهید آن را غیرفعال کنید یا برای شخصی‌سازی آن تنظیماتی را تغییر دهید.

برای تغییرات در این ویژگی، می‌توانید از فایل‌های پیکربندی مانند interface_config.js و config.js استفاده کنید.

غیرفعال کردن اشتراک‌گذاری صفحه:

برای غیرفعال کردن این ویژگی در Jitsi Meet، می‌توانید متغیر مربوط به TOOLBAR_BUTTONS را در فایل interface_config.js ویرایش کنید. به‌طور پیش‌فرض، دکمه اشتراک‌گذاری صفحه در نوار ابزار نمایش داده می‌شود.

  • مسیر فایل: /usr/share/jitsi-meet/interface_config.js

برای غیرفعال کردن اشتراک‌گذاری صفحه، می‌توانید کد زیر را به‌صورت زیر تغییر دهید:

TOOLBAR_BUTTONS: [
    'microphone',
    'camera',
    'hangup',
    'invite',
    'mute-everyone',
    'participants-pane',
    'profile',
    'chat',
    'settings',
    'videoquality',
    'filmstrip',
    'tileview'
]

در اینجا، فقط دکمه‌هایی که می‌خواهید نمایش داده شوند باقی خواهند ماند. برای مثال، screen-sharing حذف شده است.


2. صوت و ویدئو (Audio & Video)

Jitsi Meet به‌صورت پیش‌فرض از ویژگی‌های صوت و ویدئو برای جلسات آنلاین پشتیبانی می‌کند. اگر بخواهید این ویژگی‌ها را سفارشی کنید، می‌توانید از فایل‌های پیکربندی مختلف برای مدیریت نحوه برخورد با این ویژگی‌ها استفاده کنید.

تنظیمات کیفیت صدا و تصویر:

برای تنظیم کیفیت صدا و تصویر در Jitsi، می‌توانید از گزینه‌های زیر در config.js استفاده کنید:

  • مسیر فایل: /usr/share/jitsi-meet/config.js
config.videoQuality = {
    idealWidth: 1920,
    idealHeight: 1080,
    maxWidth: 1280,
    maxHeight: 720
};

در اینجا می‌توانید کیفیت ویدئو را به دلخواه تنظیم کنید. گزینه‌های idealWidth و idealHeight مشخص می‌کنند که Jitsi به‌صورت پیش‌فرض چه کیفیتی را برای تصویر استفاده کند، در حالی که maxWidth و maxHeight حداکثر رزولوشن مجاز را تعریف می‌کنند.

تنظیمات اولیه میکروفون و دوربین:

در تنظیمات پیش‌فرض، Jitsi به‌طور خودکار میکروفون و دوربین را به‌طور فعال در هنگام ورود به جلسه روشن می‌کند. اگر می‌خواهید این رفتار را تغییر دهید، می‌توانید از تنظیمات زیر استفاده کنید:

  • مسیر فایل: /usr/share/jitsi-meet/config.js
config.startAudioMuted = true;  // میکروفون به‌طور پیش‌فرض قطع است
config.startVideoMuted = true;  // دوربین به‌طور پیش‌فرض قطع است

با این تنظیمات، کاربران وارد جلسه می‌شوند بدون اینکه میکروفون یا دوربین آن‌ها به‌طور پیش‌فرض فعال باشد.


3. کنترل‌کننده‌های صوتی و تصویری در جلسه

در صورتی که بخواهید دکمه‌هایی مانند قطع صدا یا خاموش کردن دوربین را برای کاربران در دسترس قرار دهید، باید آن‌ها را در تنظیمات نوار ابزار اضافه یا حذف کنید. همان‌طور که در بخش اول اشاره کردیم، برای سفارشی‌سازی نوار ابزار و تغییر نمایش دکمه‌ها، باید فایل interface_config.js را ویرایش کنید.

افزودن یا حذف دکمه‌ها:

TOOLBAR_BUTTONS: [
    'microphone',  // دکمه میکروفون
    'camera',      // دکمه دوربین
    'hangup',      // دکمه قطع جلسه
    'invite',      // دکمه دعوت از دیگران
    'chat',        // دکمه چت
    'settings',    // دکمه تنظیمات
    'videoquality' // دکمه تنظیمات کیفیت ویدئو
]

در اینجا شما می‌توانید هرکدام از دکمه‌ها را که نیاز دارید، اضافه یا حذف کنید. برای مثال، اگر نخواهید دکمه چت نمایش داده شود، کافیست آن را از لیست حذف کنید.


جمع‌بندی

در این بخش به نحوه تغییر و سفارشی‌سازی ویژگی‌های اصلی Jitsi مانند اشتراک‌گذاری صفحه، صوت و ویدئو پرداخته شد. با استفاده از تنظیمات موجود در فایل‌های پیکربندی مانند interface_config.js و config.js، شما می‌توانید این ویژگی‌ها را بر اساس نیاز خود تغییر دهید و تجربه‌ی بهتری برای کاربران ایجاد کنید. تنظیمات میکروفون، دوربین و کیفیت صدا و تصویر از مهم‌ترین مواردی هستند که باید در هنگام سفارشی‌سازی به آن‌ها توجه کنید.

تغییرات در این تنظیمات می‌تواند به شما کمک کند تا جلسه‌های آنلاین خود را بهتر مدیریت کنید و ویژگی‌هایی را فعال یا غیرفعال کنید که متناسب با نیاز شماست.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیمات پیش‌فرض برای مدیریت حجم صدا و کیفیت ویدیو” subtitle=”توضیحات کامل”]در Jitsi Meet، مدیریت حجم صدا و کیفیت ویدیو یکی از مهم‌ترین جنبه‌های تجربه کاربری است. تنظیمات مناسب برای این ویژگی‌ها می‌تواند به بهبود تجربه جلسات آنلاین کمک کند و به‌ویژه در شرایطی که پهنای باند محدود یا کیفیت پایین شبکه وجود دارد، تنظیمات مناسب می‌تواند تأثیر زیادی داشته باشد. این بخش به شما کمک می‌کند تا نحوه تنظیم و پیکربندی کیفیت صدا و ویدیو را در Jitsi Meet بیاموزید.


1. مدیریت حجم صدا (Audio Settings)

Jitsi Meet به‌طور پیش‌فرض از تنظیمات خودکار برای تنظیم حجم صدا استفاده می‌کند، اما شما می‌توانید این تنظیمات را مطابق نیاز خود تغییر دهید. برای تنظیم سطح صدای پیش‌فرض، باید تنظیمات زیر را در فایل پیکربندی config.js تغییر دهید.

تنظیمات مربوط به صدای پیش‌فرض:

  • مسیر فایل: /usr/share/jitsi-meet/config.js
// تنظیمات پیش‌فرض برای کنترل صدا
config.startAudioMuted = false;  // به‌طور پیش‌فرض میکروفون روشن است
config.startAudioOnly = false;  // به‌طور پیش‌فرض جلسه ویدیویی است

// تنظیمات سطح صدای پیش‌فرض برای ویدیو کنفرانس
config.audioLevelsEnabled = true;  // فعال کردن سطح صدای افراد
config.noAudioLevelIndicator = false;  // نمایش یا عدم نمایش نمایشگر سطح صدا

در اینجا:

  • startAudioMuted: تعیین می‌کند که آیا میکروفون به‌طور پیش‌فرض قطع است یا خیر.
  • startAudioOnly: تنظیم می‌کند که آیا جلسه به‌صورت ویدیویی آغاز شود یا فقط صوتی باشد.
  • audioLevelsEnabled: با فعال کردن این گزینه، سطح صدا برای هر شرکت‌کننده نمایش داده خواهد شد.
  • noAudioLevelIndicator: با فعال‌سازی این گزینه، نشانگرهای سطح صدا برای شرکت‌کنندگان به‌طور پیش‌فرض نمایش داده می‌شود.

2. مدیریت کیفیت ویدیو (Video Quality Settings)

کیفیت ویدیو یکی از پارامترهای مهم در جلسات آنلاین است که بسته به شرایط شبکه و دستگاه‌های شرکت‌کنندگان می‌تواند تغییر کند. Jitsi این امکان را فراهم کرده است که کیفیت ویدیو را با استفاده از تنظیمات مختلف سفارشی‌سازی کنید.

تنظیمات کیفیت ویدیو:

برای تغییر تنظیمات کیفیت ویدیو، از بخش videoQuality در فایل config.js استفاده می‌کنیم.

  • مسیر فایل: /usr/share/jitsi-meet/config.js
// تنظیمات کیفیت ویدیو
config.videoQuality = {
    idealWidth: 1920,  // عرض ایده‌آل تصویر
    idealHeight: 1080, // ارتفاع ایده‌آل تصویر
    maxWidth: 1280,    // حداکثر عرض تصویر
    maxHeight: 720,    // حداکثر ارتفاع تصویر
    minWidth: 640,     // حداقل عرض تصویر
    minHeight: 360,    // حداقل ارتفاع تصویر
};

// تنظیمات کیفیت فریم ویدیو
config.fps = 30;  // تعداد فریم در ثانیه (FPS)

در اینجا:

  • idealWidth و idealHeight: رزولوشن ایده‌آل تصویر (1920×1080 به‌عنوان HD).
  • maxWidth و maxHeight: حداکثر رزولوشن مجاز تصویر (1280×720 برای HD).
  • minWidth و minHeight: حداقل رزولوشن ممکن (640×360 برای ویدیوهای کم‌حجم).
  • fps: تعداد فریم‌های در ثانیه که برای ویدیو در نظر گرفته شده است. این عدد معمولاً برای ویدیوهای با کیفیت بالاتر به 30 فریم در ثانیه تنظیم می‌شود.

3. تنظیمات اتوماتیک کیفیت ویدیو بر اساس پهنای باند

برای مدیریت بهتر کیفیت ویدیو در شرایطی که پهنای باند محدود است، می‌توانید از ویژگی‌های خودکار تنظیم کیفیت ویدیو استفاده کنید. Jitsi به‌طور پیش‌فرض از فناوری‌های جدید برای بهینه‌سازی مصرف پهنای باند استفاده می‌کند.

فعال‌سازی تنظیمات اتوماتیک کیفیت ویدیو:

برای فعال‌سازی تنظیمات خودکار که به‌طور دینامیک کیفیت ویدیو را بسته به پهنای باند تنظیم می‌کند، از تنظیمات زیر استفاده کنید.

  • مسیر فایل: /usr/share/jitsi-meet/config.js
// فعال‌سازی تنظیمات خودکار کیفیت ویدیو
config.videoConferencing = {
    useAutoResize: true,  // استفاده از تغییر اندازه خودکار برای ویدیوها
    maxBitrate: 1500,     // حداکثر میزان پهنای باند (1500kbps)
    minBitrate: 300,      // حداقل میزان پهنای باند (300kbps)
};

در اینجا:

  • useAutoResize: این تنظیم به‌طور خودکار اندازه ویدیوها را بر اساس شرایط شبکه تغییر می‌دهد.
  • maxBitrate: حداکثر پهنای باند که برای کیفیت ویدیو در نظر گرفته شده است.
  • minBitrate: حداقل پهنای باند که برای ویدیو مورد استفاده قرار می‌گیرد.

جمع‌بندی

در اين بخش از آموزش های ارائه شده توسط فرازنتورک به نحوه تنظیمات پیش‌فرض برای مدیریت حجم صدا و کیفیت ویدیو در Jitsi Meet پرداخته شد. با استفاده از تنظیمات موجود در فایل‌های پیکربندی مانند config.js، می‌توانید تجربه‌ی بهتری برای کاربران خود ایجاد کنید. تنظیمات مربوط به مدیریت صدا، ویدیو و کیفیت آن‌ها به شما این امکان را می‌دهند که جلسه‌های آنلاین خود را بسته به شرایط شبکه و دستگاه‌های کاربران بهینه‌سازی کنید. این تنظیمات همچنین می‌توانند در شرایطی که پهنای باند محدود است، کیفیت ویدیو و صدا را به‌طور خودکار تنظیم کنند تا تجربه بهتری برای شرکت‌کنندگان فراهم شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استفاده از فایل‌های پیکربندی برای تنظیمات پیشرفته” subtitle=”توضیحات کامل”]در Jitsi Meet، پیکربندی و تنظیمات پیشرفته برای سفارشی‌سازی ویژگی‌ها و رفتارهای سیستم به‌طور گسترده‌ای از فایل‌های پیکربندی مختلفی استفاده می‌شود. این فایل‌ها به شما امکان می‌دهند تا جنبه‌های مختلف عملکرد، امنیت، تجربه کاربری و ویژگی‌های جلسات آنلاین را به‌طور دقیق تنظیم کنید. در این بخش، به بررسی روش‌های استفاده از فایل‌های پیکربندی برای اعمال تنظیمات پیشرفته در Jitsi Meet خواهیم پرداخت.


1. فایل پیکربندی اصلی: config.js

یکی از مهم‌ترین فایل‌های پیکربندی در Jitsi Meet، فایل config.js است که تنظیمات مختلفی مانند ویژگی‌های عمومی، امنیت، ویدیو، صدا و طراحی را مدیریت می‌کند. تغییرات این فایل می‌تواند تأثیر زیادی بر عملکرد سیستم و تجربه کاربران بگذارد.

مسیر فایل:
/usr/share/jitsi-meet/config.js

تنظیمات پیشرفته در config.js:

در اینجا چند نمونه از تنظیمات پیشرفته برای فایل config.js آورده شده است:

// تنظیمات امنیتی پیشرفته
config.enableWelcomePage = false;  // غیرفعال کردن صفحه خوش‌آمدگویی
config.requireDisplayName = true;  // درخواست نام کاربری قبل از ورود به جلسه

// تنظیمات مربوط به ویدیو
config.videoQuality = {
    idealWidth: 1920,   // عرض ایده‌آل تصویر
    idealHeight: 1080,  // ارتفاع ایده‌آل تصویر
    maxWidth: 1280,     // حداکثر عرض تصویر
    maxHeight: 720,     // حداکثر ارتفاع تصویر
};

// تنظیمات پیشرفته صوتی
config.audioLevelsEnabled = true;  // فعال‌سازی نمایش سطح صدا برای شرکت‌کنندگان
config.startAudioMuted = false;    // شروع جلسات با میکروفون خاموش

در اینجا:

  • enableWelcomePage: به‌طور پیش‌فرض صفحه خوش‌آمدگویی فعال است. با غیرفعال کردن آن می‌توانید تجربه کاربری ساده‌تری را فراهم کنید.
  • requireDisplayName: این گزینه از کاربران می‌خواهد که قبل از ورود به جلسه یک نام کاربری وارد کنند.
  • audioLevelsEnabled: فعال کردن این گزینه نمایش سطح صدا برای هر شرکت‌کننده را امکان‌پذیر می‌کند.
  • startAudioMuted: این گزینه تعیین می‌کند که جلسه با میکروفون خاموش شروع شود یا خیر.

2. فایل پیکربندی رابط کاربری: interface_config.js

فایل interface_config.js برای تنظیمات رابط کاربری و ویژگی‌های ظاهری سیستم استفاده می‌شود. در این فایل، می‌توانید گزینه‌های مختلفی را برای ظاهر جلسات، دکمه‌ها، و آیکون‌ها تغییر دهید. این فایل به‌ویژه برای سفارشی‌سازی UI (رابط کاربری) مفید است.

مسیر فایل:
/usr/share/jitsi-meet/interface_config.js

تنظیمات پیشرفته در interface_config.js:

در اینجا چند تنظیم پیشرفته برای این فایل آورده شده است:

// تنظیمات پیشرفته مربوط به دکمه‌ها و نمایش آیکون‌ها
CONFIG.toolbarButtons = [
    'microphone', 'camera', 'hangup', 'invite', 'participants-pane', 'settings', 'chat'
];  // لیست دکمه‌های قابل مشاهده در نوار ابزار

// فعال‌سازی نمایش آیکون‌های سفارشی
CONFIG.displayLogo = 'https://your-brand-logo-url.com/logo.png';  // آیکون سفارشی برند

در اینجا:

  • toolbarButtons: این لیست شامل دکمه‌هایی است که باید در نوار ابزار نمایش داده شوند. با تنظیم این گزینه می‌توانید کنترل دقیقی بر روی دکمه‌های موجود در رابط کاربری داشته باشید.
  • displayLogo: با تنظیم این گزینه می‌توانید آیکون یا لوگوی برند خود را به‌صورت سفارشی در رابط کاربری اضافه کنید.

3. فایل پیکربندی فایروال و سرور: jicofo.conf

Jitsi Meet از jicofo.conf برای تنظیمات سرور و مدیریت جلسات استفاده می‌کند. این فایل به‌ویژه برای مدیران سرور مفید است و به شما امکان می‌دهد تنظیمات پیشرفته‌ای برای مدیریت ارتباطات سرور Jitsi و ارتباطات میان کاربران ایجاد کنید.

مسیر فایل:
/etc/jitsi/jicofo/config

تنظیمات پیشرفته در jicofo.conf:

# تنظیمات پیشرفته برای سرور Jicofo
org.jitsi.jicofo.BRIDGE_MUC = focus@auth.your-domain.com
org.jitsi.jicofo.jibri.BRIDGE_MUC = jibri@internal.auth.your-domain.com
org.jitsi.jicofo.auth.URL = https://your-domain.com:8443

در اینجا:

  • BRIDGE_MUC: این گزینه تعیین می‌کند که نام اتاق چندگانه (MUC) برای پل‌های ویدیویی چه باشد.
  • auth.URL: این آدرس URL برای تنظیمات احراز هویت Jicofo است که به سرور شما متصل می‌شود.

4. فایل پیکربندی تنظیمات شبکه: sip-communicator.properties

در Jitsi Meet، تنظیمات مربوط به شبکه از طریق فایل sip-communicator.properties مدیریت می‌شود. این فایل به شما این امکان را می‌دهد که رفتار شبکه، تنظیمات احراز هویت و ارتباطات VoIP را پیکربندی کنید.

مسیر فایل:
/etc/jitsi/meet/sip-communicator.properties

تنظیمات پیشرفته در sip-communicator.properties:

# تنظیمات پیشرفته برای شبکه و VoIP
net.java.sip.communicator.service.protocol.PREFERRED_TRANSPORT = UDP
net.java.sip.communicator.service.gui.ALWAYS_TRUST_MODE_ENABLED = true

در اینجا:

  • PREFERRED_TRANSPORT: این تنظیم پروتکل ترجیحی برای انتقال داده‌ها را تعیین می‌کند. می‌توانید از UDP یا TCP بسته به نیاز خود استفاده کنید.
  • ALWAYS_TRUST_MODE_ENABLED: با فعال کردن این گزینه، ارتباطات VoIP به‌طور خودکار تأیید می‌شوند.

جمع‌بندی

فایل‌های پیکربندی در Jitsi Meet ابزارهای قدرتمندی هستند که به شما اجازه می‌دهند ویژگی‌ها و رفتارهای مختلف سیستم را سفارشی‌سازی کنید. از config.js برای تنظیمات عمومی و رابط کاربری گرفته تا jicofo.conf برای تنظیمات سرور، هر فایل پیکربندی امکان تنظیم دقیق عملکرد سیستم را فراهم می‌آورد. با استفاده از این فایل‌ها می‌توانید ویژگی‌هایی مانند حجم صدا، کیفیت ویدیو، و تنظیمات شبکه را بهینه‌سازی کنید تا تجربه بهتری برای کاربران خود ایجاد کنید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 2. توسعه ویژگی‌های جدید با JavaScript و React”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”معرفی JavaScript و React در Jitsi Meet” subtitle=”توضیحات کامل”]Jitsi Meet یک پلتفرم متن‌باز برای برگزاری جلسات ویدیویی است که از ترکیب تکنولوژی‌های مختلف برای ایجاد یک تجربه کاربری روان و پویا استفاده می‌کند. یکی از اجزای اصلی معماری Jitsi Meet، استفاده از JavaScript و React برای مدیریت رابط کاربری، تعاملات و ویژگی‌های مختلف سیستم است. در این بخش، به بررسی استفاده از JavaScript و React در Jitsi Meet و نحوه عملکرد این تکنولوژی‌ها خواهیم پرداخت.


1. JavaScript در Jitsi Meet

JavaScript زبان برنامه‌نویسی اصلی برای توسعه و کنترل بخش‌های مختلف عملکرد Jitsi Meet است. این زبان به‌طور گسترده برای مدیریت تعاملات کاربری، تنظیمات جلسات، ارتباطات Real-time و سایر ویژگی‌های تعاملی پلتفرم استفاده می‌شود. در Jitsi Meet، JavaScript به‌ویژه در مدیریت ویژگی‌هایی مانند ویدیو کنفرانس، پیام‌رسانی، اشتراک‌گذاری صفحه و تعاملات بین کاربران نقش اساسی ایفا می‌کند.

نکات کلیدی درباره استفاده از JavaScript در Jitsi Meet:

  • مدیریت ارتباطات Real-Time: برای برقراری ارتباطات ویدیویی و صوتی بین کاربران، Jitsi از JavaScript به‌عنوان واسط برای ارتباط با WebRTC و دیگر پروتکل‌های real-time استفاده می‌کند.
  • تعاملات رابط کاربری: JavaScript برای مدیریت تعاملات رابط کاربری مانند نمایش ویدیو، لیست کاربران و دکمه‌ها در نوار ابزار (Toolbar) استفاده می‌شود.
  • مدیریت وضعیت: JavaScript به‌طور مداوم وضعیت‌های مختلفی مانند حجم صدا، وضعیت دوربین، وضعیت اتصال و سایر ویژگی‌ها را بررسی و به‌روزرسانی می‌کند.

در Jitsi Meet، تمام کدهای JavaScript در کنار فایل‌های HTML و CSS قرار دارند و در داخل مرورگر کاربر اجرا می‌شوند.


2. React در Jitsi Meet

React یک کتابخانه جاوااسکریپت برای ساخت رابط‌های کاربری پویا و واکنش‌گرا است که به‌ویژه در برنامه‌های بزرگ کاربرد زیادی دارد. Jitsi Meet از React برای ساخت و مدیریت مؤلفه‌های رابط کاربری (UI components) استفاده می‌کند. React به Jitsi Meet این امکان را می‌دهد که بدون بارگذاری مجدد صفحه، تغییرات فوری و پویا در UI اعمال کند و تجربه کاربری بهتری را ارائه دهد.

ویژگی‌های کلیدی استفاده از React در Jitsi Meet:

  • ساخت مؤلفه‌های قابل استفاده مجدد (Reusable Components): در React، رابط کاربری به مؤلفه‌های کوچک و مستقل تقسیم می‌شود. این مؤلفه‌ها مانند VideoComponent, ToolbarComponent, و ChatComponent در Jitsi Meet برای کنترل بخش‌های مختلف UI به‌صورت مجزا و قابل استفاده مجدد طراحی شده‌اند.
  • بروزرسانی مؤثر و سریع: React با استفاده از Virtual DOM، تغییرات در UI را به‌صورت سریع و بهینه اعمال می‌کند. این ویژگی به‌ویژه در Jitsi Meet مفید است که باید تعاملات و وضعیت‌های مختلف را به‌صورت زنده و بدون تأخیر بروزرسانی کند.
  • مدیریت وضعیت: React به‌طور پیشرفته‌ای برای مدیریت وضعیت مؤلفه‌ها از طریق hooks مانند useState و useEffect استفاده می‌کند. این امکان را می‌دهد که وضعیت‌های مختلف مانند وضعیت اتصال، وضعیت میکروفن و دوربین و وضعیت کنفرانس به‌طور مؤثر مدیریت شوند.

ساختار React در Jitsi Meet:

در Jitsi Meet، React به‌صورت عمده برای پیاده‌سازی بخش‌های UI که با کاربران تعامل دارند، استفاده می‌شود. مثلاً برای نمایش ویدیوها و دکمه‌ها در نوار ابزار، یک مؤلفه React ایجاد می‌شود که وضعیت آن به‌صورت خودکار و بدون نیاز به بارگذاری مجدد صفحه بروزرسانی می‌شود.


3. ساختار کد و نحوه استفاده از React و JavaScript در Jitsi Meet

مسیر کد React در Jitsi Meet:

کدهای React معمولاً در پوشه‌های زیر قرار دارند:

  • react/features/: شامل مؤلفه‌ها و ویژگی‌های خاص React برای مدیریت بخش‌های مختلف.
  • react/components/: مؤلفه‌های عمومی React برای ساخت UI.
  • react/config/: شامل تنظیمات خاص React و پیکربندی‌های آن.

نمونه کد React برای افزودن یک دکمه به نوار ابزار:

فرض کنید می‌خواهید یک دکمه جدید به نوار ابزار Jitsi Meet اضافه کنید. برای این کار، ابتدا باید یک مؤلفه جدید برای دکمه ایجاد کنید و سپس آن را در نوار ابزار نمایش دهید.

import React from 'react';
import { Button } from '@material-ui/core';

const CustomButton = ({ onClick }) => {
  return (
    <Button onClick={onClick} variant="contained" color="primary">
      دکمه سفارشی
    </Button>
  );
};

export default CustomButton;

در اینجا، یک مؤلفه React ساده به نام CustomButton ایجاد کرده‌ایم که دکمه‌ای با عملکرد onClick دریافت می‌کند.

اضافه کردن دکمه به نوار ابزار:

برای اضافه کردن این دکمه به نوار ابزار، باید آن را در فایل مربوطه در react/features/ ادغام کنید:

import CustomButton from './CustomButton';

// اضافه کردن دکمه به نوار ابزار
const toolbarButtons = [
  'microphone',
  'camera',
  'hangup',
  <CustomButton onClick={handleCustomButtonClick} />
];

4. مدیریت وضعیت با React و JavaScript

در Jitsi Meet، React و JavaScript برای مدیریت وضعیت‌های مختلف استفاده می‌شوند. مثلاً برای مدیریت وضعیت فعال یا غیرفعال بودن میکروفن، از JavaScript برای به‌روزرسانی وضعیت استفاده می‌شود و React این تغییرات را به‌طور خودکار در UI اعمال می‌کند.

نمونه مدیریت وضعیت با React:

import React, { useState } from 'react';

const MicrophoneStatus = () => {
  const [isMuted, setIsMuted] = useState(false);

  const toggleMute = () => {
    setIsMuted(!isMuted);
    // ارسال تغییر وضعیت به سرور یا اعمال تغییرات دیگر
  };

  return (
    <div>
      <button onClick={toggleMute}>
        {isMuted ? 'Unmute' : 'Mute'}
      </button>
    </div>
  );
};

export default MicrophoneStatus;

در این مثال، وضعیت میکروفن (خاموش یا روشن بودن) با استفاده از React مدیریت می‌شود و دکمه به‌طور خودکار متن خود را بر اساس وضعیت به‌روز می‌کند.


جمع‌بندی

در Jitsi Meet، JavaScript و React برای ساخت و مدیریت ویژگی‌های رابط کاربری و تعاملات پیچیده استفاده می‌شوند. JavaScript به‌عنوان زبان اصلی برای ارتباطات Real-Time، مدیریت وضعیت‌ها و تعاملات با سرور به‌کار می‌رود، در حالی‌که React برای ایجاد رابط کاربری پویا و واکنش‌گرا استفاده می‌شود. با استفاده از React، Jitsi Meet قادر است تجربه کاربری روان و بدون تأخیر ایجاد کند که در آن تغییرات وضعیت به‌صورت سریع و مؤثر در UI اعمال می‌شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”روش‌های اضافه کردن کامپوننت‌های جدید به رابط کاربری” subtitle=”توضیحات کامل”]Jitsi Meet یک پلتفرم قدرتمند برای برگزاری جلسات ویدیویی است که از معماری ماژولار و انعطاف‌پذیر استفاده می‌کند. این پلتفرم به توسعه‌دهندگان این امکان را می‌دهد که کامپوننت‌های جدیدی به رابط کاربری (UI) اضافه کنند تا ویژگی‌های جدیدی را به آن بیفزایند. در این بخش، روش‌های مختلف برای اضافه کردن کامپوننت‌های جدید به رابط کاربری Jitsi Meet را بررسی خواهیم کرد. این فرآیند شامل استفاده از React برای طراحی کامپوننت‌ها، تنظیم آن‌ها در پیکربندی و نمایش آن‌ها در نوار ابزار یا بخش‌های دیگر رابط کاربری است.


1. ساخت کامپوننت جدید با استفاده از React

در Jitsi Meet، رابط کاربری اصلی با استفاده از React ساخته شده است. به همین دلیل، ابتدا باید یک کامپوننت جدید React ایجاد کنید و سپس آن را به رابط کاربری اضافه کنید. این کامپوننت می‌تواند هر نوع UI که نیاز دارید، مانند دکمه‌ها، پنجره‌های مودال، یا حتی ویژگی‌های پیچیده‌تر باشد.

مراحل ایجاد یک کامپوننت جدید در React:

  • ابتدا یک فایل جدید برای کامپوننت خود ایجاد کنید.
  • از React برای ساخت کامپوننت استفاده کنید.
  • در نهایت، کامپوننت را به رابط کاربری اضافه کنید.

نمونه کد کامپوننت ساده در React:

فرض کنید می‌خواهید یک دکمه سفارشی اضافه کنید که وقتی روی آن کلیک می‌شود، پیامی را نمایش دهد.

import React from 'react';
import { Button } from '@material-ui/core';

const CustomButton = ({ onClick }) => {
  return (
    <Button onClick={onClick} variant="contained" color="primary">
      دکمه سفارشی
    </Button>
  );
};

export default CustomButton;

در اینجا، یک کامپوننت ساده به نام CustomButton ایجاد کرده‌ایم که یک دکمه با رویداد onClick دارد.


2. اضافه کردن کامپوننت جدید به نوار ابزار (Toolbar)

یکی از رایج‌ترین مکان‌ها برای اضافه کردن کامپوننت‌های جدید، نوار ابزار (Toolbar) است. برای افزودن کامپوننت جدید به نوار ابزار، باید کامپوننت خود را در قسمت مربوط به نوار ابزار در پروژه وارد کنید و آن را به آرایه TOOLBAR_BUTTONS اضافه کنید.

مراحل افزودن کامپوننت جدید به نوار ابزار:

  1. ابتدا کامپوننت خود را وارد کنید.
  2. سپس کامپوننت را به لیست دکمه‌های نوار ابزار اضافه کنید.

نمونه کد افزودن دکمه به نوار ابزار:

در این مثال، ما کامپوننت CustomButton را به نوار ابزار اضافه می‌کنیم.

import CustomButton from './CustomButton';

// نوار ابزار
const TOOLBAR_BUTTONS = [
  'microphone',
  'camera',
  'hangup',
  <CustomButton onClick={handleCustomButtonClick} />
];

در اینجا، ما دکمه‌ای به نام CustomButton را به آرایه TOOLBAR_BUTTONS اضافه کرده‌ایم. این دکمه حالا به نوار ابزار اضافه شده و می‌توان از آن استفاده کرد.


3. افزودن کامپوننت جدید به قسمت‌های مختلف رابط کاربری

علاوه بر نوار ابزار، شما می‌توانید کامپوننت‌های جدید را به بخش‌های مختلف رابط کاربری مانند پنجره‌ها، نوار کناری، یا صفحه‌های جدید اضافه کنید. این کار به شما امکان می‌دهد تا ویژگی‌های سفارشی را در بخش‌های مختلف سیستم قرار دهید.

مراحل افزودن کامپوننت به بخش‌های مختلف رابط کاربری:

  1. ایجاد کامپوننت با React.
  2. وارد کردن کامپوننت در بخش مورد نظر.
  3. استفاده از آن در بخش‌های مختلف UI.

نمونه کد افزودن کامپوننت به پنجره اصلی:

در اینجا، ما کامپوننت CustomButton را در قسمت صفحه اصلی (main view) استفاده می‌کنیم:

import React from 'react';
import CustomButton from './CustomButton';

const MainView = () => {
  const handleCustomButtonClick = () => {
    alert("دکمه سفارشی کلیک شد");
  };

  return (
    <div>
      <h1>خوش آمدید به جلسه</h1>
      <CustomButton onClick={handleCustomButtonClick} />
    </div>
  );
};

export default MainView;

در اینجا، کامپوننت CustomButton به صفحه اصلی اضافه شده است. زمانی که کاربر روی دکمه کلیک می‌کند، یک پیام هشدار نمایش داده می‌شود.


4. پیکربندی کامپوننت جدید در فایل‌های پیکربندی

پس از ایجاد کامپوننت و افزودن آن به رابط کاربری، ممکن است بخواهید برخی تنظیمات خاص را برای کامپوننت خود انجام دهید. برای این کار، می‌توانید از فایل‌های پیکربندی موجود در Jitsi Meet استفاده کنید. این فایل‌ها معمولاً در پوشه config قرار دارند و شامل تنظیمات مختلفی برای پیکربندی سیستم و ویژگی‌ها هستند.

نمونه پیکربندی کامپوننت جدید در فایل interface_config.js:

فرض کنید می‌خواهید دکمه جدیدی که اضافه کرده‌اید را به‌طور خاص برای برخی کاربران نمایش دهید. شما می‌توانید تنظیمات مربوط به آن را در فایل interface_config.js وارد کنید.

const TOOLBAR_BUTTONS = [
  'microphone',
  'camera',
  'hangup',
  'invite',
  'mute-everyone',
  'participants-pane',
  'profile',
  'chat',
  'settings',
  'videoquality',
  'filmstrip',
  'tileview',
  'custom-button' // اضافه کردن دکمه سفارشی به نوار ابزار
];

در این مثال، دکمه custom-button به لیست دکمه‌های نوار ابزار اضافه شده است. این تغییرات باعث می‌شود که دکمه سفارشی در نوار ابزار نمایش داده شود.


5. تست و ارزیابی کامپوننت جدید

پس از اضافه کردن کامپوننت جدید به رابط کاربری، باید اطمینان حاصل کنید که این کامپوننت به درستی کار می‌کند. برای تست و ارزیابی کامپوننت‌های جدید، می‌توانید از ابزارهای مختلف مانند Storybook برای ایجاد تست‌های جداگانه یا ابزارهایی مانند Cypress برای تست تعاملی UI استفاده کنید.


جمع‌بندی

در این بخش، روش‌های مختلف اضافه کردن کامپوننت‌های جدید به رابط کاربری Jitsi Meet را بررسی کردیم. ابتدا با استفاده از React، کامپوننت جدیدی ساختیم و سپس آن را به نوار ابزار یا سایر بخش‌های رابط کاربری اضافه کردیم. علاوه بر این، برای پیکربندی کامپوننت‌ها و استفاده از آن‌ها در سطوح مختلف، از فایل‌های پیکربندی مانند interface_config.js استفاده کردیم. این فرآیند به شما این امکان را می‌دهد که ویژگی‌های جدید و سفارشی را به راحتی به پلتفرم Jitsi Meet اضافه کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”توسعه ویجت‌های جدید برای رابط کاربری (مثلاً ویجت‌های جدید برای چت، اشتراک‌گذاری صفحه و نظرسنجی‌ها)” subtitle=”توضیحات کامل”]در Jitsi Meet، امکان توسعه ویجت‌های جدید برای رابط کاربری وجود دارد که به شما این اجازه را می‌دهد که ویژگی‌های جدید و مفیدی به این پلتفرم اضافه کنید. این ویجت‌ها می‌توانند شامل ویژگی‌هایی مانند چت، اشتراک‌گذاری صفحه، نظرسنجی‌ها و دیگر ابزارهای کاربردی باشند. این فرآیند به‌ویژه برای توسعه‌دهندگانی که قصد دارند قابلیت‌های خاصی را برای کاربران خود فراهم کنند، بسیار مفید است. در این بخش، به توسعه ویجت‌های جدید برای رابط کاربری Jitsi Meet پرداخته و روش‌های پیاده‌سازی و پیکربندی آن‌ها را بررسی خواهیم کرد.


1. ساخت ویجت جدید برای چت

چت یکی از ویژگی‌های رایج و ضروری در هر پلتفرم جلسات آنلاین است. در Jitsi Meet، می‌توانید ویجت جدیدی برای چت ایجاد کنید تا عملکردهای جدیدی به آن اضافه کنید یا طراحی آن را سفارشی‌سازی نمایید.

مراحل ساخت ویجت جدید برای چت:

  1. ایجاد یک کامپوننت جدید React برای چت.
  2. مدیریت وضعیت چت با استفاده از Redux یا Context API.
  3. پیاده‌سازی نمایش پیام‌ها و ارسال آن‌ها.
  4. تنظیم ویجت چت در بخش‌های مختلف رابط کاربری.

نمونه کد ویجت چت در React:

در این مثال، یک کامپوننت جدید به نام ChatWidget ایجاد می‌کنیم که از یک ورودی برای نوشتن پیام‌ها و یک دکمه برای ارسال استفاده می‌کند.

import React, { useState } from 'react';
import { TextField, Button } from '@material-ui/core';

const ChatWidget = () => {
  const [message, setMessage] = useState('');

  const handleMessageChange = (e) => {
    setMessage(e.target.value);
  };

  const handleSendMessage = () => {
    // فرض می‌کنیم که پیام به سرور ارسال می‌شود
    console.log('ارسال پیام:', message);
    setMessage('');
  };

  return (
    <div>
      <TextField
        label="پیام خود را وارد کنید"
        value={message}
        onChange={handleMessageChange}
        variant="outlined"
        fullWidth
      />
      <Button onClick={handleSendMessage} variant="contained" color="primary">
        ارسال
      </Button>
    </div>
  );
};

export default ChatWidget;

در اینجا، ویجت چت به گونه‌ای طراحی شده که کاربر می‌تواند پیام خود را وارد کرده و آن را ارسال کند.


2. ایجاد ویجت اشتراک‌گذاری صفحه

ویجت اشتراک‌گذاری صفحه یک ویژگی ضروری برای جلسات آنلاین است که به کاربران اجازه می‌دهد تا صفحه خود را با دیگران به اشتراک بگذارند. برای پیاده‌سازی این ویجت، باید از قابلیت‌های مرورگر مانند API های WebRTC و API اشتراک‌گذاری صفحه استفاده کنید.

مراحل ساخت ویجت اشتراک‌گذاری صفحه:

  1. استفاده از API اشتراک‌گذاری صفحه مرورگر.
  2. ساخت کامپوننت React برای کنترل اشتراک‌گذاری صفحه.
  3. پیاده‌سازی دکمه شروع و متوقف کردن اشتراک‌گذاری.
  4. افزودن مدیریت وضعیت برای نمایش و مخفی کردن اشتراک‌گذاری.

نمونه کد ویجت اشتراک‌گذاری صفحه در React:

در این مثال، یک دکمه ایجاد می‌کنیم که با کلیک بر روی آن اشتراک‌گذاری صفحه شروع و متوقف می‌شود.

import React, { useState } from 'react';

const ScreenShareWidget = () => {
  const [isSharing, setIsSharing] = useState(false);

  const handleStartStopSharing = async () => {
    try {
      if (isSharing) {
        // متوقف کردن اشتراک‌گذاری صفحه
        const stream = await navigator.mediaDevices.getUserMedia({
          video: { mediaSource: 'screen' },
        });
        const tracks = stream.getTracks();
        tracks.forEach((track) => track.stop()); // متوقف کردن تمامی ترک‌ها
      } else {
        // شروع اشتراک‌گذاری صفحه
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
        });
        // فرض می‌کنیم که این استریم به جلسات Jitsi ارسال می‌شود
      }
      setIsSharing(!isSharing);
    } catch (err) {
      console.error('خطا در اشتراک‌گذاری صفحه:', err);
    }
  };

  return (
    <button onClick={handleStartStopSharing}>
      {isSharing ? 'متوقف کردن اشتراک‌گذاری صفحه' : 'شروع اشتراک‌گذاری صفحه'}
    </button>
  );
};

export default ScreenShareWidget;

این ویجت به کاربر این امکان را می‌دهد که صفحه خود را به اشتراک بگذارد و با کلیک دوباره آن را متوقف کند.


3. ایجاد ویجت نظرسنجی‌ها

ویجت نظرسنجی‌ها می‌تواند به شما کمک کند تا تعاملات بیشتری با شرکت‌کنندگان جلسه داشته باشید. این ویجت می‌تواند شامل سوالات چند گزینه‌ای، امتیازدهی یا نظرسنجی‌های متنی باشد.

مراحل ساخت ویجت نظرسنجی:

  1. ایجاد فرم نظرسنجی با React.
  2. ارسال نتایج نظرسنجی به سرور یا مدیریت محلی.
  3. نمایش نتایج نظرسنجی به کاربران.
  4. پیاده‌سازی دکمه‌ها برای شروع و خاتمه نظرسنجی.

نمونه کد ویجت نظرسنجی در React:

در این مثال، یک ویجت نظرسنجی ساده با دو گزینه ایجاد می‌کنیم.

import React, { useState } from 'react';

const PollWidget = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const [pollFinished, setPollFinished] = useState(false);

  const handleOptionChange = (e) => {
    setSelectedOption(e.target.value);
  };

  const handleSubmit = () => {
    console.log('نتیجه نظرسنجی:', selectedOption);
    setPollFinished(true);
  };

  return (
    <div>
      <h3>نظر شما در مورد این جلسه چیست؟</h3>
      <div>
        <label>
          <input
            type="radio"
            value="خوب"
            checked={selectedOption === 'خوب'}
            onChange={handleOptionChange}
          />
          خوب
        </label>
        <label>
          <input
            type="radio"
            value="بد"
            checked={selectedOption === 'بد'}
            onChange={handleOptionChange}
          />
          بد
        </label>
      </div>
      <button onClick={handleSubmit} disabled={pollFinished}>
        {pollFinished ? 'پایان نظرسنجی' : 'ارسال'}
      </button>
    </div>
  );
};

export default PollWidget;

این ویجت به کاربران این امکان را می‌دهد که در یک نظرسنجی شرکت کنند و نتایج آن را مشاهده کنند.


4. پیکربندی و افزودن ویجت‌ها به رابط کاربری

پس از ایجاد ویجت‌های مختلف، باید این ویجت‌ها را در رابط کاربری اصلی اضافه کنید. این کار معمولاً در فایل‌های پیکربندی و از طریق استفاده از ترکیب کامپوننت‌ها انجام می‌شود.

نمونه پیکربندی ویجت‌ها در فایل‌های پیکربندی:

فرض کنید می‌خواهید ویجت‌های ChatWidget, ScreenShareWidget, و PollWidget را به رابط کاربری اضافه کنید. برای این کار، ابتدا باید این ویجت‌ها را وارد کرده و سپس آن‌ها را در بخش‌های مختلف رابط کاربری قرار دهید.

import ChatWidget from './ChatWidget';
import ScreenShareWidget from './ScreenShareWidget';
import PollWidget from './PollWidget';

// افزودن ویجت‌ها به رابط کاربری
const App = () => {
  return (
    <div>
      <h1>جلسه آنلاین</h1>
      <ChatWidget />
      <ScreenShareWidget />
      <PollWidget />
    </div>
  );
};

export default App;

در اینجا، ویجت‌های مختلف را به رابط کاربری اصلی اضافه کرده‌ایم تا کاربران بتوانند از آن‌ها استفاده کنند.


جمع‌بندی

در این بخش، به توسعه ویجت‌های جدید برای رابط کاربری Jitsi Meet پرداخته‌ایم. از ویجت‌های چت، اشتراک‌گذاری صفحه و نظرسنجی‌ها استفاده کردیم و نحوه ساخت، پیکربندی و اضافه کردن این ویجت‌ها به رابط کاربری را بررسی کردیم. این ویجت‌ها قابلیت‌های مختلفی را به جلسات آنلاین اضافه می‌کنند و به کاربران امکان تعامل بیشتر را می‌دهند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”کار با APIهای Jitsi برای دسترسی به رویدادها و عملکردهای خاص” subtitle=”توضیحات کامل”]Jitsi Meet API‌ها به شما این امکان را می‌دهند که تعاملات پیچیده و سفارشی با جلسات و رویدادهای Jitsi داشته باشید. با استفاده از این APIها، می‌توانید به عملکردهای خاص مانند مدیریت کاربران، شنیدن رویدادهای مختلف و تغییر در ویژگی‌های جلسه دسترسی پیدا کنید. این API‌ها می‌توانند به توسعه‌دهندگان کمک کنند تا قابلیت‌های بیشتری به جلسات اضافه کنند و از آن‌ها به شیوه‌ای انعطاف‌پذیرتر استفاده کنند.

در این بخش، نحوه استفاده از APIهای Jitsi برای دسترسی به رویدادها و عملکردهای خاص توضیح داده خواهد شد. به‌ویژه، بر نحوه استفاده از Jitsi Meet API و رویدادهای مختلف آن تمرکز خواهیم کرد.


1. مقدمه‌ای بر Jitsi Meet API

Jitsi Meet API یک رابط جاوااسکریپت است که به شما این امکان را می‌دهد که به جلسات Jitsi متصل شوید، رویدادها را بشنوید و بر ویژگی‌های مختلف جلسه کنترل داشته باشید. این API به‌ویژه برای استفاده در پروژه‌هایی که نیاز به ادغام جلسات ویدئویی دارند، مفید است.

برای استفاده از Jitsi Meet API، باید کتابخانه Jitsi Meet Embed API را وارد کنید و سپس با استفاده از توابع مختلف آن، به عملکردهای مختلف دسترسی پیدا کنید. این کتابخانه به شما این امکان را می‌دهد که جلسات جدید ایجاد کنید، از رویدادهای مختلف مطلع شوید و ویژگی‌های مختلفی مانند اشتراک‌گذاری صفحه، ویدئو، صدا و دیگر موارد را مدیریت کنید.

نصب و راه‌اندازی Jitsi Meet API:

برای استفاده از Jitsi API در پروژه خود، ابتدا باید کتابخانه آن را اضافه کنید. شما می‌توانید از CDN آن استفاده کنید یا کتابخانه را به صورت محلی دانلود و در پروژه خود قرار دهید.

<script src="https://meet.jit.si/external_api.js"></script>

این فایل، API‌های مختلف را برای تعامل با Jitsi Meet در اختیار شما قرار می‌دهد.


2. ایجاد جلسه جدید با استفاده از API

یکی از اولین کارهایی که می‌توانید با API Jitsi انجام دهید، ایجاد یک جلسه جدید است. برای این کار، می‌توانید از JitsiMeetExternalAPI استفاده کنید. این کلاس به شما این امکان را می‌دهد که یک جلسه جدید ایجاد کرده و آن را در یک DIV خاص در وب‌سایت خود بارگذاری کنید.

نمونه کد برای ایجاد جلسه جدید:

const domain = 'meet.jit.si'; // آدرس سرور Jitsi
const options = {
  roomName: 'MyCustomRoom', // نام اتاق
  width: '100%', // عرض
  height: '100%', // ارتفاع
  parentNode: document.getElementById('jitsi-meet-container'), // والد برای نمایش
  configOverwrite: { 
    prejoinPageEnabled: false // غیرفعال کردن صفحه پیش‌پیوستن
  },
  interfaceConfigOverwrite: {
    TOOLBAR_BUTTONS: ['microphone', 'camera', 'chat'] // دکمه‌های قابل نمایش در نوار ابزار
  }
};

const api = new JitsiMeetExternalAPI(domain, options);

در این کد، یک جلسه جدید به نام MyCustomRoom ساخته می‌شود و در عنصر HTML با شناسه jitsi-meet-container نمایش داده می‌شود.


3. دسترسی به رویدادهای مختلف در Jitsi

Jitsi Meet API به شما این امکان را می‌دهد که به رویدادهای مختلف مانند تغییرات در وضعیت میکروفن، دوربین، پیوستن کاربران جدید و غیره دسترسی پیدا کنید. شما می‌توانید با استفاده از این API رویدادهای خاص را گوش کنید و عملکردهای خاصی را در صورت بروز این رویدادها اجرا کنید.

نمونه کد برای گوش دادن به رویدادها:

در اینجا چند رویداد مختلف که می‌توانید به آن‌ها گوش دهید را مشاهده می‌کنید:

// گوش دادن به رویداد پیوستن یک کاربر جدید
api.addEventListener('participantJoined', (event) => {
  console.log('کاربر جدید پیوسته:', event);
});

// گوش دادن به رویداد خروج یک کاربر
api.addEventListener('participantLeft', (event) => {
  console.log('کاربر از جلسه خارج شده:', event);
});

// گوش دادن به رویداد تغییر وضعیت میکروفن
api.addEventListener('audioStatusChanged', (event) => {
  console.log('وضعیت میکروفن تغییر کرده:', event);
});

// گوش دادن به رویداد تغییر وضعیت دوربین
api.addEventListener('videoStatusChanged', (event) => {
  console.log('وضعیت دوربین تغییر کرده:', event);
});

با استفاده از این کد، می‌توانید هر رویداد جدید را که در جلسه Jitsi رخ می‌دهد، بشنوید و اقدامات خاصی را انجام دهید.


4. کنترل ویژگی‌های جلسه از طریق API

Jitsi Meet API به شما این امکان را می‌دهد که ویژگی‌های مختلف جلسه را تغییر دهید. به‌عنوان مثال، شما می‌توانید میکروفن یا دوربین کاربران را غیرفعال کنید، یا قابلیت اشتراک‌گذاری صفحه را مدیریت کنید.

نمونه کد برای کنترل ویژگی‌ها:

// غیرفعال کردن میکروفن
api.executeCommand('toggleAudio');

// غیرفعال کردن دوربین
api.executeCommand('toggleVideo');

// فعال کردن اشتراک‌گذاری صفحه
api.executeCommand('startScreenSharing');

// غیرفعال کردن اشتراک‌گذاری صفحه
api.executeCommand('stopScreenSharing');

این توابع از API به شما این امکان را می‌دهند که ویژگی‌های جلسه را از راه دور تغییر دهید.


5. انتقال داده‌ها با استفاده از Jitsi Meet API

Jitsi Meet API از امکان ارسال داده‌ها بین کاربران پشتیبانی می‌کند. شما می‌توانید داده‌ها را بین شرکت‌کنندگان در یک جلسه ارسال کنید. این قابلیت می‌تواند برای انتقال اطلاعات و پیام‌های متنی یا غیر متنی مفید باشد.

نمونه کد برای ارسال داده‌ها بین کاربران:

// ارسال داده به تمامی شرکت‌کنندگان در جلسه
api.executeCommand('sendMessage', 'پیام جدید');

// دریافت پیام‌ها
api.addEventListener('messageReceived', (message) => {
  console.log('پیام جدید دریافت شد:', message);
});

این کد امکان ارسال پیام‌های متنی بین کاربران جلسه را فراهم می‌کند و به شما این اجازه را می‌دهد که از طریق API با شرکت‌کنندگان تعامل کنید.


جمع‌بندی

در این بخش، با Jitsi Meet API آشنا شدیم و نحوه استفاده از آن برای دسترسی به رویدادها و مدیریت ویژگی‌های مختلف جلسه را بررسی کردیم. با استفاده از این API، می‌توانید به راحتی جلسات جدید ایجاد کنید، به رویدادهای مختلف گوش دهید، ویژگی‌های جلسه را تغییر دهید و داده‌ها را بین کاربران ارسال کنید. این API‌ها ابزاری قدرتمند برای توسعه‌دهندگان هستند که می‌خواهند امکانات خاصی به جلسات Jitsi اضافه کنند یا رفتار آن‌ها را سفارشی‌سازی کنند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 3. پیاده‌سازی تنظیمات و افزونه‌های جدید”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ایجاد افزونه‌ها و پلاگین‌های سفارشی برای Jitsi” subtitle=”توضیحات کامل”]Jitsi یک پلتفرم متن‌باز است که به شما این امکان را می‌دهد که ویژگی‌های جدید و افزونه‌های سفارشی را برای جلسات ویدئویی خود اضافه کنید. از آنجایی که Jitsi برای توسعه‌دهندگان بسیار قابل تنظیم است، شما می‌توانید پلاگین‌ها و افزونه‌هایی بسازید که عملکردهای جدیدی مانند مدیریت بهتر کاربران، ارتباطات خاص، و یا حتی ویژگی‌های شخصی‌سازی‌شده برای برندهای مختلف را ارائه دهند.

در این بخش، به معرفی چگونگی ایجاد افزونه‌ها و پلاگین‌های سفارشی برای Jitsi می‌پردازیم و نحوه توسعه و پیاده‌سازی این افزونه‌ها در پروژه‌های خود را توضیح خواهیم داد.


1. مقدمه‌ای بر افزونه‌ها و پلاگین‌های Jitsi

Jitsi از یک ساختار ماژولار استفاده می‌کند که به شما این امکان را می‌دهد که پلاگین‌ها و افزونه‌های سفارشی را برای گسترش قابلیت‌های پلتفرم اضافه کنید. برای توسعه افزونه‌های سفارشی، شما باید با مفاهیم و ساختارهای داخلی Jitsi آشنا شوید و بدانید که کدام قسمت‌ها قابل سفارشی‌سازی هستند.

افزونه‌ها و پلاگین‌ها می‌توانند ویژگی‌های مختلفی از جمله موارد زیر را فراهم کنند:

  • مدیریت جلسات: ویژگی‌هایی مانند تایمر جلسه، شمارش معکوس، یادآورها و مدیریت‌های خاص برای جلسه.
  • افزودن ویجت‌ها و اجزاء جدید به رابط کاربری: اضافه کردن دکمه‌ها، ویجت‌ها یا بخش‌های جدید به نوار ابزار یا قسمت‌های مختلف صفحه.
  • بهبود تجربه کاربران: افزونه‌هایی برای بهینه‌سازی تجربه کاربری، مانند تغییرات در طراحی یا اضافه کردن ویژگی‌های جدید.
  • ارتباط با سیستم‌های خارجی: اتصال به سیستم‌های بیرونی مانند سیستم‌های مدیریت کاربران، پایگاه‌های داده، یا ابزارهای تحلیلی.

2. ساختار و فایل‌های افزونه در Jitsi

برای توسعه یک افزونه یا پلاگین سفارشی برای Jitsi، ابتدا باید با ساختار پروژه آشنا شوید. افزونه‌ها در Jitsi معمولاً به صورت فایل‌های جاوااسکریپت یا CSS ساخته می‌شوند و به پلتفرم اضافه می‌شوند.

ساختار فایل‌های افزونه:

  1. Plugin.js: این فایل جایی است که کد افزونه نوشته می‌شود و نحوه عملکرد آن مشخص می‌شود.
  2. style.css: این فایل برای استایل‌دهی به افزونه‌ها و پلاگین‌ها استفاده می‌شود.
  3. index.html: این فایل برای تنظیمات HTML و قرار دادن المان‌ها در صفحه استفاده می‌شود.

3. مراحل ایجاد افزونه سفارشی برای Jitsi

در این بخش، مراحل ایجاد افزونه سفارشی برای Jitsi را بررسی خواهیم کرد:

  1. ایجاد پوشه پلاگین
    ابتدا یک پوشه جدید برای پلاگین خود بسازید. به‌عنوان مثال، پلاگین خود را به نام my-custom-plugin نامگذاری کنید.
  2. ایجاد فایل plugin.js
    در این فایل، منطق افزونه خود را پیاده‌سازی خواهید کرد. برای شروع، یک فایل جاوااسکریپت با نام plugin.js ایجاد کنید.
class MyCustomPlugin {
  constructor(api) {
    this.api = api;
  }

  // متد برای اضافه کردن دکمه به نوار ابزار
  addButtonToToolbar() {
    const toolbar = this.api.interfaceConfig.TOOLBAR_BUTTONS;
    toolbar.push('myCustomButton');
  }

  // متد برای واکنش به رویدادها
  setupEventListeners() {
    this.api.addEventListener('videoStatusChanged', (event) => {
      console.log('وضعیت ویدئو تغییر کرده:', event);
    });
  }

  // متد برای عملکرد افزونه
  init() {
    this.addButtonToToolbar();
    this.setupEventListeners();
  }
}

// برای فعال کردن پلاگین
const plugin = new MyCustomPlugin(api);
plugin.init();

در این کد، افزونه‌ای ساخته‌ایم که یک دکمه به نوار ابزار اضافه می‌کند و به رویداد تغییر وضعیت ویدئو گوش می‌دهد.

  1. ایجاد فایل style.css
    اگر افزونه شما نیاز به استایل‌های خاص دارد، می‌توانید یک فایل style.css ایجاد کرده و استایل‌های مورد نیاز خود را در آن بنویسید.
/* استایل دکمه سفارشی */
#myCustomButton {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
}
  1. بارگذاری افزونه در پروژه Jitsi
    برای استفاده از پلاگین سفارشی، باید آن را در پروژه خود بارگذاری کنید. برای این کار، ابتدا پوشه افزونه را در پروژه خود کپی کنید. سپس، در فایل پیکربندی پروژه، افزونه را وارد کنید.

در فایل interface_config.js:

var config = {
  // سایر تنظیمات
  plugins: ['my-custom-plugin']
};

این کد افزونه شما را در پیکربندی Jitsi بارگذاری می‌کند.


4. نکات مهم در توسعه افزونه‌ها

  • محدودیت‌ها و دسترسی‌ها: افزونه‌ها فقط می‌توانند به بخش‌هایی از Jitsi دسترسی داشته باشند که به آن‌ها اختصاص داده شده است. برای ایجاد تغییرات خاص در رابط کاربری یا عملکرد جلسه، باید از APIهای داخلی Jitsi استفاده کنید.
  • استفاده از APIهای داخلی Jitsi: پلاگین‌ها می‌توانند از APIهای مختلفی مانند JitsiMeetExternalAPI، JitsiMeetAPI, و JitsiAPI برای تعامل با سیستم استفاده کنند. همچنین می‌توانید به رویدادهای مختلف مانند پیوستن کاربران، تغییرات در وضعیت ویدئو و صدا و غیره دسترسی پیدا کنید.
  • تست پلاگین‌ها: همیشه قبل از اینکه پلاگین‌ها را در یک محیط تولیدی استفاده کنید، آن‌ها را در یک محیط تست بررسی کنید تا از عملکرد صحیح آن‌ها اطمینان حاصل کنید.

5. چالش‌ها و مشکلات رایج

  • سازگاری با نسخه‌های مختلف Jitsi: هنگام توسعه پلاگین، باید اطمینان حاصل کنید که پلاگین شما با نسخه‌های مختلف Jitsi سازگار است. تغییرات در API ممکن است باعث بروز مشکلاتی شود که نیاز به به‌روزرسانی پلاگین دارند.
  • مدیریت عملکرد: افزونه‌ها باید به‌گونه‌ای طراحی شوند که عملکرد پلتفرم را تحت تاثیر قرار ندهند. در صورتی که پلاگین شما کدهای سنگین یا پیچیده‌ای را اجرا کند، ممکن است بر عملکرد کلی جلسه تأثیر بگذارد.
  • پشتیبانی از مرورگرهای مختلف: پلاگین‌های Jitsi باید در مرورگرهای مختلف آزمایش شوند تا از سازگاری آن‌ها با تمامی مرورگرهای رایج اطمینان حاصل کنید.

جمع‌بندی

در این بخش، نحوه ایجاد افزونه‌ها و پلاگین‌های سفارشی برای Jitsi را بررسی کردیم. از ایجاد پوشه پلاگین تا نوشتن فایل‌های جاوااسکریپت و CSS، این فرآیند به شما این امکان را می‌دهد که ویژگی‌های جدید به جلسات ویدئویی اضافه کنید. با استفاده از APIهای Jitsi، می‌توانید تعاملات پیچیده و سفارشی را ایجاد کرده و عملکردهای خاصی را برای کاربران خود فراهم کنید. افزونه‌ها به شما این امکان را می‌دهند که Jitsi را دقیقاً متناسب با نیازهای خود تنظیم کرده و تجربه‌ای سفارشی‌شده برای کاربران خود فراهم کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”پیاده‌سازی گزینه‌های جدید در تنظیمات پیشرفته” subtitle=”توضیحات کامل”]Jitsi، به‌عنوان یک پلتفرم متن‌باز برای جلسات ویدئویی، قابلیت‌های گسترده‌ای برای سفارشی‌سازی و پیکربندی به کاربران و توسعه‌دهندگان ارائه می‌دهد. پیاده‌سازی گزینه‌های جدید در تنظیمات پیشرفته یکی از مهم‌ترین ویژگی‌هایی است که به شما این امکان را می‌دهد تا عملکرد سیستم را متناسب با نیازهای خاص خود تنظیم کنید.

در این بخش، به پیاده‌سازی گزینه‌های جدید در تنظیمات پیشرفته Jitsi خواهیم پرداخت و نحوه افزودن این تنظیمات به پیکربندی‌های موجود را با جزئیات توضیح خواهیم داد.


1. مقدمه‌ای بر تنظیمات پیشرفته Jitsi

Jitsi از تنظیمات مختلفی برای پیکربندی سیستم استفاده می‌کند. این تنظیمات به شما این امکان را می‌دهند که بسیاری از جنبه‌های عملکرد، رابط کاربری و تجربه کاربری را تغییر دهید. با استفاده از فایل‌های پیکربندی مانند config.js، interface_config.js، و jitsi-meet-config.js، شما می‌توانید گزینه‌های مختلفی را تنظیم کنید.

برای ایجاد گزینه‌های جدید در تنظیمات پیشرفته، باید از این فایل‌ها و APIهای داخلی Jitsi استفاده کنید. شما می‌توانید گزینه‌های جدید را اضافه کرده و رفتار پلتفرم را مطابق با آن‌ها تغییر دهید.


2. ایجاد گزینه‌های جدید در پیکربندی Jitsi

برای پیاده‌سازی گزینه‌های جدید در تنظیمات پیشرفته، ابتدا باید به فایل پیکربندی اصلی Jitsi دسترسی داشته باشید. این فایل‌ها در مسیرهای مختلفی ذخیره می‌شوند و به شما اجازه می‌دهند تا گزینه‌های مختلفی را به تنظیمات سیستم اضافه کنید.

مرحله اول: ویرایش فایل پیکربندی config.js

در فایل config.js می‌توانید تنظیمات پیش‌فرض سیستم را تغییر دهید و گزینه‌های جدیدی را برای مدیریت ویژگی‌ها اضافه کنید.

  1. ایجاد گزینه جدید برای تنظیمات پیشرفته
// فایل config.js

var config = {
    // تنظیمات پیش‌فرض
    // افزودن تنظیمات جدید
    advancedSettings: {
        enableFeatureX: true,  // فعال کردن ویژگی X
        enableFeatureY: false, // غیرفعال کردن ویژگی Y
        customSetting: 100,    // تنظیم مقدار دلخواه
    }
};

در این مثال، تنظیمات جدیدی به نام‌های enableFeatureX، enableFeatureY و customSetting به پیکربندی اضافه شده‌اند که می‌توانند برای فعال یا غیرفعال کردن ویژگی‌ها و تنظیم مقادیر خاص استفاده شوند.

  1. بارگذاری و اعمال تنظیمات جدید در Jitsi

پس از اضافه کردن تنظیمات جدید، باید اطمینان حاصل کنید که این تنظیمات در زمان بارگذاری پلتفرم اعمال شوند. برای این کار، از فایل interface_config.js یا سایر فایل‌های پیکربندی مرتبط استفاده خواهید کرد.


3. تغییرات در رابط کاربری برای گزینه‌های جدید

پس از افزودن گزینه‌های جدید به پیکربندی، می‌توانید آن‌ها را در رابط کاربری Jitsi اعمال کنید. این کار معمولاً از طریق افزونه‌های سفارشی یا تغییرات در فایل‌های HTML و CSS انجام می‌شود.

مرحله دوم: افزودن کنترل‌های جدید در رابط کاربری

اگر بخواهید یک گزینه جدید را در رابط کاربری Jitsi نمایش دهید، می‌توانید از جاوااسکریپت و HTML برای افزودن دکمه‌ها یا سوئیچ‌ها استفاده کنید.

// فایل plugin.js

class AdvancedSettingsPlugin {
    constructor(api) {
        this.api = api;
    }

    init() {
        this.createSettingsButton();
    }

    createSettingsButton() {
        const toolbar = document.querySelector('.toolbar'); // نوار ابزار Jitsi
        const button = document.createElement('button');
        button.innerText = 'تنظیمات پیشرفته';
        button.onclick = () => {
            this.openSettingsDialog();
        };
        toolbar.appendChild(button);
    }

    openSettingsDialog() {
        const dialog = document.createElement('div');
        dialog.classList.add('settings-dialog'); // ایجاد پنل تنظیمات

        dialog.innerHTML = `
            <label>
                <input type="checkbox" 
                       id="enableFeatureX" 
                       ${config.advancedSettings.enableFeatureX ? 'checked' : ''}>
                فعال‌سازی ویژگی X
            </label>
            <br>
            <label>
                <input type="checkbox" 
                       id="enableFeatureY" 
                       ${config.advancedSettings.enableFeatureY ? 'checked' : ''}>
                غیرفعال‌سازی ویژگی Y
            </label>
            <br>
            <label>
                تنظیمات سفارشی: 
                <input type="number" 
                       id="customSetting" 
                       value="${config.advancedSettings.customSetting}">
            </label>
            <br>
            <button onclick="saveSettings()">ذخیره تنظیمات</button>
        `;
        document.body.appendChild(dialog);
    }

    saveSettings() {
        const enableFeatureX = document.getElementById('enableFeatureX').checked;
        const enableFeatureY = document.getElementById('enableFeatureY').checked;
        const customSetting = document.getElementById('customSetting').value;

        // ذخیره تنظیمات جدید
        config.advancedSettings.enableFeatureX = enableFeatureX;
        config.advancedSettings.enableFeatureY = enableFeatureY;
        config.advancedSettings.customSetting = customSetting;

        alert('تنظیمات ذخیره شد');
    }
}

// بارگذاری پلاگین
const plugin = new AdvancedSettingsPlugin(api);
plugin.init();

در این کد، یک دکمه برای “تنظیمات پیشرفته” به نوار ابزار Jitsi اضافه می‌شود. زمانی که این دکمه فشرده می‌شود، یک دیالوگ تنظیمات باز می‌شود که شامل گزینه‌های جدید است.


4. مدیریت ذخیره‌سازی تنظیمات جدید

برای ذخیره تنظیمات جدید در فایل پیکربندی و اطمینان از اینکه این تنظیمات بعد از بارگذاری مجدد سیستم حفظ می‌شوند، باید از متدهایی برای ذخیره تغییرات استفاده کنید. این کار ممکن است نیاز به تنظیمات سرور و ذخیره داده‌ها در پایگاه داده یا فایل‌های پیکربندی داشته باشد.

مرحله سوم: ذخیره تنظیمات در سرور

برای ذخیره تنظیمات جدید در سرور، باید از API یا درخواست‌های POST برای ارسال داده‌ها استفاده کنید. این کار می‌تواند به شما کمک کند تا تنظیمات را به‌طور دائمی ذخیره کنید.

// ارسال تنظیمات به سرور
function saveSettingsToServer() {
    fetch('/save-settings', {
        method: 'POST',
        body: JSON.stringify(config.advancedSettings),
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(data => console.log('تنظیمات ذخیره شد:', data))
    .catch(error => console.error('خطا در ذخیره تنظیمات:', error));
}

جمع‌بندی

در این بخش، نحوه پیاده‌سازی گزینه‌های جدید در تنظیمات پیشرفته Jitsi را بررسی کردیم. از ویرایش فایل‌های پیکربندی مانند config.js برای افزودن تنظیمات جدید گرفته تا نمایش این تنظیمات در رابط کاربری و ذخیره آن‌ها در سرور، هر مرحله به‌طور دقیق توضیح داده شد. با استفاده از این تکنیک‌ها، شما می‌توانید پلتفرم Jitsi را به‌طور کامل سفارشی‌سازی کرده و ویژگی‌های جدیدی به آن اضافه کنید تا نیازهای خاص خود را برآورده سازید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”افزودن قابلیت‌های جدید به رابط کاربری برای تنظیمات بیشتر” subtitle=”توضیحات کامل”]یکی از ویژگی‌های مهم پلتفرم Jitsi Meet قابلیت سفارشی‌سازی رابط کاربری (UI) است. با استفاده از این ویژگی، می‌توان ویژگی‌های جدیدی را به رابط کاربری اضافه کرد تا کاربران قادر به دسترسی به تنظیمات بیشتری باشند. این قابلیت‌ها می‌توانند شامل تنظیمات اضافی برای کنترل صدا، ویدیو، اشتراک‌گذاری صفحه، یا هر ویژگی خاص دیگر باشند.

در این بخش، به نحوه افزودن قابلیت‌های جدید به رابط کاربری برای تنظیمات بیشتر در Jitsi Meet خواهیم پرداخت. این کار شامل ایجاد رابط‌های کاربری جدید، استفاده از پلاگین‌ها، و مدیریت تنظیمات پیشرفته در پنل‌های مختلف است.


1. مقدمه‌ای بر افزودن قابلیت‌های جدید به رابط کاربری

Jitsi Meet دارای یک رابط کاربری پویا و انعطاف‌پذیر است که به شما این امکان را می‌دهد تا اجزای مختلف آن را سفارشی کنید. این سفارشی‌سازی‌ها می‌توانند شامل اضافه کردن دکمه‌ها، سوئیچ‌ها، دیالوگ‌ها یا حتی گزینه‌های جدید برای مدیریت ویژگی‌های پیشرفته باشند.

برای افزودن قابلیت‌های جدید به رابط کاربری، باید با استفاده از جاوااسکریپت و APIهای داخلی Jitsi، تغییرات لازم را ایجاد کنید. همچنین، می‌توانید از ابزارهایی مانند interface_config.js و پلاگین‌های سفارشی برای اضافه کردن این ویژگی‌ها استفاده کنید.


2. ایجاد پنل تنظیمات جدید

برای ایجاد یک پنل تنظیمات جدید، ابتدا باید بررسی کنید که تنظیمات موردنظر در کجا قرار می‌گیرند و سپس کنترل‌هایی مانند سوئیچ، اسلایدر یا چک‌باکس را برای آن‌ها ایجاد کنید. این پنل‌ها می‌توانند به‌صورت دکمه‌های جداگانه یا یک بخش در منوی تنظیمات باشند.

مرحله اول: افزودن دکمه تنظیمات جدید به رابط کاربری

در این مثال، یک دکمه به رابط کاربری Jitsi اضافه می‌کنیم که با کلیک بر روی آن، یک پنل تنظیمات جدید نمایش داده می‌شود.

class NewSettingsPanelPlugin {
    constructor(api) {
        this.api = api;
    }

    init() {
        this.createSettingsButton();
    }

    createSettingsButton() {
        const toolbar = document.querySelector('.toolbar'); // نوار ابزار Jitsi
        const button = document.createElement('button');
        
        button.innerText = 'تنظیمات بیشتر';
        
        button.onclick = () => {
            this.openSettingsDialog();
        };
        
        toolbar.appendChild(button);
    }

    openSettingsDialog() {
        const dialog = document.createElement('div');
        dialog.classList.add('settings-dialog');
        
        dialog.innerHTML = `
            <label>
                <input type="checkbox" 
                       id="enableAdvancedAudio" 
                       ${config.advancedSettings.enableAdvancedAudio ? 'checked' : ''}>
                فعال‌سازی صدای پیشرفته
            </label>
            <br>
            <label>
                <input type="checkbox" 
                       id="enableAdvancedVideo" 
                       ${config.advancedSettings.enableAdvancedVideo ? 'checked' : ''}>
                فعال‌سازی ویدیو پیشرفته
            </label>
            <br>
            <label>
                تنظیمات سفارشی:
                <input type="number" 
                       id="customSetting" 
                       value="${config.advancedSettings.customSetting}">
            </label>
            <br>
            <button onclick="saveSettings()">ذخیره تنظیمات</button>
        `;
        
        document.body.appendChild(dialog);
    }

    saveSettings() {
        const enableAdvancedAudio = document.getElementById('enableAdvancedAudio').checked;
        const enableAdvancedVideo = document.getElementById('enableAdvancedVideo').checked;
        const customSetting = document.getElementById('customSetting').value;

        // ذخیره تنظیمات جدید
        config.advancedSettings.enableAdvancedAudio = enableAdvancedAudio;
        config.advancedSettings.enableAdvancedVideo = enableAdvancedVideo;
        config.advancedSettings.customSetting = customSetting;
        
        alert('تنظیمات ذخیره شد');
    }
}

// بارگذاری پلاگین
const plugin = new NewSettingsPanelPlugin(api);
plugin.init();

در این کد، یک دکمه جدید به نوار ابزار Jitsi اضافه می‌شود که وقتی کاربر روی آن کلیک می‌کند، پنل تنظیمات جدید باز می‌شود. در پنل، کاربر می‌تواند تنظیمات مربوط به “صدای پیشرفته” و “ویدیو پیشرفته” را فعال یا غیرفعال کند.


3. استفاده از تنظیمات سفارشی در فایل‌های پیکربندی

برای اینکه تنظیمات جدید پس از تغییرات حفظ شوند، باید از پیکربندی‌های Jitsi استفاده کنید و آن‌ها را در فایل‌های پیکربندی مانند config.js ذخیره کنید. برای این منظور، نیاز به ویرایش این فایل‌ها و استفاده از APIهای موجود در Jitsi خواهید داشت.

مرحله دوم: ویرایش فایل config.js برای افزودن تنظیمات جدید

// فایل config.js

var config = {
    advancedSettings: {
        enableAdvancedAudio: false,  // تنظیمات صدای پیشرفته
        enableAdvancedVideo: false,  // تنظیمات ویدیوی پیشرفته
        customSetting: 50,           // تنظیمات سفارشی
    }
};

این بخش به شما این امکان را می‌دهد که تنظیمات جدید را به‌صورت پیش‌فرض در سیستم بارگذاری کنید. با ذخیره کردن این مقادیر در فایل پیکربندی، هنگام بارگذاری Jitsi، این تنظیمات به‌طور پیش‌فرض اعمال می‌شوند.


4. تغییرات در عملکرد بر اساس تنظیمات جدید

پس از اضافه کردن تنظیمات جدید به رابط کاربری و پیکربندی، باید عملکرد Jitsi را به‌گونه‌ای تنظیم کنید که این تنظیمات بر روی رفتار پلتفرم تأثیر بگذارند. برای مثال، اگر ویژگی “صدای پیشرفته” فعال شود، ممکن است نیاز به تغییر در تنظیمات صوتی و فیلترهای صدای Jitsi باشد.

مرحله سوم: اعمال تغییرات در عملکرد بر اساس تنظیمات

// اعمال تنظیمات جدید در عملکرد
function applyAdvancedSettings() {
    if (config.advancedSettings.enableAdvancedAudio) {
        // فعال‌سازی ویژگی صدای پیشرفته
        enableAdvancedAudioFeatures();
    }
    if (config.advancedSettings.enableAdvancedVideo) {
        // فعال‌سازی ویژگی ویدیو پیشرفته
        enableAdvancedVideoFeatures();
    }
}

// عملکردهای جدید برای صدای پیشرفته
function enableAdvancedAudioFeatures() {
    // تنظیمات جدید برای صدا
    console.log("ویژگی صدای پیشرفته فعال شد");
}

// عملکردهای جدید برای ویدیو پیشرفته
function enableAdvancedVideoFeatures() {
    // تنظیمات جدید برای ویدیو
    console.log("ویژگی ویدیو پیشرفته فعال شد");
}

در این کد، ما بررسی می‌کنیم که آیا ویژگی‌های “صدای پیشرفته” و “ویدیو پیشرفته” فعال شده‌اند یا خیر، و در صورت فعال بودن، آن‌ها را در عملکرد Jitsi اعمال می‌کنیم.


جمع‌بندی

در این بخش، نحوه افزودن قابلیت‌های جدید به رابط کاربری Jitsi برای تنظیمات بیشتر بررسی شد. با استفاده از جاوااسکریپت و فایل‌های پیکربندی، شما می‌توانید دکمه‌ها، پنل‌ها و گزینه‌های جدید را به رابط کاربری اضافه کرده و تنظیمات جدید را ذخیره و اعمال کنید. این قابلیت‌ها به شما کمک می‌کنند تا Jitsi را به‌طور کامل سفارشی کرده و تجربه کاربری را بر اساس نیازهای خاص خود بهبود دهید.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 4. افزونه‌ها و توسعه APIهای سفارشی”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”آشنایی با APIهای موجود در Jitsi و نحوه استفاده از آن‌ها ” subtitle=”توضیحات کامل”]Jitsi یک پلتفرم متن‌باز است که برای ایجاد سیستم‌های کنفرانس ویدیویی به‌کار می‌رود. این پلتفرم از یک مجموعه ابزار API برای تعامل با رابط‌های مختلف و پیکربندی امکانات پشتیبانی می‌کند. این APIها به توسعه‌دهندگان اجازه می‌دهند تا ویژگی‌های مختلفی مانند اشتراک‌گذاری صفحه، مدیریت تماس‌ها، و سفارشی‌سازی رابط کاربری را به‌صورت کامل کنترل کنند. در این بخش، به بررسی برخی از مهم‌ترین APIهای موجود در Jitsi و نحوه استفاده از آن‌ها پرداخته می‌شود.


۱. API مدیریت تماس‌ها

Jitsi به‌طور پیش‌فرض قابلیت مدیریت تماس‌ها از طریق API را ارائه می‌دهد. این API به توسعه‌دهندگان این امکان را می‌دهد که تماس‌های ویدیویی، صوتی و متنی را مدیریت کنند. برای مثال، شما می‌توانید با استفاده از API تماس جدیدی برقرار کنید، آن را قطع کنید، یا وضعیت آن را بررسی کنید.

مثال استفاده از API تماس:

// برقراری تماس جدید
const api = new JitsiMeetExternalAPI(domain, options);
api.executeCommand('startRecording');

// قطع تماس
api.executeCommand('hangup');

// بررسی وضعیت تماس
console.log(api.getMeetingId());

در اینجا JitsiMeetExternalAPI یک شیء اصلی است که به‌وسیله آن می‌توان دستورات مختلفی را اجرا کرد.


۲. API تنظیمات و ویژگی‌های ویدیویی

Jitsi به توسعه‌دهندگان این امکان را می‌دهد که ویژگی‌های ویدیویی مانند کیفیت ویدیو، میکروفون و دوربین را به‌صورت دقیق تنظیم کنند. شما می‌توانید تنظیمات ویدیویی را در حین اجرای کنفرانس تغییر دهید.

مثال استفاده از API برای تنظیمات ویدیو:

// تغییر کیفیت ویدیو
api.executeCommand('setVideoQuality', 720);

// فعال‌سازی یا غیرفعال‌سازی ویدیو
api.executeCommand('toggleVideo');

با استفاده از این دستورات، شما می‌توانید کیفیت ویدیو را به‌صورت پویا تغییر دهید یا آن را در صورت لزوم غیرفعال کنید.


۳. API مدیریت چت

Jitsi همچنین APIهایی برای مدیریت چت‌های گروهی و خصوصی فراهم کرده است. شما می‌توانید پیام‌ها را ارسال، دریافت و حتی تاریخچه پیام‌ها را مشاهده کنید.

مثال استفاده از API برای مدیریت چت:

// ارسال پیام
api.executeCommand('sendMessage', 'این یک پیام تستی است');

// دریافت پیام‌ها
api.addEventListener('chatMessageReceived', (message) => {
    console.log('پیام جدید: ', message);
});

در اینجا sendMessage برای ارسال پیام و chatMessageReceived برای دریافت پیام‌ها استفاده می‌شود.


۴. API تعامل با رابط کاربری

Jitsi از APIهایی برای تعامل با اجزای رابط کاربری (UI) مانند دکمه‌ها، پنل‌ها و نوار ابزار پشتیبانی می‌کند. این API به شما این امکان را می‌دهد که دکمه‌ها یا پنل‌های سفارشی را اضافه کرده و آن‌ها را به رویدادهای مختلف متصل کنید.

مثال استفاده از API برای افزودن دکمه سفارشی:

const toolbar = document.querySelector('.toolbar');
const customButton = document.createElement('button');
customButton.innerText = 'دکمه سفارشی';
customButton.onclick = () => {
    console.log('دکمه سفارشی فشار داده شد');
};
toolbar.appendChild(customButton);

در این مثال، یک دکمه سفارشی به نوار ابزار Jitsi اضافه شده است که با کلیک روی آن یک پیام در کنسول چاپ می‌شود.


۵. API برای مدیریت کاربران و شرکت‌کنندگان

Jitsi امکاناتی برای مدیریت شرکت‌کنندگان در جلسات ارائه می‌دهد. شما می‌توانید شرکت‌کنندگان را اضافه یا حذف کرده و وضعیت آن‌ها را مدیریت کنید.

مثال استفاده از API برای مدیریت کاربران:

// دریافت لیست شرکت‌کنندگان
const participants = api.getParticipants();
console.log('شرکت‌کنندگان: ', participants);

// حذف یک شرکت‌کننده از جلسه
api.executeCommand('kickParticipant', 'participantID');

با استفاده از این API می‌توانید اطلاعات مربوط به شرکت‌کنندگان جلسه را دریافت کرده و آن‌ها را مدیریت کنید.


۶. API پیکربندی و تنظیمات پیشرفته

Jitsi به شما اجازه می‌دهد که تنظیمات پیشرفته مانند حجم صدا، کیفیت ویدیو و همچنین ویژگی‌های دیگر را از طریق API تغییر دهید. برای مثال، شما می‌توانید تنظیمات پیش‌فرض برای مدیریت حجم صدا و کیفیت ویدیو را تغییر دهید.

مثال استفاده از API برای تغییر تنظیمات پیش‌فرض:

// تنظیم حجم صدا
api.executeCommand('setAudioVolume', 70);

// تنظیم کیفیت ویدیو
api.executeCommand('setVideoQuality', 1080);

این API برای تنظیمات پیشرفته مانند حجم صدا و کیفیت ویدیو مورد استفاده قرار می‌گیرد.


جمع‌بندی

Jitsi مجموعه‌ای قدرتمند از APIها را برای مدیریت ویژگی‌های مختلف کنفرانس‌های ویدیویی خود ارائه می‌دهد. از APIهای مدیریت تماس‌ها گرفته تا تنظیمات پیشرفته و تعامل با رابط کاربری، شما می‌توانید به‌طور کامل جلسات ویدیویی خود را سفارشی‌سازی و کنترل کنید. برای استفاده مؤثر از این APIها، باید به‌دقت مستندات Jitsi را مطالعه کرده و با دستورات مختلف API آشنا شوید تا بهترین تجربه را برای کاربران خود فراهم کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ایجاد و استفاده از APIهای سفارشی برای گسترش قابلیت‌ها” subtitle=”توضیحات کامل”]Jitsi به‌عنوان یک پلتفرم منبع‌باز، این امکان را به توسعه‌دهندگان می‌دهد که APIهای سفارشی برای گسترش قابلیت‌های خود ایجاد کنند. استفاده از APIهای سفارشی برای افزودن ویژگی‌های جدید و سفارشی‌سازی تجربه کاربران به شما این امکان را می‌دهد که به‌راحتی از توانایی‌های Jitsi برای نیازهای خاص خود بهره‌برداری کنید. در این بخش به نحوه ایجاد و استفاده از APIهای سفارشی در Jitsi می‌پردازیم.


۱. تعریف API سفارشی در Jitsi

برای ایجاد API سفارشی در Jitsi، شما ابتدا باید به کد اصلی پروژه دسترسی داشته باشید. سپس می‌توانید از روش‌های مختلفی برای ایجاد یک API جدید استفاده کنید. در اینجا یک نمونه ساده برای ایجاد یک API سفارشی آورده شده است.

نمونه تعریف یک API سفارشی:

class CustomAPI {
    constructor() {
        this.customFeature = false;
    }

    toggleFeature() {
        this.customFeature = !this.customFeature;
        console.log('ویژگی سفارشی فعال شد: ', this.customFeature);
    }

    getFeatureStatus() {
        return this.customFeature;
    }
}

// ایجاد نمونه از API سفارشی
const customAPI = new CustomAPI();
customAPI.toggleFeature();  // فعال‌سازی ویژگی سفارشی
console.log(customAPI.getFeatureStatus());  // بررسی وضعیت ویژگی

در این مثال، یک API سفارشی به نام CustomAPI ایجاد شده است که دارای متدهایی برای فعال‌سازی و بررسی وضعیت ویژگی‌های سفارشی است.


۲. افزودن API سفارشی به رابط کاربری Jitsi

برای گسترش رابط کاربری Jitsi و افزودن دکمه‌های جدید یا قابلیت‌های اضافی، می‌توانید از API سفارشی خود استفاده کنید. در اینجا به نحوه افزودن یک دکمه سفارشی به نوار ابزار Jitsi با استفاده از API سفارشی اشاره می‌کنیم.

نمونه کد برای افزودن دکمه سفارشی به نوار ابزار Jitsi:

class CustomButtonPlugin {
    constructor(api) {
        this.api = api;
    }

    init() {
        this.addCustomButton();
    }

    addCustomButton() {
        const toolbar = document.querySelector('.toolbar');
        const button = document.createElement('button');
        button.innerText = 'ویژگی سفارشی';
        button.onclick = () => {
            customAPI.toggleFeature();  // فراخوانی API سفارشی
            this.updateButtonStatus(button);
        };
        toolbar.appendChild(button);
    }

    updateButtonStatus(button) {
        const status = customAPI.getFeatureStatus() ? 'غیرفعال' : 'فعال';
        button.innerText = `ویژگی سفارشی (${status})`;
    }
}

// بارگذاری پلاگین
const customButtonPlugin = new CustomButtonPlugin(api);
customButtonPlugin.init();

در این مثال، یک دکمه سفارشی به نوار ابزار Jitsi اضافه می‌شود که هنگام کلیک کردن ویژگی سفارشی را فعال یا غیرفعال می‌کند و وضعیت آن را به‌روزرسانی می‌کند.


۳. استفاده از API سفارشی برای دسترسی به داده‌ها و رویدادها

شما می‌توانید از APIهای سفارشی برای دسترسی به داده‌ها و رویدادهای مختلف در جلسات Jitsi استفاده کنید. این می‌تواند شامل اطلاعات مربوط به شرکت‌کنندگان، وضعیت تماس‌ها، پیام‌ها و سایر داده‌های مرتبط باشد. برای این منظور می‌توانید APIهای سفارشی خود را برای دریافت اطلاعات و ارسال آن‌ها به سیستم‌های دیگر توسعه دهید.

نمونه استفاده از API سفارشی برای مدیریت داده‌ها:

class DataManagerAPI {
    constructor() {
        this.participants = [];
    }

    addParticipant(participant) {
        this.participants.push(participant);
        console.log('شرکت‌کننده جدید اضافه شد: ', participant);
    }

    removeParticipant(participantId) {
        this.participants = this.participants.filter(p => p.id !== participantId);
        console.log('شرکت‌کننده حذف شد: ', participantId);
    }

    getParticipants() {
        return this.participants;
    }
}

// ایجاد و استفاده از API برای مدیریت شرکت‌کنندگان
const dataManagerAPI = new DataManagerAPI();
dataManagerAPI.addParticipant({ id: 'user123', name: 'Ali' });
dataManagerAPI.removeParticipant('user123');
console.log(dataManagerAPI.getParticipants());

در این مثال، API سفارشی DataManagerAPI برای مدیریت شرکت‌کنندگان در جلسه استفاده شده است. این API شامل متدهایی برای اضافه کردن، حذف کردن و مشاهده شرکت‌کنندگان است.


۴. به‌کارگیری API سفارشی برای گسترش قابلیت‌های کنفرانس

از APIهای سفارشی می‌توان برای افزودن ویژگی‌های جدید به کنفرانس‌ها استفاده کرد. این ویژگی‌ها می‌توانند شامل نظرسنجی‌ها، ضبط جلسات، آنالیز رفتار کاربران و موارد دیگر باشند. در اینجا به نحوه افزودن یک ویژگی جدید برای نظرسنجی در کنفرانس اشاره می‌کنیم.

نمونه کد برای افزودن ویژگی نظرسنجی با استفاده از API سفارشی:

class PollingFeatureAPI {
    constructor() {
        this.polls = [];
    }

    createPoll(question, options) {
        const poll = {
            question,
            options,
            responses: {}
        };
        this.polls.push(poll);
        console.log('نظرسنجی جدید ایجاد شد: ', question);
    }

    voteInPoll(pollIndex, option) {
        const poll = this.polls[pollIndex];
        poll.responses[option] = (poll.responses[option] || 0) + 1;
        console.log('رأی‌گیری برای نظرسنجی: ', poll.question);
    }

    getPollResults(pollIndex) {
        return this.polls[pollIndex].responses;
    }
}

// ایجاد و استفاده از API برای نظرسنجی
const pollingAPI = new PollingFeatureAPI();
pollingAPI.createPoll('چه ویژگی‌ای بیشتر برای شما مفید است؟', ['ویژگی A', 'ویژگی B', 'ویژگی C']);
pollingAPI.voteInPoll(0, 'ویژگی A');
console.log(pollingAPI.getPollResults(0));

در این مثال، API سفارشی برای ایجاد و مدیریت نظرسنجی‌ها به کار رفته است. می‌توانید این API را برای افزودن ویژگی‌های پیچیده‌تر مانند آمار و گزارش‌ها گسترش دهید.


۵. به‌کارگیری API سفارشی برای گسترش دسترسی و امنیت

Jitsi به‌طور پیش‌فرض ویژگی‌های امنیتی را برای کنفرانس‌ها فراهم کرده است. با این حال، شما می‌توانید با استفاده از APIهای سفارشی قابلیت‌های امنیتی و دسترسی را گسترش دهید. به‌عنوان مثال، می‌توانید سیستم احراز هویت یا محدودیت‌های دسترسی جدیدی را به‌راحتی پیاده‌سازی کنید.

نمونه کد برای افزودن محدودیت دسترسی با استفاده از API سفارشی:

class AccessControlAPI {
    constructor() {
        this.allowedParticipants = [];
    }

    allowAccess(userId) {
        this.allowedParticipants.push(userId);
        console.log('دسترسی به کاربر با شناسه ' + userId + ' داده شد');
    }

    denyAccess(userId) {
        this.allowedParticipants = this.allowedParticipants.filter(id => id !== userId);
        console.log('دسترسی به کاربر با شناسه ' + userId + ' لغو شد');
    }

    checkAccess(userId) {
        return this.allowedParticipants.includes(userId);
    }
}

// استفاده از API برای مدیریت دسترسی
const accessControlAPI = new AccessControlAPI();
accessControlAPI.allowAccess('user123');
console.log(accessControlAPI.checkAccess('user123'));  // بررسی دسترسی
accessControlAPI.denyAccess('user123');

در این مثال، یک API سفارشی برای مدیریت دسترسی به جلسه ایجاد شده است.


جمع‌بندی

استفاده از APIهای سفارشی در Jitsi به شما این امکان را می‌دهد که قابلیت‌های این پلتفرم را به‌طور کامل سفارشی‌سازی کرده و ویژگی‌های جدیدی به آن اضافه کنید. با ایجاد APIهای سفارشی، شما می‌توانید ویژگی‌هایی همچون مدیریت شرکت‌کنندگان، نظرسنجی‌ها، امنیت، و سایر ویژگی‌های سفارشی‌سازی شده را به سیستم خود اضافه کنید. این روش به شما امکان می‌دهد که Jitsi را دقیقاً به‌طور دلخواه خود تغییر دهید و نیازهای خاص پروژه‌تان را برآورده کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”ارتباط با سرویس‌های ثالث از طریق APIهای RESTful و WebSockets” subtitle=”توضیحات کامل”]یکی از قابلیت‌های کلیدی Jitsi توانایی یکپارچه‌سازی با سرویس‌های خارجی برای گسترش عملکرد است. این ارتباط می‌تواند به دو روش اصلی انجام شود:
۱. از طریق APIهای RESTful برای ارتباط همگام
۲. از طریق WebSockets برای ارتباط بلادرنگ (real-time)

در این بخش، نحوه پیاده‌سازی این نوع ارتباط‌ها با سرویس‌های ثالث (مانند سیستم‌های احراز هویت، گزارش‌گیری، هوش مصنوعی، یا ذخیره‌سازی ابری) را به‌صورت کامل و عملی بررسی می‌کنیم.


۱. استفاده از APIهای RESTful برای ارتباط با سرویس‌های خارجی

APIهای RESTful برای تعامل با سرویس‌های خارجی به‌شکل همگام (sync) و سنتی مورد استفاده قرار می‌گیرند. شما می‌توانید داده‌هایی مانند اطلاعات کاربران، تنظیمات نشست، گزارش‌ها و… را از طریق REST APIها ارسال یا دریافت کنید.

نمونه استفاده برای ارسال داده نشست به یک سیستم گزارش‌گیری خارجی:
function sendConferenceData(conferenceData) {
    fetch('https://external-logger.example.com/api/logs', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer your_token_here'
        },
        body: JSON.stringify(conferenceData)
    })
    .then(response => response.json())
    .then(data => {
        console.log('پاسخ سرور گزارش‌گیری:', data);
    })
    .catch(error => {
        console.error('خطا در ارسال داده نشست:', error);
    });
}

// نمونه ارسال داده پس از پایان جلسه
const conferenceData = {
    room: 'myRoom123',
    participants: ['user1', 'user2'],
    duration: 1800
};
sendConferenceData(conferenceData);
مسیر مناسب برای اجرای این کد:

در پروژه Jitsi Meet می‌توانید این کد را در فایل react/features/base/conference/middleware.js و یا در بخشی از app.js قرار دهید تا پس از پایان نشست اجرا شود.


۲. ارتباط بلادرنگ با WebSockets

در شرایطی که نیاز به ارتباط زنده بین Jitsi و سیستم‌های دیگر دارید (مانند دریافت دستورات مدیریتی در لحظه، چت با سیستم‌های هوشمند، یا کنترل ربات‌ها)، استفاده از WebSocket بهترین گزینه است.

نمونه کد برای اتصال Jitsi به یک WebSocket سرور:
const socket = new WebSocket('wss://external-service.example.com/ws');

// اتصال موفق
socket.addEventListener('open', function (event) {
    console.log('اتصال WebSocket برقرار شد');
    socket.send(JSON.stringify({ action: 'joinRoom', room: 'myRoom123' }));
});

// دریافت پیام از سمت سرور
socket.addEventListener('message', function (event) {
    const message = JSON.parse(event.data);
    console.log('پیام دریافتی از سرور:', message);

    if (message.action === 'muteAll') {
        APP.conference.muteAudio();
    }
});

// قطع اتصال
socket.addEventListener('close', function () {
    console.log('اتصال WebSocket قطع شد');
});

// خطا
socket.addEventListener('error', function (error) {
    console.error('خطا در WebSocket:', error);
});
محل مناسب برای درج WebSocket در Jitsi:

این کد می‌تواند در فایل interface_config.js یا در اسکریپت‌های سفارشی داخل body.html قرار گیرد و در لحظه شروع کنفرانس فعال شود.


۳. ترکیب REST و WebSocket برای تعامل ترکیبی

در برخی پروژه‌ها، ترکیب دو روش بالا منجر به طراحی معماری هیبریدی می‌شود. مثلاً برای ارسال داده به سرویس خارجی از REST استفاده شده و دریافت دستورات کنترل از WebSocket انجام می‌شود.

نمونه ترکیبی:
function reportUserActivity(userId, activity) {
    fetch('https://external-api.example.com/user/activity', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, activity })
    });
}

const socket = new WebSocket('wss://external-api.example.com/ws');

socket.addEventListener('message', (event) => {
    const data = JSON.parse(event.data);
    if (data.type === 'kick') {
        APP.conference.kickParticipant(data.participantId);
    }
});

// ثبت فعالیت کاربر
APP.UI.addEventListener('videoMuted', () => {
    reportUserActivity('user123', 'videoMuted');
});

۴. احراز هویت و امنیت ارتباط‌ها

برای ایمن‌سازی ارتباط با سرویس‌های ثالث، باید از روش‌های زیر استفاده شود:

احراز هویت APIها:
  • استفاده از Bearer Token در هدر درخواست‌های REST
  • استفاده از JWT برای ارسال داده‌های امن در WebSocket
نمونه هدر با احراز هویت:
headers: {
    'Authorization': 'Bearer your_api_token',
    'Content-Type': 'application/json'
}
اعتبارسنجی در سمت سرور:

اطمینان حاصل شود که فقط کلاینت‌های مجاز بتوانند به APIها یا WebSocket دسترسی داشته باشند.


۵. کاربردهای عملی اتصال به سرویس‌های ثالث

  • اتصال به سرویس‌های ذخیره‌سازی ابری برای ذخیره چت‌ها، پیام‌ها و ویدئوها
  • ارتباط با CRM برای ثبت فعالیت‌های کاربران
  • اتصال به سیستم هوش مصنوعی برای پردازش گفتار و تشخیص کلمات
  • ارتباط با ربات‌ها یا پنل‌های مدیریتی برای کنترل لحظه‌ای جلسه

جمع‌بندی

امکان برقراری ارتباط با سرویس‌های خارجی از طریق RESTful API و WebSocket در Jitsi قدرت توسعه و یکپارچه‌سازی سیستم را بسیار بالا می‌برد. استفاده از REST برای ارسال اطلاعات ساخت‌یافته و استفاده از WebSocket برای تعامل بلادرنگ، به شما این توانایی را می‌دهد تا Jitsi را به یک پلتفرم کامل و متصل به اکوسیستم‌های سازمانی تبدیل کنید. پیاده‌سازی این ساختار نیازمند رعایت نکات امنیتی و طراحی دقیق معماری است.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 5. توسعه قابلیت‌های اشتراک‌گذاری صفحه (Screen Sharing)”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”توسعه ویژگی‌های پیشرفته اشتراک‌گذاری صفحه” subtitle=”توضیحات کامل”]قابلیت اشتراک‌گذاری صفحه (Screen Sharing) یکی از کلیدی‌ترین امکانات Jitsi است که می‌توان آن را با ویژگی‌های پیشرفته‌تری توسعه داد تا تجربه کاربری بهتری ایجاد شود. در این بخش، روش‌هایی برای توسعه و پیاده‌سازی قابلیت‌های پیشرفته اشتراک‌گذاری صفحه را به‌صورت کاملاً عملی و با جزئیات فنی بررسی می‌کنیم.


۱. افزودن گزینه انتخاب منبع اشتراک‌گذاری (تب مرورگر، پنجره برنامه یا کل صفحه)

Jitsi به‌صورت پیش‌فرض از API داخلی مرورگر برای انتخاب منبع اشتراک‌گذاری استفاده می‌کند. اما شما می‌توانید با ویرایش رابط کاربری یا افزودن پنل تنظیمات، کنترل دقیق‌تری در اختیار کاربر قرار دهید.

مسیر فایل تنظیمات مربوطه:

react/features/toolbox/components/web/ScreenSharingButton.js

نمونه ویرایش برای افزودن انتخابگر نوع منبع:
navigator.mediaDevices.getDisplayMedia({
    video: {
        displaySurface: "window", // مقدارهای دیگر: "monitor", "browser", "application"
        cursor: "always"
    },
    audio: false
}).then(stream => {
    // ارسال استریم به کنفرانس
    APP.conference.replaceTrack(stream.getVideoTracks()[0]);
}).catch(error => {
    console.error('خطا در اشتراک‌گذاری صفحه:', error);
});

۲. اضافه کردن قابلیت “اشتراک‌گذاری فقط یک ناحیه از صفحه”

برای پیاده‌سازی این قابلیت، باید از Canvas و ویژگی crop تصویر استفاده کنید و یک overlay برای انتخاب محدوده روی صفحه ایجاد نمایید. این ویژگی به‌صورت مستقیم توسط API مرورگر پشتیبانی نمی‌شود، ولی می‌توان با ترکیب canvas و stream slicing آن را شبیه‌سازی کرد.

نمونه ترکیبی اولیه با Canvas:
const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });

const video = document.createElement('video');
video.srcObject = screenStream;
video.play();

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

function drawRegion() {
    ctx.drawImage(video, 100, 100, 640, 480, 0, 0, 640, 480);
    requestAnimationFrame(drawRegion);
}
drawRegion();

const croppedStream = canvas.captureStream(30);

این استریم را می‌توان به جای استریم اصلی به کنفرانس ارسال کرد.


۳. افزودن قابلیت نشانه‌گذاری (Annotation) روی صفحه اشتراکی

این ویژگی مخصوص جلسات آموزشی یا جلسات برنامه‌ریزی است. برای پیاده‌سازی آن باید لایه‌ای گرافیکی مانند canvas روی صفحه اضافه شود.

نمونه اولیه پیاده‌سازی:
const annotationCanvas = document.createElement('canvas');
annotationCanvas.width = window.innerWidth;
annotationCanvas.height = window.innerHeight;
annotationCanvas.style.position = 'absolute';
annotationCanvas.style.top = 0;
annotationCanvas.style.left = 0;
annotationCanvas.style.pointerEvents = 'none';
document.body.appendChild(annotationCanvas);

const ctx = annotationCanvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;

function draw(x, y) {
    ctx.lineTo(x, y);
    ctx.stroke();
}

annotationCanvas.addEventListener('mousemove', e => {
    if (e.buttons !== 1) return;
    draw(e.clientX, e.clientY);
});

این لایه را می‌توان با استریم اصلی ترکیب و در ویدیو خروجی نمایش داد.


۴. اضافه‌کردن کنترل دسترسی اشتراک‌گذاری صفحه

می‌توان به‌صورت برنامه‌نویسی، سطح دسترسی برای اشتراک‌گذاری را محدود کرد. مثلاً فقط میزبان (moderator) یا کاربرانی با نقش خاص بتوانند صفحه را به اشتراک بگذارند.

مسیر فایل مربوطه:

react/features/base/participants/functions.js

نمونه بررسی نقش کاربر:
if (!APP.conference.isModerator()) {
    alert('فقط میزبان می‌تواند صفحه را به اشتراک بگذارد');
    return;
}
APP.conference.toggleScreenSharing();

۵. نمایش پیش‌نمایش زنده از محتوای اشتراک‌گذاری‌شده

برای اینکه کاربران دیگر پیش از کلیک روی اشتراک‌گذاری، ببینند که دقیقاً چه چیزی قرار است اشتراک‌گذاری شود، می‌توان یک video element کوچک از استریم پیش‌نمایش را ایجاد کرد.

navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
    const preview = document.createElement('video');
    preview.srcObject = stream;
    preview.autoplay = true;
    preview.style.width = '200px';
    preview.style.height = '150px';
    document.body.appendChild(preview);
});

جمع‌بندی

اشتراک‌گذاری صفحه در Jitsi به‌راحتی قابل گسترش است و می‌توان با استفاده از APIهای مرورگر، WebRTC و canvas ویژگی‌هایی مانند:

  • انتخاب منبع اشتراک‌گذاری
  • اشتراک‌گذاری ناحیه خاص
  • کنترل دسترسی
  • annotation زنده
  • نمایش پیش‌نمایش

را به‌صورت کاملاً سفارشی به آن اضافه کرد. توسعه این ویژگی‌ها باعث افزایش تعامل‌پذیری و کیفیت جلسات خواهد شد، خصوصاً در محیط‌های آموزشی، تیم‌های فنی و سازمان‌های حرفه‌ای.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیمات مربوط به کیفیت اشتراک‌گذاری صفحه” subtitle=”توضیحات کامل”]برای بهینه‌سازی اشتراک‌گذاری صفحه (Screen Sharing) در Jitsi، می‌توان تنظیمات مختلفی برای کنترل کیفیت و مصرف پهنای باند در نظر گرفت. این تنظیمات به‌صورت ترکیبی از پیکربندی در سمت کلاینت (JavaScript) و سرور (config.js یا interface_config.js) انجام می‌شوند. در اين بخش از آموزش های ارائه شده توسط فرازنتورک، تنظیمات مرتبط با کیفیت اشتراک‌گذاری صفحه را بررسی می‌کنیم.


۱. تنظیم وضوح (Resolution) تصویر در اشتراک‌گذاری صفحه

وضوح تصویر یکی از مهم‌ترین عوامل در کیفیت اشتراک‌گذاری است. شما می‌توانید با استفاده از APIهای WebRTC هنگام فراخوانی getDisplayMedia، وضوح مورد نظر را تعریف کنید.

نمونه تنظیم رزولوشن:
const constraints = {
    video: {
        width: { ideal: 1920 },
        height: { ideal: 1080 },
        frameRate: { ideal: 15 }
    },
    audio: false
};

navigator.mediaDevices.getDisplayMedia(constraints).then(stream => {
    // ارسال به کنفرانس
    APP.conference.replaceTrack(stream.getVideoTracks()[0]);
});

۲. کاهش نرخ فریم برای مصرف کمتر پهنای باند

برای اشتراک‌گذاری صفحه که محتوای آن معمولاً ثابت است (مانند اسلاید یا مرورگر)، نرخ فریم پایین‌تر کافی است.

video: {
    frameRate: { max: 10 }
}

نرخ فریم پایین‌تر باعث کاهش مصرف پهنای باند و پردازش CPU می‌شود.


۳. تنظیمات کیفی در فایل config.js

در Jitsi، تنظیمات کیفیت پیش‌فرض و محدودیت‌های پهنای باند در فایل config.js قرار دارد.

مسیر فایل:

/etc/jitsi/meet/your-domain-config.js

تنظیمات مهم:
// پهنای باند برای اشتراک‌گذاری صفحه
desktopSharingFrameRate: {
    min: 5,
    max: 15
},

// محدودیت کیفیت برای کاربران با شبکه ضعیف
constraints: {
    video: {
        height: {
            ideal: 720,
            max: 1080,
            min: 240
        }
    }
},

// فعال‌سازی کیفیت تطبیقی
disableSimulcast: false

۴. استفاده از simulcast برای مدیریت هوشمند کیفیت

Simulcast اجازه می‌دهد که چند نسخه از استریم با کیفیت‌های مختلف ارسال شوند و گیرنده بسته به سرعت شبکه یکی را انتخاب کند. این ویژگی به‌صورت پیش‌فرض فعال است.

مسیر فعال‌سازی:

در فایل config.js:

disableSimulcast: false

۵. نظارت بر کیفیت اشتراک‌گذاری در حین جلسه

می‌توانید با استفاده از API داخلی Jitsi کیفیت اشتراک‌گذاری را در حین جلسه مانیتور کنید و در صورت افت کیفیت، هشدار یا پیشنهاد ارائه دهید.

نمونه بررسی نرخ ارسال:
const videoTrack = APP.conference.getLocalVideoTrack();
const sender = APP.conference._room.rtc.peerConnections[0]
    .getSenders().find(s => s.track === videoTrack);

setInterval(() => {
    sender.getStats().then(stats => {
        stats.forEach(report => {
            if (report.type === 'outbound-rtp' && report.kind === 'video') {
                console.log('بیت‌ریت ارسال:', report.bitrateMean);
            }
        });
    });
}, 5000);

۶. ارائه تنظیمات قابل تغییر به کاربر

شما می‌توانید پنلی در UI ایجاد کنید تا کاربران بتوانند وضوح، نرخ فریم یا حالت مصرف کم پهنای باند را به‌صورت دستی انتخاب کنند.

نمونه رابط:
<select id="screenQuality">
    <option value="low">پایین (480p)</option>
    <option value="medium">متوسط (720p)</option>
    <option value="high">بالا (1080p)</option>
</select>

و در جاوااسکریپت:

const selected = document.getElementById('screenQuality').value;

let width, height;
if (selected === 'low') { width = 640; height = 480; }
else if (selected === 'medium') { width = 1280; height = 720; }
else { width = 1920; height = 1080; }

navigator.mediaDevices.getDisplayMedia({
    video: {
        width: { ideal: width },
        height: { ideal: height },
        frameRate: { ideal: 15 }
    }
});

جمع‌بندی

برای بهینه‌سازی کیفیت اشتراک‌گذاری صفحه در Jitsi، می‌توان از تنظیماتی در چند سطح استفاده کرد:

  • تعریف رزولوشن و نرخ فریم با getDisplayMedia
  • اعمال محدودیت پهنای باند از طریق config.js
  • استفاده از Simulcast برای کیفیت تطبیقی
  • ایجاد پنل تنظیم کیفیت در رابط کاربری
  • مانیتورینگ کیفیت و بیت‌ریت به‌صورت بلادرنگ

این تنظیمات نه‌تنها باعث بهبود تجربه کاربری می‌شوند بلکه به کاهش مصرف منابع در جلسات با کاربران زیاد کمک می‌کنند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”کنترل و مدیریت اشتراک‌گذاری صفحه در جلسات” subtitle=”توضیحات کامل”]در Jitsi، اشتراک‌گذاری صفحه یکی از قابلیت‌های مهم و کاربردی برای ارائه‌ها، جلسات آموزشی و همکاری‌های تصویری است. مدیریت صحیح این ویژگی از سمت میزبان و کاربران باعث حفظ نظم و بهبود کیفیت جلسه می‌شود. در این بخش به روش‌های مختلف برای کنترل و مدیریت اشتراک‌گذاری صفحه در جلسات Jitsi می‌پردازیم.


۱. محدودسازی اشتراک‌گذاری صفحه فقط برای میزبان (Moderator)

برای اینکه فقط افراد خاص (مثلاً میزبان‌ها) اجازه اشتراک‌گذاری صفحه داشته باشند، می‌توان از قابلیت Roles and Permissions در Jitsi استفاده کرد.

مسیر فایل تنظیمات:

/etc/jitsi/meet/your-domain-config.js

تنظیم محدودیت:
disableScreenSharing: false,
startScreenSharing: false,
enableUserRolesBasedOnToken: true
بررسی نقش کاربر در کلاینت:
if (!APP.conference.isModerator()) {
    alert("شما مجاز به اشتراک‌گذاری صفحه نیستید");
    return;
}

۲. توقف اشتراک‌گذاری صفحه توسط میزبان

در صورتی که یک شرکت‌کننده بدون هماهنگی اشتراک‌گذاری را آغاز کند، میزبان می‌تواند آن را متوقف کند.

نمونه کد:
const participantId = someParticipant.getId();

APP.conference.commands.sendCommandOnce(
    'mute-video',
    {
        attributes: { participantId: participantId }
    }
);

نکته: برای توقف اشتراک‌گذاری صفحه، باید video track مربوط به screen share را شناسایی کرده و آن را غیرفعال کنید.


۳. نظارت بر وضعیت اشتراک‌گذاری صفحه توسط API داخلی

Jitsi امکان شنود رویدادهای مربوط به اشتراک‌گذاری صفحه را با استفاده از conference API فراهم کرده است.

مثال:
APP.conference.addConferenceListener(
    JitsiMeetJS.events.conference.TRACK_ADDED,
    track => {
        if (track.getType() === 'video' && track.videoType === 'desktop') {
            console.log('اشتراک‌گذاری صفحه آغاز شد:', track.getParticipantId());
        }
    }
);

APP.conference.addConferenceListener(
    JitsiMeetJS.events.conference.TRACK_REMOVED,
    track => {
        if (track.getType() === 'video' && track.videoType === 'desktop') {
            console.log('اشتراک‌گذاری صفحه متوقف شد:', track.getParticipantId());
        }
    }
);

۴. ایجاد محدودیت زمانی برای اشتراک‌گذاری صفحه

می‌توانید با استفاده از setTimeout یک تایمر برای هر کاربر هنگام شروع اشتراک‌گذاری ایجاد کنید و پس از پایان زمان، اشتراک‌گذاری را به‌صورت خودکار متوقف نمایید.

نمونه:
let screenShareTimer;

APP.conference.addConferenceListener(
    JitsiMeetJS.events.conference.TRACK_ADDED,
    track => {
        if (track.videoType === 'desktop') {
            screenShareTimer = setTimeout(() => {
                track.dispose(); // توقف اشتراک‌گذاری
                alert("مدت زمان اشتراک‌گذاری شما به پایان رسید.");
            }, 300000); // ۵ دقیقه
        }
    }
);

۵. فعال/غیرفعال کردن دکمه اشتراک‌گذاری در رابط کاربری

برای شخصی‌سازی رابط کاربری و جلوگیری از اشتراک‌گذاری بدون مجوز، می‌توانید دکمه Share Screen را پنهان کنید یا هنگام کلیک بررسی مجوز انجام دهید.

مخفی‌سازی در interface_config.js:
TOOLBAR_BUTTONS: [
    'microphone', 'camera', 'chat', // حذف 'desktop'
],

یا به‌صورت داینامیک:

document.querySelector('[aria-label="Share your screen"]').style.display = 'none';

۶. نمایش هشدار هنگام اشتراک‌گذاری صفحه

می‌توانید هنگام شروع اشتراک‌گذاری پیام یا هشدار خاصی به کاربر نمایش دهید تا از وضعیت خود مطلع شود.

APP.conference.addConferenceListener(
    JitsiMeetJS.events.conference.TRACK_ADDED,
    track => {
        if (track.videoType === 'desktop') {
            alert('شما در حال اشتراک‌گذاری صفحه هستید.');
        }
    }
);

جمع‌بندی

برای کنترل و مدیریت اشتراک‌گذاری صفحه در Jitsi، می‌توانید از ابزارهای متنوعی بهره ببرید، از جمله:

  • محدود کردن این قابلیت به میزبان‌ها
  • مانیتورینگ رویدادهای مربوط به screen sharing
  • توقف دستی یا زمان‌دار اشتراک‌گذاری
  • تنظیمات سطح سرور و رابط کاربری
  • ارائه پیام‌های هشدار و اطلاع‌رسانی

این اقدامات به شما کمک می‌کند تا جلسات حرفه‌ای‌تر، امن‌تر و منظم‌تری برگزار کنید. در صورت نیاز می‌توان این کنترل‌ها را در قالب یک پلاگین اختصاصی نیز توسعه داد.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 6. پشتیبانی از زبان‌های مختلف و بین‌المللی‌سازی”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”نحوه افزودن زبان‌های جدید به Jitsi” subtitle=”توضیحات کامل”]Jitsi Meet به‌صورت پیش‌فرض از چندین زبان پشتیبانی می‌کند، اما اگر بخواهید زبان جدیدی اضافه کنید (مثلاً فارسی یا زبان سفارشی سازمانی)، نیاز به ویرایش و اضافه‌کردن فایل‌های زبان در بخش رابط کاربری (frontend) Jitsi دارید. در این بخش مراحل افزودن زبان جدید به Jitsi را به‌صورت عملی و مرحله‌به‌مرحله بررسی می‌کنیم.


۱. کلون کردن مخزن رابط کاربری Jitsi

برای تغییر یا افزودن زبان جدید، ابتدا باید سورس کد رابط کاربری Jitsi Meet را دریافت کنید.

git clone https://github.com/jitsi/jitsi-meet.git
cd jitsi-meet

۲. ایجاد فایل زبان جدید

مسیر فایل‌های زبان:
./lang/

در این مسیر، فایل‌هایی با فرمت main-xx.json وجود دارند که xx کد زبان است (مثل en برای انگلیسی).

برای افزودن زبان جدید مثلاً فارسی:

۱. یک فایل جدید بسازید:

cp lang/main-en.json lang/main-fa.json

۲. سپس فایل main-fa.json را با ترجمه‌های فارسی جایگزین کنید. ساختار فایل به‌صورت کلید-مقدار است:

{
  "app.title": "جلسه آنلاین",
  "toolbar.mute": "قطع صدا",
  "toolbar.shareYourScreen": "اشتراک‌گذاری صفحه‌نمایش",
  ...
}

ترجمه تمام کلیدها را به زبان دلخواه وارد کنید.


۳. ثبت زبان جدید در فایل‌های داخلی

فایل مربوطه:
./react/features/base/i18n/constants.js

در این فایل، زبان جدید را اضافه کنید:

export const LANGUAGES = {
    ...
    fa: {
        label: 'فارسی',
        rtl: true
    },
};

rtl: true برای زبان‌هایی مثل فارسی و عربی استفاده می‌شود تا جهت نوشتار راست‌به‌چپ شود.


۴. تنظیم زبان پیش‌فرض یا انتخاب‌پذیر

مسیر فایل تنظیمات عمومی:
/etc/jitsi/meet/your-domain-config.js

برای تنظیم زبان پیش‌فرض:

defaultLanguage: 'fa',

و اگر می‌خواهید کاربر زبان را به‌صورت دستی انتخاب کند، گزینه انتخاب زبان را در رابط فعال بگذارید.


۵. ساخت مجدد رابط کاربری (کامپایل frontend)

پس از ایجاد فایل زبان و ثبت آن، باید رابط کاربری Jitsi را مجدداً کامپایل کنید.

npm install
make

در پایان، خروجی جدید در مسیر ./build/ ایجاد خواهد شد که می‌توانید آن را روی سرور اصلی (معمولاً /usr/share/jitsi-meet) جایگزین کنید.


۶. آپلود و استفاده روی سرور

برای اعمال تغییرات، فایل‌های ساخته‌شده را با فایل‌های سرور جایگزین کنید:

sudo cp -r ./build/* /usr/share/jitsi-meet/

و سپس Nginx یا سرویس Jitsi را ری‌استارت کنید:

sudo systemctl restart nginx

جمع‌بندی

افزودن زبان جدید به Jitsi شامل مراحل زیر است:

  • ساخت فایل ترجمه جدید در مسیر lang/
  • افزودن زبان به فایل constants.js
  • تعیین زبان پیش‌فرض در config.js
  • ساخت مجدد رابط کاربری با make
  • جایگزینی فایل‌ها روی سرور

با این کار می‌توانید زبان‌های دلخواه (حتی زبان‌های ساختگی یا محلی) را به Jitsi اضافه کرده و تجربه کاربری را برای مخاطبان بومی بهبود دهید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تنظیمات زبان پیش‌فرض و تعویض زبان در رابط کاربری ” subtitle=”توضیحات کامل”]برای مدیریت زبان پیش‌فرض و امکان تعویض زبان توسط کاربران در Jitsi Meet، باید تغییراتی در فایل‌های پیکربندی و رابط کاربری اعمال شود. این تنظیمات هم از طریق فایل‌های سرور انجام می‌شود و هم از طریق JavaScript و React در رابط کاربری.


۱. تعیین زبان پیش‌فرض از طریق فایل پیکربندی

فایل اصلی برای تنظیمات رابط کاربری:

/etc/jitsi/meet/YOUR-DOMAIN-config.js

در این فایل، گزینه‌ی defaultLanguage وجود دارد. برای مثال، برای تنظیم زبان پیش‌فرض به فارسی:

defaultLanguage: 'fa',

توجه: کد زبان باید با فایلی که در مسیر lang/main-xx.json ایجاد شده تطابق داشته باشد.


۲. فعال‌سازی منوی انتخاب زبان در UI

اگر می‌خواهید کاربران بتوانند زبان رابط را به‌صورت دستی انتخاب کنند:

در فایل interfaceConfig.js (اگر استفاده می‌شود) یا در تنظیمات رابط در نسخه‌های جدیدتر Jitsi، گزینه زیر باید فعال باشد:

SHOW_LANGUAGE_SELECTION: true,

در نسخه‌های جدیدتر، این گزینه به فایل config.js منتقل شده یا به‌صورت خودکار در تنظیمات رابط از طریق React مدیریت می‌شود.


۳. افزودن گزینه تعویض زبان در رابط کاربری

در رابط کاربری، کامپوننت انتخاب زبان در منوی پروفایل یا تنظیمات موجود است، اما اگر می‌خواهید آن را شخصی‌سازی کنید، می‌توانید یک کامپوننت React جدید اضافه کنید یا در فایل‌های زیر به‌دنبال کد مربوط بگردید:

./react/features/settings/components/web/LanguageTab.js

در این فایل لیست زبان‌ها و منطق تغییر زبان رابط قرار دارد. لیست زبان‌ها از فایل زیر گرفته می‌شود:

./react/features/base/i18n/constants.js

برای مثال:

export const LANGUAGES = {
    en: { label: 'English', rtl: false },
    fa: { label: 'فارسی', rtl: true },
    ...
};

۴. اعمال تنظیمات زبان برای کل جلسه (در صورت نیاز)

اگر می‌خواهید تمام کاربران هنگام ورود به جلسه زبان خاصی را ببینند (بدون در نظر گرفتن زبان مرورگر)، از گزینه defaultLanguage در تنظیمات سرور استفاده کنید. در غیر این صورت، Jitsi به‌طور پیش‌فرض زبان مرورگر را شناسایی و بارگذاری می‌کند.


۵. تنظیم جهت نوشتار (RTL یا LTR)

در فایل constants.js، برای زبان‌هایی مثل فارسی، باید مقدار rtl: true تنظیم شده باشد:

fa: { label: 'فارسی', rtl: true }

Jitsi به‌صورت خودکار استایل‌های راست‌به‌چپ را برای زبان‌های RTL فعال می‌کند.


جمع‌بندی

  • برای تنظیم زبان پیش‌فرض از defaultLanguage در config.js استفاده می‌شود.
  • فایل‌های ترجمه در مسیر lang/ قرار دارند.
  • با فعال‌سازی گزینه SHOW_LANGUAGE_SELECTION کاربران می‌توانند زبان رابط را تغییر دهند.
  • جهت نوشتار با rtl: true برای زبان‌هایی مانند فارسی تنظیم می‌شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”بین‌المللی‌سازی رابط کاربری با استفاده از فایل‌های زبان ” subtitle=”توضیحات کامل”]بین‌المللی‌سازی (i18n) در Jitsi Meet به‌صورت پیش‌فرض با استفاده از ساختار فایل‌های JSON برای ترجمه رشته‌ها در رابط کاربری انجام می‌شود. این فرایند به شما امکان می‌دهد تا زبان‌های جدیدی اضافه کرده یا ترجمه‌های موجود را اصلاح کنید.


۱. محل فایل‌های زبان

فایل‌های زبان در مسیر زیر قرار دارند:

/usr/share/jitsi-meet/lang/

هر زبان یک فایل مستقل دارد و نام فایل‌ها به‌صورت زیر است:

main-en.json     // انگلیسی
main-fa.json     // فارسی
main-fr.json     // فرانسوی
...

۲. ساختار فایل زبان

فایل‌های JSON شامل جفت کلید-مقدار هستند. هر کلید، نمایانگر یک رشته در رابط کاربری است و مقدار آن ترجمه متنی مربوط به آن کلید است.

مثال از فایل main-fa.json:

{
  "welcomepage.title": "به جلسه خوش آمدید",
  "settings.title": "تنظیمات",
  "toolbar.mute": "قطع صدا",
  "toolbar.video": "قطع ویدیو"
}

برای افزودن ترجمه‌های جدید، باید کلیدهای موجود را به زبان مورد نظر ترجمه کرده و فایل جدیدی با فرمت main-xx.json بسازید.


۳. افزودن زبان جدید

برای افزودن زبان جدید به Jitsi Meet مراحل زیر را دنبال کنید:

۳.۱. ایجاد فایل ترجمه

فایلی به نام main-xx.json بسازید. مثلاً برای زبان کردی:

main-ku.json

و محتوای آن را با ترجمه‌های مناسب پر کنید.

۳.۲. ثبت زبان جدید در Jitsi

در فایل زیر باید زبان جدید ثبت شود:

/usr/share/jitsi-meet/interface_config.js

اگر از نسخه جدید Jitsi استفاده می‌کنید، ممکن است لازم باشد فایل زیر را به‌روزرسانی کنید:

/usr/share/jitsi-meet/libs/app.bundle.min.js   // فقط در صورت نیاز به تغییر frontend باینری‌شده

در نسخه‌های React-based می‌توانید فایل زیر را بررسی و در صورت لزوم زبان جدید را به آن اضافه کنید:

./react/features/base/i18n/constants.js

مثال:

export const LANGUAGES = {
    en: { label: 'English', rtl: false },
    fa: { label: 'فارسی', rtl: true },
    ku: { label: 'کوردی', rtl: true }
};

اگر زبان جدید شما نیاز به نمایش از راست به چپ (RTL) دارد، مقدار rtl را روی true قرار دهید.


۴. تست زبان جدید

پس از ایجاد و ثبت فایل ترجمه، مرورگر را با پارامتر زبان اجرا کنید:

https://your-domain.com/?lang=ku

یا اگر زبان پیش‌فرض را در config.js تنظیم کرده‌اید:

defaultLanguage: 'ku'

۵. ابزارهای ترجمه

برای تسریع ترجمه می‌توانید از ابزارهایی مانند Poedit یا افزونه‌های VSCode برای ویرایش فایل‌های JSON با ساختار ترجمه استفاده کنید.


جمع‌بندی

  • Jitsi از فایل‌های JSON برای بین‌المللی‌سازی رابط کاربری استفاده می‌کند.
  • با ایجاد فایل جدید و ثبت آن در پیکربندی می‌توانید زبان‌های سفارشی اضافه کنید.
  • جهت نوشتار راست‌به‌چپ با گزینه rtl: true فعال می‌شود.
  • تست زبان جدید با پارامتر ?lang= در URL انجام می‌شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”توسعه ویژگی‌های ویژه برای کاربران مختلف در زبان‌های مختلف ” subtitle=”توضیحات کامل”]برای توسعه ویژگی‌هایی که بسته به زبان انتخاب‌شده یا نقش کاربر تغییر می‌کنند، می‌توانید از ترکیب APIهای Jitsi Meet، فایل‌های زبان (i18n) و منطق‌های شرطی مبتنی بر زبان و نقش استفاده کنید. این قابلیت می‌تواند برای نشان دادن پیام‌های خاص، فعال‌سازی دکمه‌ها یا امکانات خاص برای کاربران مختلف بسیار مفید باشد.


۱. دسترسی به زبان فعلی رابط کاربری

در رابط کاربری Jitsi، زبان انتخابی در تنظیمات موجود است و می‌توانید آن را از طریق interfaceConfig یا متغیرهای i18n دریافت کنید.

مثال در React:

import i18next from 'i18next';

const currentLang = i18next.language;

در نسخه‌های غیر React نیز می‌توانید از پارامتر URL استفاده کنید:

const urlParams = new URLSearchParams(window.location.search);
const lang = urlParams.get('lang') || 'en';

۲. شناسایی نقش کاربر (moderator یا participant)

از طریق APIهای Jitsi، می‌توانید نقش کاربران را تشخیص دهید:

api.addEventListener('participantRoleChanged', function(event) {
    console.log('نقش جدید کاربر:', event.role); // 'moderator' یا 'participant'
});

۳. پیاده‌سازی شرط‌های ترکیبی زبان + نقش

مثال: فعال‌سازی یک دکمه خاص فقط برای کاربران فارسی‌زبان که مدیر جلسه هستند:

api.addEventListener('participantRoleChanged', function(event) {
    const currentLang = i18next.language;

    if (event.role === 'moderator' && currentLang === 'fa') {
        showCustomPersianFeature();
    }
});

۴. افزودن ویژگی‌های ویژه به رابط کاربری

می‌توانید بسته به زبان، دکمه‌ها یا امکانات خاصی اضافه کنید.

مثال: افزودن دکمه فقط برای کاربران زبان عربی:

if (i18next.language === 'ar') {
    const toolbar = document.querySelector('.toolbar');

    const specialButton = document.createElement('button');
    specialButton.innerText = 'ميزة خاصة';
    specialButton.onclick = () => {
        alert('تم تفعيل الميزة الخاصة');
    };

    toolbar.appendChild(specialButton);
}

۵. بارگذاری محتوای خاص بر اساس زبان

می‌توانید فایل‌های متفاوت یا داده‌های API خاصی را بسته به زبان بارگذاری کنید:

function loadCustomFeatureData() {
    const lang = i18next.language;

    fetch(`/custom/features_${lang}.json`)
        .then(response => response.json())
        .then(data => {
            // استفاده از داده‌ها برای کاربر فعلی
        });
}

جمع‌بندی

  • با استفاده از i18next.language و participantRoleChanged می‌توانید ویژگی‌هایی را بر اساس زبان و نقش کاربر فعال کنید.
  • می‌توانید رابط کاربری را شرطی بسازید تا فقط برای کاربران خاص، امکاناتی نمایش داده شود.
  • APIهای Jitsi به شما امکان شناسایی نقش و وضعیت کاربر را می‌دهند.
  • امکان بارگذاری داده‌های متفاوت بر اساس زبان کاربر وجود دارد.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 7. افزودن سرویس‌های شخص ثالث (Third-party Integrations)”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”یکپارچه‌سازی Jitsi با سرویس‌هایی مانند Google Meet، Zoom و سایر پلتفرم‌ها” subtitle=”توضیحات کامل”]برای یکپارچه‌سازی Jitsi با سایر پلتفرم‌های ویدئوکنفرانس مانند Google Meet و Zoom، نیاز به پیاده‌سازی یک لایه میانی یا “Bridge” دارید که از طریق APIهای موجود، ارتباط بین سرویس‌ها را مدیریت کند. این یکپارچه‌سازی می‌تواند در سه سطح انجام شود:


۱. یکپارچه‌سازی در سطح دعوت (Scheduling & Join Links)

در این روش، کاربران می‌توانند لینک‌های مربوط به جلسات Jitsi، Zoom یا Google Meet را از یک رابط مرکزی (مثلاً یک پنل مدیریت یا وب‌اپلیکیشن) دریافت کنند. همچنین می‌توان جلسات را از طریق APIهای تقویم مانند Google Calendar تنظیم کرد.

مثال با Google Calendar API:
  • ایجاد جلسه Jitsi و ثبت آن به‌صورت event در Google Calendar:
const event = {
  summary: "جلسه با مشتری",
  description: "لینک جلسه: https://meet.example.com/room123",
  start: {
    dateTime: "2025-04-20T09:00:00+03:30",
    timeZone: "Asia/Tehran"
  },
  end: {
    dateTime: "2025-04-20T10:00:00+03:30",
    timeZone: "Asia/Tehran"
  }
};
gapi.client.calendar.events.insert({
  calendarId: "primary",
  resource: event
});

۲. یکپارچه‌سازی API به API (Backend Integration)

با استفاده از REST APIها و Webhookها، می‌توانید میان Jitsi و سایر سرویس‌ها ارتباط برقرار کنید.

مثال:
  • استفاده از Zoom API برای ساخت یک جلسه Zoom و ذخیره لینک در سیستم مدیریت Jitsi:
POST https://api.zoom.us/v2/users/me/meetings
Headers:
  Authorization: Bearer <zoom_jwt_token>
Body:
  {
    "topic": "Demo Meeting",
    "type": 1
  }
  • ذخیره لینک تولید شده در پایگاه‌داده و ارائه آن در رابط کاربری Jitsi برای کاربران.

۳. یکپارچه‌سازی در سطح رابط کاربری (UI-level Embedding)

می‌توانید iframe یا دکمه‌هایی در رابط کاربری Jitsi اضافه کنید که به Google Meet یا Zoom هدایت می‌شوند، یا حتی جلسات آن‌ها را در Jitsi Embed کنید (در حد نمایش).

مثال: افزودن دکمه‌ای برای پیوستن به جلسه Zoom از داخل Jitsi UI
const zoomButton = document.createElement('button');
zoomButton.innerText = "پیوستن به جلسه Zoom";
zoomButton.onclick = () => {
    window.open("https://zoom.us/j/1234567890", "_blank");
};
document.querySelector('.toolbar').appendChild(zoomButton);

۴. ارسال و دریافت جریان ویدئو از Jitsi به سایر پلتفرم‌ها (پیاده‌سازی پیچیده)

برای اینکار نیاز به پردازش RTMP/RTSP یا WebRTC Bridge دارید. برخی راهکارها:

  • استفاده از Jibri برای استریم خروجی Jitsi به YouTube، Zoom یا پلتفرم‌های دیگر.
  • استفاده از ابزارهای مثل OBS برای ضبط و پخش هم‌زمان در چند پلتفرم.
  • استفاده از Media Server مانند Janus یا mediasoup به عنوان پل ارتباطی میان جریان‌های WebRTC.

جمع‌بندی

  • ساده‌ترین راه، اشتراک لینک‌ها و استفاده از APIهای تقویم یا تماس است.
  • راه‌حل‌های پیشرفته‌تر، شامل توسعه APIهای میانی یا استفاده از Jibri/RTMP است.
  • امکان افزودن دکمه‌ها یا ابزارهای هدایت در UI نیز وجود دارد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”راهنمایی برای افزودن APIهای ارتباطی شخص ثالث به Jitsi” subtitle=”توضیحات کامل”]برای افزودن APIهای ارتباطی شخص ثالث به Jitsi (مثلاً برای ارسال داده‌ها به یک سرور اختصاصی، دریافت وضعیت کاربران، یا ارتباط با سیستم‌های دیگر مانند CRM، پیام‌رسان و…) نیاز به سفارشی‌سازی کلاینت Jitsi و در برخی موارد نیز ماژول‌های سمت سرور دارید.


۱. انتخاب نقطه مناسب برای ارتباط با API

بسته به هدف‌تان، می‌توانید از یکی از نقاط زیر برای افزودن API استفاده کنید:

  • Jitsi Meet Frontend (UI/Client): مناسب برای درخواست‌های ساده مانند ارسال اطلاعات جلسه یا دریافت تنظیمات کاربر.
  • Jitsi Meet Backend یا Prosody: برای اتصال امن‌تر به APIهای شخص ثالث و انجام اعتبارسنجی یا تعامل عمیق‌تر با جلسه.

۲. نمونه: افزودن API شخص ثالث در کلاینت Jitsi

گام اول: ایجاد تابع ارسال درخواست

در فایل plugin.js یا هر پلاگین دلخواه:

async function sendUserDataToAPI(user) {
  try {
    const response = await fetch("https://api.example.com/user-join", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer YOUR_API_TOKEN"
      },
      body: JSON.stringify({
        name: user.displayName,
        email: user.email,
        room: api.getMeetingRoomName()
      })
    });

    const result = await response.json();
    console.log("API response:", result);
  } catch (err) {
    console.error("خطا در اتصال به API:", err);
  }
}
گام دوم: واکشی اطلاعات کاربر و فراخوانی API هنگام ورود
api.addEventListener("videoConferenceJoined", (event) => {
  const userInfo = {
    displayName: event.displayName,
    email: event.email || ""
  };

  sendUserDataToAPI(userInfo);
});

۳. نمونه: ارتباط WebSocket با سرویس شخص ثالث

اگر نیاز دارید اطلاعات بلادرنگ رد و بدل شود:

const ws = new WebSocket("wss://api.example.com/socket");

ws.onopen = () => {
  console.log("ارتباط WebSocket برقرار شد");
  ws.send(JSON.stringify({ type: "join", user: "کاربر۱" }));
};

ws.onmessage = (msg) => {
  const data = JSON.parse(msg.data);
  console.log("پیام دریافتی:", data);
};

api.addEventListener("videoConferenceLeft", () => {
  ws.send(JSON.stringify({ type: "leave", user: "کاربر۱" }));
  ws.close();
});

۴. ارسال اطلاعات به‌صورت دوره‌ای (مثلاً حضور کاربران)

setInterval(() => {
  const participants = api.getParticipantsInfo();

  fetch("https://api.example.com/update-presence", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ participants })
  });
}, 10000); // هر ۱۰ ثانیه یکبار

۵. افزودن دکمه اختصاصی در UI برای ارسال به API

const button = document.createElement("button");
button.innerText = "ارسال گزارش";
button.onclick = () => {
  fetch("https://api.example.com/report", {
    method: "POST",
    body: JSON.stringify({ room: api.getMeetingRoomName() })
  });
};
document.querySelector(".toolbar").appendChild(button);

جمع‌بندی

  • می‌توانید از fetch یا WebSocket برای ارتباط با APIهای شخص ثالث استفاده کنید.
  • نقطه ورود مناسب در Jitsi معمولاً هنگام رویدادهایی مانند videoConferenceJoined یا participantJoined است.
  • امنیت API را با استفاده از توکن یا اعتبارسنجی سمت سرور تضمین کنید.
  • اگر نیاز به تعامل پیچیده‌تر دارید (مثلاً تعامل با LDAP، مانیتورینگ حرفه‌ای، فیلتر کاربر)، لازم است روی Prosody ماژول LUA بنویسید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”توسعه پلاگین‌هایی برای یکپارچه‌سازی با سرویس‌های جانبی ” subtitle=”توضیحات کامل”]برای یکپارچه‌سازی Jitsi با سرویس‌های جانبی مختلف (مانند CRMها، سیستم‌های مدیریت پروژه، پیام‌رسان‌ها، سرویس‌های احراز هویت و…)، توسعه پلاگین‌های سفارشی بهترین روش است. این پلاگین‌ها می‌توانند در جبهه‌های مختلفی مانند ارسال داده‌ها، دریافت اطلاعات، یا تعاملات پیچیده‌تر با دیگر سرویس‌ها عمل کنند.


۱. ساختار کلی یک پلاگین Jitsi

برای ایجاد پلاگین‌های Jitsi باید از APIهای موجود در Jitsi استفاده کرده و آن‌ها را با سرویس‌های جانبی ترکیب کنید. در ادامه، ساختار پایه برای یک پلاگین Jitsi را توضیح می‌دهیم:

مثال ساده از ساختار پلاگین:
class ThirdPartyIntegrationPlugin {
  constructor(api) {
    this.api = api;
  }

  init() {
    this.addIntegrationButton();
  }

  addIntegrationButton() {
    const toolbar = document.querySelector('.toolbar');
    const button = document.createElement('button');
    button.innerText = 'اتصال به سرویس جانبی';
    button.onclick = () => {
      this.connectToExternalService();
    };
    toolbar.appendChild(button);
  }

  async connectToExternalService() {
    try {
      // ارسال اطلاعات به سرویس جانبی
      const response = await fetch('https://api.thirdparty.com/integrate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ room: this.api.getMeetingRoomName() })
      });

      const result = await response.json();
      console.log('نتیجه اتصال به سرویس جانبی:', result);

      // نمایش نتیجه به کاربر
      alert('اتصال به سرویس جانبی موفقیت‌آمیز بود!');
    } catch (error) {
      console.error('خطا در اتصال به سرویس جانبی:', error);
      alert('اتصال به سرویس جانبی با مشکل مواجه شد.');
    }
  }
}

// بارگذاری پلاگین
const plugin = new ThirdPartyIntegrationPlugin(api);
plugin.init();

در این پلاگین:

  • یک دکمه به نوار ابزار Jitsi اضافه می‌شود.
  • هنگام کلیک روی دکمه، اطلاعات جلسه به سرویس جانبی ارسال می‌شود.
  • نتیجه ارسال به کاربر نمایش داده می‌شود.

۲. ایجاد ارتباط با سرویس‌های جانبی مختلف

توسعه پلاگین‌هایی برای یکپارچه‌سازی با سرویس‌های جانبی نیاز به استفاده از APIهای موجود سرویس‌ها دارد. در این بخش، نمونه‌هایی از سرویس‌هایی که ممکن است نیاز به یکپارچه‌سازی با آن‌ها داشته باشید آورده شده است:

الف. یکپارچه‌سازی با سیستم‌های احراز هویت (OAuth)

مثلاً اتصال به Google OAuth برای ورود خودکار کاربران:

async function authenticateWithGoogle() {
  const clientId = 'YOUR_GOOGLE_CLIENT_ID';
  const apiKey = 'YOUR_GOOGLE_API_KEY';

  gapi.load('client:auth2', async () => {
    await gapi.auth2.init({ client_id: clientId });
    const authInstance = gapi.auth2.getAuthInstance();
    
    try {
      const user = await authInstance.signIn();
      const userInfo = {
        name: user.getBasicProfile().getName(),
        email: user.getBasicProfile().getEmail()
      };
      console.log('کاربر وارد شده:', userInfo);
    } catch (err) {
      console.error('خطا در ورود به Google:', err);
    }
  });
}
ب. یکپارچه‌سازی با سرویس‌های پیام‌رسان مانند Slack

می‌توانید داده‌های جلسات را به Slack ارسال کنید:

async function sendToSlack(message) {
  const slackWebhookUrl = 'https://hooks.slack.com/services/YOUR/SLACK/WEBHOOK';
  
  try {
    const response = await fetch(slackWebhookUrl, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text: message })
    });

    if (response.ok) {
      console.log('پیام به Slack ارسال شد');
    } else {
      console.error('خطا در ارسال پیام به Slack');
    }
  } catch (err) {
    console.error('خطا در ارسال به Slack:', err);
  }
}

۳. یکپارچه‌سازی با سیستم‌های مدیریت پروژه (CRM, Project Management)

برای مثال، ارسال داده‌های جلسات به یک سیستم مدیریت پروژه مانند Trello یا Asana:

async function createTrelloCard(meetingDetails) {
  const trelloApiUrl = 'https://api.trello.com/1/cards';
  const apiKey = 'YOUR_TRELLO_API_KEY';
  const apiToken = 'YOUR_TRELLO_API_TOKEN';
  
  const response = await fetch(`${trelloApiUrl}?key=${apiKey}&token=${apiToken}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: `جلسه با ${meetingDetails.name}`,
      desc: `جزئیات جلسه: ${meetingDetails.description}`,
      idList: 'YOUR_LIST_ID'
    })
  });

  const result = await response.json();
  console.log('کارت Trello ایجاد شد:', result);
}

۴. افزودن ویژگی‌های پیشرفته برای یکپارچه‌سازی (مثل نظارت بر جلسات یا مانیتورینگ)

برای توسعه ویژگی‌های پیشرفته‌تر، می‌توانید از WebSocket یا RESTful API برای دریافت اطلاعات بلادرنگ و مانیتورینگ وضعیت جلسه استفاده کنید.

مثال: مانیتورینگ تعداد شرکت‌کنندگان به‌صورت بلادرنگ:
setInterval(() => {
  const participantsCount = api.getParticipantsCount();
  console.log('تعداد شرکت‌کنندگان:', participantsCount);
  
  // ارسال تعداد شرکت‌کنندگان به سرویس شخص ثالث
  fetch('https://api.thirdparty.com/monitor', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ participantsCount })
  });
}, 10000); // هر ۱۰ ثانیه یک‌بار

جمع‌بندی

  • پلاگین‌های Jitsi می‌توانند به‌راحتی با سرویس‌های جانبی مختلف از جمله سیستم‌های احراز هویت، پیام‌رسان‌ها، و سیستم‌های مدیریت پروژه یکپارچه شوند.
  • برای ارتباط با این سرویس‌ها، می‌توانید از fetch، WebSocket یا APIهای مخصوص سرویس‌های جانبی استفاده کنید.
  • پلاگین‌ها می‌توانند ویژگی‌های مختلفی مانند ارسال داده به Slack، مدیریت جلسه در Google Calendar، یا یکپارچه‌سازی با سیستم‌های مدیریت پروژه مانند Trello را ارائه دهند.
  • توسعه این پلاگین‌ها باید به‌صورت ماژولار و امن صورت گیرد تا از آسیب‌پذیری‌های احتمالی جلوگیری شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”پیاده‌سازی سرویس‌های ذخیره‌سازی ابری مانند Dropbox برای اشتراک‌گذاری فایل‌ها در جلسات ” subtitle=”توضیحات کامل”]برای افزودن قابلیت اشتراک‌گذاری فایل‌ها در جلسات Jitsi از طریق سرویس‌های ذخیره‌سازی ابری مانند Dropbox، باید یکپارچه‌سازی این سرویس‌ها را در سیستم Jitsi انجام دهید. این یکپارچه‌سازی به کاربران اجازه می‌دهد که فایل‌ها را مستقیماً از فضای ذخیره‌سازی ابری خود (مثل Dropbox) در حین برگزاری جلسات به اشتراک بگذارند.


مراحل پیاده‌سازی

برای پیاده‌سازی اشتراک‌گذاری فایل‌ها از Dropbox در Jitsi، باید مراحل زیر را طی کنیم:

  1. ایجاد و پیکربندی یک API کلید برای Dropbox
  2. ایجاد پلاگین Jitsi برای تعامل با Dropbox
  3. تعامل با APIهای Dropbox برای بارگذاری و دریافت فایل‌ها
  4. افزودن ویژگی اشتراک‌گذاری فایل‌ها در رابط کاربری Jitsi

۱. ایجاد و پیکربندی یک API کلید برای Dropbox

قبل از شروع، باید یک API کلید از Dropbox برای دسترسی به حساب‌های Dropbox کاربران و عملیات مرتبط با فایل‌ها دریافت کنید.

برای دریافت کلید API از Dropbox:

  1. به Dropbox Developer بروید.
  2. وارد حساب کاربری خود شوید و به صفحه App Console بروید.
  3. یک اپلیکیشن جدید ایجاد کرده و Scoped Access را انتخاب کنید.
  4. پس از ایجاد اپلیکیشن، کلید API و توکن دسترسی را از قسمت OAuth 2 دریافت کنید.

۲. ایجاد پلاگین Jitsi برای تعامل با Dropbox

در این مرحله، باید یک پلاگین برای Jitsi ایجاد کنیم که بتواند به API Dropbox متصل شود و فایل‌ها را بارگذاری و دریافت کند.

کد پلاگین برای اتصال به Dropbox:
class DropboxFileSharingPlugin {
  constructor(api) {
    this.api = api;
    this.dropboxAccessToken = 'YOUR_DROPBOX_ACCESS_TOKEN'; // توکن دسترسی Dropbox
  }

  init() {
    this.addDropboxButton();
  }

  // افزودن دکمه به نوار ابزار
  addDropboxButton() {
    const toolbar = document.querySelector('.toolbar');
    const button = document.createElement('button');
    
    button.innerText = 'اشتراک‌گذاری فایل از Dropbox';
    button.onclick = () => this.openDropboxFilePicker();
    
    toolbar.appendChild(button);
  }

  // باز کردن پنجره انتخاب فایل Dropbox
  openDropboxFilePicker() {
    const dropboxUrl = `https://www.dropbox.com/oauth2/authorize?
      client_id=YOUR_CLIENT_ID&
      response_type=token&
      redirect_uri=YOUR_REDIRECT_URI`;

    window.open(dropboxUrl, '_blank', 'width=800,height=600');
    
    // پس از انتخاب فایل از Dropbox، توکن را دریافت کرده و فایل را بارگذاری کنید
    this.fetchDropboxFile();
  }

  // دریافت فایل از Dropbox
  async fetchDropboxFile() {
    const filePath = '/path/to/file'; // مسیر فایل انتخاب‌شده از Dropbox
    const dropboxApiUrl = `https://api.dropboxapi.com/2/files/download`;

    const response = await fetch(dropboxApiUrl, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${this.dropboxAccessToken}`,
        'Dropbox-API-Arg': JSON.stringify({ path: filePath }),
      }
    });

    if (response.ok) {
      const blob = await response.blob();
      const file = new File([blob], 'file-from-dropbox');
      this.uploadFileToJitsi(file);
    } else {
      console.error('خطا در دریافت فایل از Dropbox');
    }
  }

  // بارگذاری فایل به جلسه Jitsi
  uploadFileToJitsi(file) {
    const room = this.api.getMeetingRoomName();
    // کد برای بارگذاری فایل به Jitsi و اشتراک‌گذاری آن در جلسه
    console.log('فایل بارگذاری شد:', file);
  }
}

// بارگذاری پلاگین
const dropboxPlugin = new DropboxFileSharingPlugin(api);
dropboxPlugin.init();

در این کد:

  • به Dropbox متصل می‌شویم تا فایل‌ها را از آن دریافت کنیم.
  • پس از دریافت فایل، آن را به جلسه Jitsi آپلود کرده و در جلسات به اشتراک می‌گذاریم.
  • از توکن دسترسی Bearer برای احراز هویت استفاده می‌کنیم.

۳. تعامل با APIهای Dropbox برای بارگذاری و دریافت فایل‌ها

برای تعامل با Dropbox از APIهای آن استفاده می‌کنیم. این APIها به شما این امکان را می‌دهند که فایل‌ها را از Dropbox بارگذاری و دریافت کنید.

ارسال فایل به Dropbox (آپلود فایل):

برای ارسال فایل به Dropbox از متد files/upload استفاده می‌کنیم:

async function uploadFileToDropbox(file) {
  const dropboxApiUrl = 'https://content.dropboxapi.com/2/files/upload';
  const headers = {
    'Authorization': `Bearer ${this.dropboxAccessToken}`,
    'Content-Type': 'application/octet-stream',
    'Dropbox-API-Arg': JSON.stringify({
      path: `/apps/your-app/${file.name}`,
      mode: 'add',
      autorename: true,
      mute: false,
    }),
  };

  const response = await fetch(dropboxApiUrl, {
    method: 'POST',
    headers: headers,
    body: file,
  });

  if (response.ok) {
    const result = await response.json();
    console.log('فایل با موفقیت به Dropbox آپلود شد:', result);
  } else {
    console.error('خطا در آپلود فایل به Dropbox');
  }
}

دریافت فایل از Dropbox (دانلود فایل):

برای دریافت فایل از Dropbox از متد files/download استفاده می‌کنیم:

async function downloadFileFromDropbox(filePath) {
  const dropboxApiUrl = 'https://api.dropboxapi.com/2/files/download';
  const response = await fetch(dropboxApiUrl, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${this.dropboxAccessToken}`,
      'Dropbox-API-Arg': JSON.stringify({ path: filePath }),
    },
  });

  if (response.ok) {
    const blob = await response.blob();
    const file = new File([blob], 'downloaded-file');
    console.log('فایل دریافت شد:', file);
  } else {
    console.error('خطا در دریافت فایل از Dropbox');
  }
}

۴. افزودن ویژگی اشتراک‌گذاری فایل‌ها در رابط کاربری Jitsi

پس از افزودن پلاگین به Jitsi، باید ویژگی‌های اشتراک‌گذاری فایل را به رابط کاربری اضافه کنیم تا کاربران بتوانند فایل‌ها را به‌راحتی از Dropbox انتخاب کرده و در جلسات به اشتراک بگذارند.

برای این منظور، باید دکمه‌ای برای باز کردن پنجره انتخاب فایل از Dropbox و سپس نمایش فایل‌های انتخاب‌شده به کاربران اضافه کنیم.


جمع‌بندی

  • با استفاده از APIهای Dropbox می‌توان به‌راحتی فایل‌ها را از حساب‌های Dropbox دریافت و در جلسات Jitsi به اشتراک گذاشت.
  • برای اتصال به Dropbox، از توکن دسترسی OAuth 2.0 استفاده می‌شود.
  • پلاگین‌هایی که برای Jitsi توسعه می‌دهید می‌توانند امکان انتخاب و بارگذاری فایل‌ها از Dropbox و دیگر سرویس‌های ذخیره‌سازی ابری را به رابط کاربری Jitsi اضافه کنند.
  • برای بارگذاری یا دریافت فایل از Dropbox، می‌توان از متدهای files/upload و files/download استفاده کرد.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 8. پیکربندی و سفارشی‌سازی رابط کاربری”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”تغییرات در طراحی و ظاهر رابط کاربری با استفاده از CSS و HTML” subtitle=”توضیحات کامل”]برای بهبود طراحی و ظاهر رابط کاربری Jitsi، استفاده از CSS و HTML یکی از مؤثرترین روش‌ها است. با سفارشی‌سازی این فایل‌ها می‌توان ظاهر جلسات و اجزای مختلف رابط کاربری مانند نوار ابزار، پنجره‌های گفت‌وگو، دکمه‌ها و حتی رنگ‌بندی‌ها را تغییر داد. در این بخش، به شرح نحوه‌ی اعمال تغییرات در ظاهر رابط کاربری با استفاده از CSS و HTML می‌پردازیم.

مقدمه

Jitsi Meet به‌طور پیش‌فرض دارای یک رابط کاربری مینیمالیستی و ساده است، اما بسیاری از سازمان‌ها و شرکت‌ها نیاز به شخصی‌سازی این رابط دارند تا با برند و نیازهای خاص خود سازگار شود. با استفاده از HTML و CSS، می‌توانید به‌راحتی ظاهر رابط کاربری را تغییر دهید. برای این کار، فایل‌های مربوط به CSS و HTML در داخل دایرکتوری‌های مختلف قرار دارند که برای ویرایش آنها نیاز به دانش کافی از ساختار و کلاس‌های CSS خواهید داشت.

در ادامه، نحوه‌ی اعمال تغییرات در ظاهر رابط کاربری Jitsi را با استفاده از CSS و HTML شرح می‌دهیم.


۱. ویرایش CSS برای تغییر استایل‌ها

در ابتدا، باید فایل‌های CSS را ویرایش کنید. این فایل‌ها مسئول ظاهر نهایی تمام عناصر رابط کاربری هستند. مسیر فایل‌های CSS به‌طور پیش‌فرض در دایرکتوری css/ قرار دارند.

۱.۱. تغییر رنگ‌ها و فونت‌ها

برای تغییر رنگ‌ها و فونت‌ها، به‌ویژه برای متن‌ها، پس‌زمینه‌ها، و دکمه‌ها، می‌توانید به فایل‌های CSS ویرایشی دهید. برای مثال، در صورتی که بخواهید رنگ پس‌زمینه نوار ابزار را تغییر دهید یا فونت دکمه‌ها را سفارشی کنید، می‌توانید این کار را به این صورت انجام دهید:

/* تغییر رنگ پس‌زمینه نوار ابزار */
.toolbar {
    background-color: #2E3B4E; /* رنگ جدید */
}

/* تغییر رنگ دکمه‌ها */
button {
    background-color: #4CAF50; /* رنگ سبز */
    color: white;
    border-radius: 5px;
    padding: 10px;
}

/* تغییر فونت کلی سایت */
body {
    font-family: 'Arial', sans-serif; /* استفاده از فونت Arial */
}

مسیر فایل: css/
فایل: main.css

۱.۲. تغییر استایل نوار ابزار

اگر بخواهید نوار ابزار را به شکلی متفاوت نمایش دهید، می‌توانید از استایل‌های زیر استفاده کنید:

/* تغییر استایل نوار ابزار */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #1d1f26;
}

۲. تغییرات در HTML برای ساختار و عناصر جدید

برای ایجاد تغییرات ساختاری، مانند افزودن یا حذف اجزای خاص از رابط کاربری، می‌توانید در فایل‌های HTML تغییراتی اعمال کنید. به‌طور پیش‌فرض، HTML اصلی در دایرکتوری react/features/ قرار دارد و فایل‌های مختلف برای بخش‌های مختلف رابط کاربری وجود دارد.

۲.۱. افزودن دکمه جدید در نوار ابزار

اگر بخواهید یک دکمه جدید به نوار ابزار اضافه کنید، می‌توانید به فایل HTML مربوطه مراجعه کرده و کد زیر را برای افزودن دکمه در نوار ابزار قرار دهید:

<button class="new-button">
    دکمه جدید
</button>

در فایل CSS مربوطه، می‌توانید استایل‌هایی برای این دکمه جدید تعریف کنید:

/* استایل دکمه جدید */
.new-button {
    background-color: #FF5733;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

۳. سفارشی‌سازی ویژگی‌های پنجره‌ها و دیالوگ‌ها

اگر بخواهید پنجره‌های دیالوگ یا پیام‌ها را به‌صورت سفارشی طراحی کنید، می‌توانید از CSS برای کنترل ظاهر آنها استفاده کنید. مثلاً برای تغییر ظاهر پنجره چت یا پنجره تنظیمات:

/* استایل پنجره چت */
.chat-dialog {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
}

۴. بارگذاری فایل‌های CSS سفارشی در Jitsi

در نهایت، برای اعمال تغییرات خود در Jitsi، می‌بایست فایل‌های CSS سفارشی را به پروژه اضافه کنید. این کار از طریق ویرایش فایل‌های مربوط به پیکربندی در دایرکتوری config.js انجام می‌شود. به‌طور مثال، اگر بخواهید فایل CSS جدید خود را بارگذاری کنید، این کد را در فایل پیکربندی خود اضافه کنید:

// بارگذاری فایل CSS سفارشی
import './css/custom-style.css';

جمع‌بندی

تغییرات در طراحی و ظاهر رابط کاربری Jitsi با استفاده از HTML و CSS، فرآیندی است که از طریق ویرایش فایل‌های CSS برای استایل‌دهی و تغییر ساختار HTML برای افزودن یا حذف اجزاء انجام می‌شود. با استفاده از این روش‌ها می‌توانید رابط کاربری خود را به‌طور کامل سفارشی کنید و مطابق با نیازهای سازمان یا برند خود، آن را تغییر دهید. اعمال این تغییرات در کنار بهینه‌سازی ظاهر، به شما این امکان را می‌دهد تا تجربه کاربری بهتری برای کاربران خود فراهم کنید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”کار با فایل‌های config.js و interface_config.js برای تغییرات در رابط کاربری Jitsi” subtitle=”توضیحات کامل”]برای شخصی‌سازی و انجام تغییرات در رابط کاربری Jitsi، می‌توانید از دو فایل اصلی پیکربندی به نام‌های config.js و interface_config.js استفاده کنید. این فایل‌ها به شما این امکان را می‌دهند که تنظیمات پیشرفته‌ای برای تنظیمات عمومی و رابط کاربری Jitsi انجام دهید.

Jitsi برای تنظیمات کلی و پیکربندی رابط کاربری، از این دو فایل استفاده می‌کند:

  1. config.js: برای تنظیمات عمومی و پیکربندی‌های سطح بالاتر مانند تنظیمات سرور و رفتارهای عمومی.
  2. interface_config.js: برای سفارشی‌سازی دقیق‌تر رابط کاربری، مانند فعال‌سازی یا غیرفعال‌سازی دکمه‌ها، تغییر ظاهر نوار ابزار، تنظیمات رنگ و سایر اجزای رابط کاربری.

در این بخش، نحوه‌ی تغییر و سفارشی‌سازی رابط کاربری Jitsi با استفاده از این دو فایل توضیح داده خواهد شد.


۱. فایل config.js

فایل config.js برای تنظیمات عمومی و رفتارهای سطح بالای Jitsi استفاده می‌شود. این فایل شامل پیکربندی‌هایی است که به تنظیمات سرور، پروتکل‌ها، ویژگی‌ها و سایر گزینه‌های عمومی مرتبط با جلسات Jitsi مربوط می‌شود.

۱.۱. تغییر تنظیمات سرور

برای تنظیم URLهای سرور و پیکربندی‌های مربوط به آن، می‌توانید از تنظیمات موجود در فایل config.js استفاده کنید. به‌طور مثال:

// تنظیم URLهای سرور
var config = {
    hosts: {
        domain: 'meet.jit.si',
        muc: 'conference.meet.jit.si',
        focus: 'focus.meet.jit.si',
    },
    bosh: '//meet.jit.si/http-bind', // BOSH URL
    clientNode: 'http://jitsi.org/jitsimeet',
};

این تنظیمات به شما امکان می‌دهند تا دامنه و آدرس‌های مختلف مربوط به سرور را تنظیم کنید.

۱.۲. تنظیمات ویژگی‌ها

در این فایل، می‌توانید ویژگی‌های مختلفی مانند فعال‌سازی و غیرفعال‌سازی ضبط جلسات، استفاده از رمزگذاری و سایر تنظیمات را پیکربندی کنید:

// فعال‌سازی ضبط جلسات
config.enableRecording = true;

// تنظیمات رمزگذاری
config.enableRtpStats = true;
config.enableP2P = true;
۱.۳. تنظیمات مربوط به رابط کاربری و تجربه کاربری

برای شخصی‌سازی رفتارهای رابط کاربری مانند نحوه ورود به جلسه، نام کاربری پیش‌فرض، و نحوه اتصال کاربران به جلسات، می‌توانید این تنظیمات را در config.js تنظیم کنید:

// تنظیمات ورود به جلسه
config.defaultRemoteDisplayName = 'عضو ناشناس';

// تنظیمات اتوماتیک ورود به جلسه
config.autoJoinRoom = 'true';

۲. فایل interface_config.js

فایل interface_config.js برای تنظیمات دقیق‌تر رابط کاربری و رفتارهای بصری استفاده می‌شود. این فایل به شما این امکان را می‌دهد که اجزای مختلف رابط کاربری مانند دکمه‌ها، منوها، نوار ابزار، رنگ‌ها و سایر بخش‌های قابل مشاهده را سفارشی‌سازی کنید.

۲.۱. تنظیمات نوار ابزار و دکمه‌ها

برای تغییرات در نوار ابزار و دکمه‌ها، می‌توانید از تنظیمات زیر استفاده کنید:

// غیرفعال‌سازی دکمه‌های خاص
var interfaceConfig = {
    TOOLBAR_BUTTONS: [
        'microphone', 'camera', 'fullscreen', 'fodeviceselection',
        'hangup', 'profile', 'chat', 'recording', 'livestreaming', 'sharedvideo',
        'settings', 'raisehand', 'videoquality', 'filmstrip', 'invite', 'feedback'
    ],
    SHOW_JITSI_WATERMARK: false, // مخفی کردن لوگوی Jitsi
    SHOW_WATERMARK_FOR_GUESTS: false, // مخفی کردن لوگو برای مهمان‌ها
};

در اینجا شما می‌توانید دکمه‌هایی که می‌خواهید در نوار ابزار نمایش داده شوند یا نمایش داده نشوند را تنظیم کنید.

۲.۲. تغییرات در طراحی و ظاهر

برای تغییرات در طراحی و رنگ‌ها، می‌توانید تنظیمات زیر را در این فایل پیکربندی کنید:

// تنظیم رنگ پس‌زمینه
interfaceConfig.SETTINGS_SECTIONS = ['general', 'audio', 'video', 'devices', 'advanced'];

interfaceConfig.BACKGROUND_COLOR = '#FF5733'; // رنگ پس‌زمینه جدید
interfaceConfig.THEME_COLOR = '#1d1f26'; // رنگ تم
۲.۳. تنظیمات چت و فیدبک‌ها

اگر بخواهید تنظیمات چت را تغییر دهید یا گزینه‌های فیدبک را فعال کنید، می‌توانید این گزینه‌ها را به‌صورت زیر سفارشی کنید:

// فعال‌سازی فیدبک‌ها
interfaceConfig.FEEDBACK_DISABLED = false;

// تغییر تنظیمات چت
interfaceConfig.DISABLE_FOCUS = true; // غیرفعال کردن بخش فوکوس

۳. بارگذاری تغییرات

پس از ویرایش فایل‌های config.js و interface_config.js، برای اعمال تغییرات، باید سرور Jitsi خود را مجدداً راه‌اندازی کنید. این تغییرات به طور خودکار در رابط کاربری اعمال خواهند شد.

جمع‌بندی

با استفاده از فایل‌های config.js و interface_config.js، شما می‌توانید تنظیمات عمومی و رابط کاربری Jitsi را به‌طور گسترده‌ای سفارشی‌سازی کنید. این امکان به شما اجازه می‌دهد تا رفتارها، ویژگی‌ها و ظاهر رابط کاربری را مطابق با نیازهای خاص خود تغییر دهید. اعمال تغییرات در این فایل‌ها می‌تواند باعث بهبود تجربه کاربری و افزایش بهره‌وری جلسات آنلاین شما شود.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”اضافه کردن دکمه‌ها و ویجت‌های سفارشی در نوار ابزار ” subtitle=”توضیحات کامل”]در Jitsi Meet، نوار ابزار (Toolbar) یک قسمت کلیدی از رابط کاربری است که شامل دکمه‌ها و ویجت‌های مختلفی برای تعامل با جلسات می‌باشد. اگر بخواهید دکمه‌ها یا ویجت‌های سفارشی به نوار ابزار اضافه کنید، می‌توانید از API های داخلی Jitsi برای انجام این کار استفاده کنید. این کار معمولاً از طریق پلاگین‌ها و اسکریپت‌های جاوااسکریپت انجام می‌شود.

در این بخش، نحوه اضافه کردن دکمه‌ها و ویجت‌های سفارشی به نوار ابزار را توضیح می‌دهیم.


۱. ساختار کلی اضافه کردن دکمه‌ها و ویجت‌های سفارشی

برای اضافه کردن دکمه یا ویجت سفارشی به نوار ابزار Jitsi، می‌توانید از کد زیر استفاده کنید:

۱.۱. ایجاد یک کلاس پلاگین

ابتدا یک کلاس پلاگین ایجاد کنید که به API Jitsi متصل شود و دکمه‌ها یا ویجت‌های سفارشی را به نوار ابزار اضافه کند.

class CustomToolbarPlugin {
    constructor(api) {
        this.api = api;
    }

    init() {
        this.addCustomButton(); // فراخوانی متد برای اضافه کردن دکمه سفارشی
    }

    // افزودن دکمه سفارشی به نوار ابزار
    addCustomButton() {
        const toolbar = document.querySelector('.toolbar');  // نوار ابزار Jitsi
        const button = document.createElement('button');
        button.innerText = 'دکمه سفارشی';  // متن دکمه

        button.onclick = () => {
            alert('دکمه سفارشی فشار داده شد');
        };

        // اضافه کردن دکمه به نوار ابزار
        toolbar.appendChild(button);
    }
}

// بارگذاری پلاگین
const customPlugin = new CustomToolbarPlugin(api);
customPlugin.init();

در این کد، یک دکمه با متن “دکمه سفارشی” به نوار ابزار اضافه شده است. هنگام کلیک بر روی دکمه، یک پیام به نمایش درمی‌آید.

۱.۲. اضافه کردن ویجت سفارشی به نوار ابزار

برای اضافه کردن ویجت‌های سفارشی مانند چک‌باکس، فیلد متنی یا دکمه‌های پیچیده‌تر، می‌توانید از کد زیر استفاده کنید:

class CustomWidgetPlugin {
    constructor(api) {
        this.api = api;
    }

    init() {
        this.addCustomWidget();  // فراخوانی متد برای اضافه کردن ویجت سفارشی
    }

    // افزودن ویجت سفارشی به نوار ابزار
    addCustomWidget() {
        const toolbar = document.querySelector('.toolbar');  // نوار ابزار Jitsi
        const widgetContainer = document.createElement('div');
        widgetContainer.classList.add('custom-widget');

        // افزودن چک‌باکس به ویجت
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.id = 'customCheckbox';
        const label = document.createElement('label');
        label.innerText = 'فعال‌سازی ویژگی جدید';

        widgetContainer.appendChild(checkbox);
        widgetContainer.appendChild(label);

        // اضافه کردن ویجت به نوار ابزار
        toolbar.appendChild(widgetContainer);

        checkbox.addEventListener('change', () => {
            if (checkbox.checked) {
                console.log('ویژگی جدید فعال شد');
            } else {
                console.log('ویژگی جدید غیرفعال شد');
            }
        });
    }
}

// بارگذاری پلاگین
const customWidgetPlugin = new CustomWidgetPlugin(api);
customWidgetPlugin.init();

در این کد، یک ویجت با یک چک‌باکس به نوار ابزار اضافه می‌شود که کاربر می‌تواند ویژگی جدید را فعال یا غیرفعال کند. هنگام تغییر وضعیت چک‌باکس، پیامی در کنسول ثبت می‌شود.


۲. شخصی‌سازی دکمه‌ها و ویجت‌ها

برای سفارشی‌سازی بیشتر دکمه‌ها و ویجت‌ها، می‌توانید از CSS برای تغییر ظاهر آن‌ها استفاده کنید. به‌عنوان مثال:

۲.۱. تغییرات ظاهری با استفاده از CSS

می‌توانید استایل‌های دلخواه را به دکمه‌ها و ویجت‌ها اعمال کنید تا ظاهر آن‌ها متناسب با نیاز شما باشد. برای این منظور، از CSS می‌توانید به‌طور مستقیم در پلاگین استفاده کنید:

/* تغییر استایل دکمه‌ها */
.custom-widget button {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
    padding: 10px;
}

.custom-widget input[type="checkbox"] {
    margin-right: 5px;
}

این استایل‌ها به دکمه‌ها و چک‌باکس‌های اضافه‌شده ظاهر بهتری می‌دهند.


۳. استفاده از API Jitsi برای تعاملات بیشتر

اگر بخواهید دکمه‌ها و ویجت‌های سفارشی به‌طور فعال با سایر ویژگی‌های Jitsi تعامل داشته باشند، می‌توانید از API Jitsi برای انجام این کار استفاده کنید. به‌عنوان مثال، اگر بخواهید هنگام کلیک روی دکمه سفارشی، ویژگی خاصی را فعال یا غیرفعال کنید، می‌توانید از متدهای API برای این کار بهره‌برداری کنید.

// افزودن دکمه برای خاموش/روشن کردن میکروفون
button.onclick = () => {
    const isMuted = this.api.isMuted();
    if (isMuted) {
        this.api.unmute();
    } else {
        this.api.mute();
    }
};

این کد میکروفون کاربر را خاموش و روشن می‌کند.


جمع‌بندی

با استفاده از پلاگین‌ها و API Jitsi، شما می‌توانید دکمه‌ها و ویجت‌های سفارشی را به راحتی به نوار ابزار Jitsi اضافه کنید. این کار به شما این امکان را می‌دهد که ویژگی‌های خاص خود را پیاده‌سازی کنید و تجربه کاربری سفارشی‌تری ارائه دهید. همچنین، با استفاده از CSS می‌توانید ظاهر این دکمه‌ها و ویجت‌ها را تغییر دهید و آن‌ها را با طراحی کلی رابط کاربری هم‌خوانی دهید.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”سفارشی‌سازی صفحه خوش‌آمدگویی و صفحات پیش‌فرض دیگر” subtitle=”توضیحات کامل”]در Jitsi Meet، صفحات پیش‌فرض مانند صفحه خوش‌آمدگویی، صفحه ورود، و سایر صفحات رابط کاربری قابل سفارشی‌سازی هستند. این قابلیت به شما این امکان را می‌دهد که تجربه کاربری خاصی برای پلتفرم خود ایجاد کنید و آن را مطابق با نیازهای برند یا سازمان خود تنظیم کنید.

در این بخش، نحوه سفارشی‌سازی صفحه خوش‌آمدگویی و دیگر صفحات پیش‌فرض Jitsi را بررسی می‌کنیم.


۱. سفارشی‌سازی صفحه خوش‌آمدگویی (Welcome Page)

صفحه خوش‌آمدگویی Jitsi یکی از اولین صفحاتی است که کاربران هنگام وارد شدن به یک جلسه مشاهده می‌کنند. این صفحه معمولاً شامل اطلاعات جلسه، دکمه‌های ورود و ثبت‌نام و گاهی اوقات گزینه‌های اضافی است. برای سفارشی‌سازی این صفحه، از فایل‌های index.html و CSS استفاده می‌کنیم.

۱.۱. تغییر محتوای HTML صفحه خوش‌آمدگویی

برای تغییر محتوای HTML صفحه خوش‌آمدگویی، باید فایل index.html را در پوشه پروژه Jitsi خود پیدا کنید. سپس می‌توانید تغییرات دلخواه را انجام دهید. به‌عنوان مثال:

<div class="welcome-container">
    <h1>خوش‌آمدید به جلسه ما!</h1>
    <p>برای ورود به جلسه، نام خود را وارد کنید و روی دکمه "ورود به جلسه" کلیک کنید.</p>
    <input type="text" id="username" placeholder="نام خود را وارد کنید">
    <button onclick="joinMeeting()">ورود به جلسه</button>
</div>

در این کد، محتوای صفحه خوش‌آمدگویی تغییر داده شده است. شما می‌توانید عنوان، متن و دکمه‌ها را مطابق با نیاز خود تنظیم کنید.

۱.۲. افزودن استایل به صفحه خوش‌آمدگویی

برای زیباتر کردن صفحه خوش‌آمدگویی، می‌توانید از استایل‌های CSS استفاده کنید. به‌عنوان مثال:

.welcome-container {
    text-align: center;
    padding: 50px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.welcome-container h1 {
    font-size: 2rem;
    color: #333;
}

.welcome-container p {
    font-size: 1.2rem;
    color: #666;
}

.welcome-container input {
    padding: 10px;
    margin-top: 20px;
    width: 50%;
    border-radius: 4px;
}

.welcome-container button {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.welcome-container button:hover {
    background-color: #45a049;
}

این استایل‌ها باعث می‌شوند که صفحه خوش‌آمدگویی ظاهری زیبا و حرفه‌ای داشته باشد.


۲. سفارشی‌سازی صفحه ورود (Login Page)

صفحه ورود Jitsi معمولاً شامل فیلدهایی برای وارد کردن نام جلسه یا رمز عبور می‌باشد. برای سفارشی‌سازی این صفحه، می‌توانید مشابه روش صفحه خوش‌آمدگویی عمل کنید و فایل‌های HTML و CSS را اصلاح کنید.

۲.۱. تغییر محتوای HTML صفحه ورود

برای سفارشی‌سازی صفحه ورود، باید فایل login.html را پیدا کرده و تغییرات مورد نظر را اعمال کنید:

<div class="login-container">
    <h1>ورود به جلسه</h1>
    <input type="text" id="meetingId" placeholder="شناسه جلسه">
    <input type="password" id="meetingPassword" placeholder="رمز عبور">
    <button onclick="login()">ورود</button>
</div>

در اینجا، تغییرات ساده‌ای برای اضافه کردن فیلدهای ورودی برای شناسه جلسه و رمز عبور ایجاد شده است.

۲.۲. استایل‌دهی به صفحه ورود

برای استایل‌دهی به این صفحه، می‌توانید از CSS زیر استفاده کنید:

.login-container {
    text-align: center;
    padding: 50px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-container h1 {
    font-size: 2rem;
    color: #333;
}

.login-container input {
    padding: 10px;
    margin-top: 20px;
    width: 70%;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.login-container button {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-container button:hover {
    background-color: #0056b3;
}

این CSS به صفحه ورود ظاهری مرتب و حرفه‌ای می‌دهد.


۳. سفارشی‌سازی صفحات پیش‌فرض دیگر

Jitsi شامل صفحات دیگری است که می‌توانید آن‌ها را نیز سفارشی‌سازی کنید. برخی از این صفحات شامل صفحه بارگذاری، صفحه خطا و غیره هستند. برای هرکدام از این صفحات، شما باید به دنبال فایل‌های HTML و CSS مرتبط با آن‌ها در پوشه‌های منابع Jitsi بگردید و تغییرات دلخواه را اعمال کنید.

۳.۱. تغییر ظاهر صفحه خطا

اگر بخواهید ظاهر صفحه خطا را تغییر دهید، باید فایل مربوطه را پیدا کرده و پیام‌های خطا یا ظاهر آن را سفارشی‌سازی کنید:

<div class="error-container">
    <h1>خطا در اتصال</h1>
    <p>متاسفانه نتواستیم به جلسه متصل شویم. لطفاً دوباره تلاش کنید.</p>
    <button onclick="reloadPage()">بارگذاری مجدد</button>
</div>
۳.۲. استایل‌دهی به صفحه خطا
.error-container {
    text-align: center;
    padding: 50px;
    background-color: #ffcccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.error-container h1 {
    font-size: 2rem;
    color: #d9534f;
}

.error-container p {
    font-size: 1.2rem;
    color: #5bc0de;
}

.error-container button {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.error-container button:hover {
    background-color: #c9302c;
}

این استایل‌ها به صفحه خطا ظاهری متناسب با یک پیام هشدار می‌دهند.


جمع‌بندی

سفارشی‌سازی صفحات پیش‌فرض Jitsi مانند صفحه خوش‌آمدگویی، صفحه ورود و صفحات خطا، به شما این امکان را می‌دهد که تجربه کاربری خاص و متناسب با برند خود ایجاد کنید. با ویرایش فایل‌های HTML و افزودن استایل‌های CSS، می‌توانید صفحات مختلف Jitsi را مطابق با نیاز خود تغییر دهید و از این طریق تجربه کاربری جذاب‌تری برای کاربران فراهم کنید.

 

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 9. اضافه کردن ویژگی‌های نظرسنجی و تعاملات کاربران”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”توسعه سیستم نظرسنجی و سؤالات رای‌گیری در جلسات ” subtitle=”توضیحات کامل”]در سیستم‌های کنفرانس آنلاین مانند Jitsi، افزودن سیستم نظرسنجی و سؤالات رای‌گیری می‌تواند به ایجاد تعامل بیشتر و جمع‌آوری بازخورد از شرکت‌کنندگان کمک کند. این ویژگی‌ها به مدیران جلسه و شرکت‌کنندگان این امکان را می‌دهند که نظر خود را درباره موضوعات مختلف اعلام کنند یا در رای‌گیری‌های گروهی شرکت کنند.

در این بخش، به توضیح نحوه توسعه سیستم نظرسنجی و سؤالات رای‌گیری در جلسات Jitsi می‌پردازیم.


۱. طراحی و پیاده‌سازی سیستم نظرسنجی

برای افزودن سیستم نظرسنجی به جلسات Jitsi، باید از API Jitsi و همچنین قابلیت‌هایی مانند افزونه‌ها (plugins) یا تغییرات در کدهای موجود استفاده کرد. هدف این است که امکان ایجاد نظرسنجی‌ها و پاسخ به آن‌ها در جریان جلسه فراهم شود.

۱.۱. طراحی ساختار نظرسنجی

اولین گام در ایجاد سیستم نظرسنجی، طراحی یک ساختار برای نظرسنجی‌ها است. این ساختار باید امکان ایجاد و مدیریت سوالات مختلف را فراهم کند. به‌عنوان مثال، می‌توانید از یک آرایه برای ذخیره‌سازی سؤالات و گزینه‌ها استفاده کنید:

const polls = [
  {
    question: "آیا جلسه برای شما مفید بود؟",
    options: ["بله", "خیر", "نظرم فرق می‌کند"],
    responses: [0, 0, 0]  // تعداد پاسخ‌های هر گزینه
  },
  {
    question: "آیا می‌خواهید جلسه بعدی آنلاین باشد؟",
    options: ["بله", "خیر"],
    responses: [0, 0]
  }
];
۱.۲. نمایش نظرسنجی در جلسه

برای نمایش نظرسنجی در جلسه، باید یک پنجره یا ویجت برای نمایش سؤالات و گزینه‌ها ایجاد کنید. این ویجت می‌تواند به‌صورت یک پنجره مودال (modal) باز شود که کاربر بتواند در آن رای دهد.

function displayPoll(pollIndex) {
    const poll = polls[pollIndex];
    const modal = document.createElement('div');
    modal.classList.add('poll-modal');
    modal.innerHTML = `
        <h2>${poll.question}</h2>
        ${poll.options.map((option, index) => `
            <button onclick="submitPollVote(${pollIndex}, ${index})">${option}</button>
        `).join('')}
    `;
    document.body.appendChild(modal);
}

function submitPollVote(pollIndex, optionIndex) {
    polls[pollIndex].responses[optionIndex]++;
    console.log(`Vote for poll #${pollIndex} option #${optionIndex}:`, polls[pollIndex].responses);
    closePollModal();
}

function closePollModal() {
    const modal = document.querySelector('.poll-modal');
    modal.remove();
}

این کد یک پنجره مودال نمایش می‌دهد که شامل سؤالات و گزینه‌های نظرسنجی است. وقتی کاربر روی یکی از گزینه‌ها کلیک می‌کند، رأی خود را ثبت کرده و پنجره بسته می‌شود.

۱.۳. طراحی استایل برای ویجت نظرسنجی

برای زیباسازی ظاهر نظرسنجی، می‌توانید از CSS برای استایل‌دهی به پنجره مودال و دکمه‌ها استفاده کنید:

.poll-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.poll-modal h2 {
    margin-bottom: 20px;
}

.poll-modal button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.poll-modal button:hover {
    background-color: #0056b3;
}

۲. پیاده‌سازی سیستم سؤالات رای‌گیری

سیستم رای‌گیری به شرکت‌کنندگان این امکان را می‌دهد که در مورد یک موضوع خاص نظر دهند و نتایج آن به‌صورت فوری در جلسه نمایش داده شود. برای این کار می‌توانید سیستم مشابه سیستم نظرسنجی پیاده‌سازی کنید، با این تفاوت که هر کاربر فقط یک بار می‌تواند رأی دهد و نتایج به‌صورت آنی نمایش داده می‌شود.

۲.۱. طراحی ساختار رای‌گیری

در رای‌گیری‌ها، هر سؤال می‌تواند چندین گزینه داشته باشد و شرکت‌کنندگان می‌توانند یکی از گزینه‌ها را انتخاب کنند. این داده‌ها در یک ساختار مشابه به نظرسنجی‌ها ذخیره می‌شود:

const polls = [
  {
    question: "کدام یک از این گزینه‌ها را ترجیح می‌دهید؟",
    options: ["گزینه 1", "گزینه 2", "گزینه 3"],
    votes: [0, 0, 0]
  }
];
۲.۲. سیستم رأی‌دهی

پس از نمایش رای‌گیری، کاربران می‌توانند یکی از گزینه‌ها را انتخاب کنند. سیستم باید بررسی کند که آیا کاربر قبلاً رأی داده است یا خیر و سپس رای را ثبت کند.

let userVoted = false;  // متغیر برای جلوگیری از رای دادن دوباره

function submitVote(pollIndex, optionIndex) {
    if (userVoted) {
        alert('شما قبلاً رأی داده‌اید!');
        return;
    }
    polls[pollIndex].votes[optionIndex]++;
    userVoted = true;
    displayResults(pollIndex);
}

function displayResults(pollIndex) {
    const poll = polls[pollIndex];
    console.log('نتایج رای‌گیری:');
    poll.options.forEach((option, index) => {
        console.log(`${option}: ${poll.votes[index]} رأی`);
    });
}
۲.۳. نمایش نتایج رای‌گیری

پس از جمع‌آوری رای‌ها، باید نتایج به‌صورت آنی نمایش داده شوند. برای این کار، می‌توانید از یک ویجت مشابه پنجره نظرسنجی استفاده کنید که در آن نتایج هر گزینه به نمایش درآید.

function displayResults(pollIndex) {
    const poll = polls[pollIndex];
    const modal = document.createElement('div');
    modal.classList.add('poll-results-modal');
    modal.innerHTML = `
        <h2>نتایج رای‌گیری: ${poll.question}</h2>
        ${poll.options.map((option, index) => `
            <p>${option}: ${poll.votes[index]} رأی</p>
        `).join('')}
    `;
    document.body.appendChild(modal);
}
۲.۴. استایل‌دهی به نتایج رای‌گیری

برای نمایش نتایج رای‌گیری به‌صورت زیبا، از CSS مشابه زیر استفاده می‌شود:

.poll-results-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.poll-results-modal h2 {
    margin-bottom: 20px;
}

.poll-results-modal p {
    font-size: 1.2rem;
    color: #333;
}

جمع‌بندی

سیستم نظرسنجی و سؤالات رای‌گیری در جلسات Jitsi می‌تواند به تعامل بیشتر و جمع‌آوری بازخورد مفید از شرکت‌کنندگان کمک کند. با استفاده از API Jitsi و افزونه‌ها، شما می‌توانید یک سیستم نظرسنجی و رای‌گیری تعاملی و آنی برای جلسات خود ایجاد کنید که شامل نمایش سؤالات، جمع‌آوری پاسخ‌ها و نمایش نتایج باشد. این قابلیت‌ها می‌توانند به بهبود تجربه کاربری و درک بهتر نیازها و نظرات شرکت‌کنندگان کمک کنند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”افزودن گزینه‌های جدید برای تعاملات کاربران مانند تبادل پیام خصوصی ” subtitle=”توضیحات کامل”]یکی از مهم‌ترین جنبه‌های هر سیستم کنفرانس آنلاین، فراهم کردن امکاناتی است که تعاملات کاربران را تسهیل کند. یکی از این امکانات، پیام‌رسانی خصوصی میان شرکت‌کنندگان است. در این بخش، نحوه افزودن قابلیت تبادل پیام خصوصی میان کاربران در جلسات Jitsi توضیح داده خواهد شد.


۱. استفاده از API برای افزودن پیام خصوصی

Jitsi دارای API قدرتمندی است که به شما این امکان را می‌دهد که بسیاری از قابلیت‌های جلسه را سفارشی‌سازی کنید. برای افزودن قابلیت پیام‌رسانی خصوصی، باید از سیستم چت موجود در Jitsi استفاده کنید و تغییراتی ایجاد کنید تا این امکان را برای کاربران فراهم کند که فقط با یکدیگر، به‌طور خصوصی پیام ارسال کنند.

۱.۱. طراحی و پیاده‌سازی پیام‌رسانی خصوصی

برای ایجاد پیام‌رسانی خصوصی، ابتدا باید یک رابط کاربری برای ارسال و دریافت پیام‌های خصوصی طراحی کنید. این رابط می‌تواند شامل یک فیلد جستجو برای انتخاب کاربر هدف و یک جعبه متن برای تایپ پیام باشد.

۱.۲. طراحی رابط کاربری

برای طراحی رابط کاربری پیام خصوصی، می‌توانیم یک فیلد جستجو و یک فریم جداگانه برای پیام‌ها ایجاد کنیم که مخصوص پیام‌های خصوصی باشد. این طراحی باید شامل بخش‌های زیر باشد:

  • یک نوار جستجو برای انتخاب کاربر هدف
  • یک بخش نمایش پیام‌های خصوصی که فقط برای دو نفر قابل مشاهده است
  • یک جعبه متن برای ارسال پیام
<div id="private-message-container" style="display: none;">
    <input type="text" id="private-message-recipient" placeholder="جستجو برای انتخاب کاربر" />
    <div id="private-message-display" style="height: 300px; overflow-y: auto; border: 1px solid #ccc;"></div>
    <textarea id="private-message-input" placeholder="پیام خود را تایپ کنید..."></textarea>
    <button onclick="sendPrivateMessage()">ارسال پیام</button>
</div>

در این قسمت، بخش‌های مختلف پیام‌رسانی خصوصی به‌صورت ساده طراحی شده‌اند. فیلد جستجو برای انتخاب کاربر هدف، بخش نمایش پیام‌ها و جعبه متن برای تایپ پیام وجود دارد.

۱.۳. ارسال پیام خصوصی

در اینجا باید از API Jitsi برای ارسال پیام‌های خصوصی استفاده کنید. فرض می‌کنیم که هر کاربر با یک شناسه خاص شناسایی می‌شود و می‌خواهیم پیام را به یک کاربر خاص ارسال کنیم. برای ارسال پیام، از یک ساختار داده‌ای مشابه به پیام‌های عمومی استفاده می‌کنیم، با این تفاوت که پیام‌ها فقط به کاربر مورد نظر ارسال می‌شوند.

let currentRecipient = null;

function sendPrivateMessage() {
    const messageInput = document.getElementById('private-message-input');
    const message = messageInput.value.trim();
    
    if (message && currentRecipient) {
        // ارسال پیام خصوصی به کاربر هدف
        const privateMessage = {
            sender: 'user1',  // شناسه فرستنده
            recipient: currentRecipient,
            content: message,
            timestamp: new Date().toISOString(),
        };
        
        // ارسال پیام از طریق API Jitsi یا استفاده از یک پروتکل مانند WebSocket برای ارسال پیام‌ها
        sendMessageToRecipient(privateMessage);
        
        // نمایش پیام در رابط کاربری
        displayPrivateMessage(privateMessage);
        
        // پاک کردن ورودی پیام
        messageInput.value = '';
    }
}

function sendMessageToRecipient(message) {
    // ارسال پیام به کاربر هدف از طریق API یا WebSocket
    console.log('پیام ارسال شد:', message);
}

function displayPrivateMessage(message) {
    const displayArea = document.getElementById('private-message-display');
    const messageElement = document.createElement('div');
    messageElement.textContent = `${message.sender}: ${message.content}`;
    displayArea.appendChild(messageElement);
}

در اینجا از یک تابع sendPrivateMessage برای ارسال پیام استفاده می‌شود. پیام شامل اطلاعات فرستنده، گیرنده، محتوا و زمان ارسال است. سپس پیام در رابط کاربری نمایش داده می‌شود.

۱.۴. نمایش پیام‌های خصوصی

برای نمایش پیام‌های خصوصی، می‌توانیم یک بخش مخصوص برای نمایش پیام‌ها ایجاد کنیم. این بخش فقط پیام‌های ارسال‌شده به کاربر خاص را نمایش می‌دهد.

function displayPrivateMessage(message) {
    const displayArea = document.getElementById('private-message-display');
    const messageElement = document.createElement('div');
    messageElement.textContent = `${message.sender}: ${message.content}`;
    displayArea.appendChild(messageElement);
    displayArea.scrollTop = displayArea.scrollHeight; // اسکرول به آخر پیام
}

در اینجا، پیام‌ها در بخش مخصوص به خودشان نمایش داده می‌شوند. همچنین از قابلیت اسکرول خودکار استفاده می‌شود تا کاربر همیشه آخرین پیام‌ها را مشاهده کند.


۲. جستجوی کاربران برای ارسال پیام خصوصی

برای اینکه کاربران بتوانند به‌راحتی یکدیگر را جستجو کرده و پیام خصوصی ارسال کنند، باید سیستمی را پیاده‌سازی کنیم که از آن‌ها لیستی از کاربران حاضر در جلسه را نشان دهد. این لیست می‌تواند از طریق API Jitsi یا از طریق پروتکل‌های دیگر به‌دست آید.

۲.۱. جستجو و انتخاب کاربر

برای جستجوی کاربران، می‌توانیم یک فیلد جستجو طراحی کنیم که کاربران را از میان کاربران حاضر در جلسه پیدا کند. پس از انتخاب یک کاربر، رابط پیام‌رسانی خصوصی فعال می‌شود.

function searchUsers(query) {
    const users = getAllUsers(); // دریافت لیست کاربران
    const filteredUsers = users.filter(user => user.name.includes(query));
    displayUserSearchResults(filteredUsers);
}

function displayUserSearchResults(users) {
    const resultsContainer = document.getElementById('private-message-recipient');
    resultsContainer.innerHTML = '';
    
    users.forEach(user => {
        const userItem = document.createElement('div');
        userItem.textContent = user.name;
        userItem.onclick = () => selectRecipient(user);
        resultsContainer.appendChild(userItem);
    });
}

function selectRecipient(user) {
    currentRecipient = user.id;
    document.getElementById('private-message-recipient').value = user.name;
}

در اینجا، تابع searchUsers برای جستجوی کاربران استفاده می‌شود. پس از جستجو، کاربران مطابق با نام وارد شده نمایش داده می‌شوند و کاربر می‌تواند یکی از آن‌ها را انتخاب کند.


جمع بندی

اضافه کردن قابلیت پیام‌رسانی خصوصی به جلسات Jitsi به کاربران این امکان را می‌دهد که در کنار تعاملات عمومی، به‌طور خصوصی با یکدیگر ارتباط برقرار کنند. این ویژگی می‌تواند برای تعاملات خاص یا بحث‌های خصوصی میان کاربران بسیار مفید باشد. با استفاده از API Jitsi و کدهای ساده جاوااسکریپت، می‌توان این قابلیت را به‌راحتی به سیستم‌های کنفرانس آنلاین اضافه کرد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”پیاده‌سازی گزینه‌هایی برای نظرسنجی در هنگام جلسات و پخش نتایج به‌صورت زنده ” subtitle=”توضیحات کامل”]یکی از ویژگی‌های مفید در جلسات آنلاین، امکان برگزاری نظرسنجی‌ها به‌صورت زنده است. این ویژگی می‌تواند به‌ویژه برای جلسات آموزشی، کنفرانس‌ها و جلسات تیمی مفید باشد تا بازخورد فوری از شرکت‌کنندگان جمع‌آوری شود. در این بخش، نحوه پیاده‌سازی نظرسنجی‌ها در Jitsi و پخش نتایج آن‌ها به‌صورت زنده توضیح داده خواهد شد.


۱. طراحی و پیاده‌سازی رابط کاربری نظرسنجی

ابتدا باید یک رابط کاربری برای ایجاد نظرسنجی طراحی کنیم که شامل سوال و گزینه‌های مختلف برای انتخاب باشد. این رابط باید در هنگام جلسه در دسترس باشد و امکان شرکت در نظرسنجی برای شرکت‌کنندگان فراهم کند.

۱.۱. طراحی فرم نظرسنجی

فرم نظرسنجی باید شامل موارد زیر باشد:

  • سوال نظرسنجی
  • گزینه‌های پاسخ برای انتخاب
  • دکمه ارسال نظرسنجی
<div id="poll-container" style="display: none;">
    <div id="poll-question">چه موضوعی را بیشتر دوست دارید؟</div>
    <form id="poll-options">
  <input type="radio" name="poll" value="Option 1" id="option1"><label for="option1">گزینه ۱</label><br>
   <input type="radio" name="poll" value="Option 2" id="option2"><label for="option2">گزینه ۲</label><br>
  <input type="radio" name="poll" value="Option 3" id="option3"><label for="option3">گزینه ۳</label><br>
  <button type="button" onclick="submitPoll()">ارسال</button>
    </form>
</div>

در اینجا، یک فرم ساده برای نظرسنجی طراحی شده که شامل سه گزینه پاسخ است و دکمه‌ای برای ارسال نظرسنجی به‌صورت زنده وجود دارد.

۱.۲. فعال کردن و نمایش نظرسنجی

برای نمایش فرم نظرسنجی در زمان برگزاری جلسه، باید یک رویداد زمانی تنظیم کنیم که این فرم را نمایش دهد. می‌توان از یک دکمه یا رویداد خاص برای شروع نظرسنجی استفاده کرد.

function startPoll() {
    document.getElementById('poll-container').style.display = 'block';
}

function submitPoll() {
    const selectedOption = document.querySelector('input[name="poll"]:checked');
    if (selectedOption) {
        const pollAnswer = selectedOption.value;
        sendPollAnswerToServer(pollAnswer);
        displayPollResults(pollAnswer);
    } else {
        alert('لطفاً یکی از گزینه‌ها را انتخاب کنید.');
    }
}

function sendPollAnswerToServer(answer) {
    // ارسال پاسخ نظرسنجی به سرور یا سرویس Jitsi
    console.log(`پاسخ نظرسنجی ارسال شد: ${answer}`);
}

در اینجا، تابع startPoll برای نمایش فرم نظرسنجی استفاده می‌شود و هنگام ارسال نظرسنجی، پاسخ‌ها به سرور ارسال می‌شود.


۲. ارسال و پردازش نتایج نظرسنجی به‌صورت زنده

برای نمایش نتایج نظرسنجی به‌صورت زنده، باید به‌گونه‌ای عمل کنیم که وقتی یک کاربر نظرسنجی را ارسال می‌کند، نتیجه آن به سایر کاربران در جلسه نمایش داده شود.

۲.۱. جمع‌آوری و ذخیره نتایج

با استفاده از WebSocket یا دیگر تکنولوژی‌ها مانند API Jitsi می‌توانیم نظرسنجی‌ها را به‌صورت زنده پردازش و ذخیره کنیم. به‌عنوان مثال، می‌توانیم با هر بار ارسال یک پاسخ جدید، نتایج را به‌روزرسانی کنیم و این نتایج را برای دیگر کاربران پخش کنیم.

let pollResults = {
    'Option 1': 0,
    'Option 2': 0,
    'Option 3': 0,
};

function updatePollResults(answer) {
    pollResults[answer]++;
    broadcastPollResults();
}

function broadcastPollResults() {
    // ارسال نتایج به همه شرکت‌کنندگان
    console.log(`نتایج نظرسنجی به‌روز شد:`, pollResults);
    displayPollResults();
}

function displayPollResults() {
    const resultsContainer = document.getElementById('poll-results');
    resultsContainer.innerHTML = `<strong>نتایج نظرسنجی:</strong><br>
        گزینه ۱: ${pollResults['Option 1']}<br>
        گزینه ۲: ${pollResults['Option 2']}<br>
        گزینه ۳: ${pollResults['Option 3']}`;
}

در اینجا، هر بار که یک کاربر یک گزینه را انتخاب می‌کند، تعداد پاسخ‌های آن گزینه در pollResults به‌روزرسانی می‌شود و سپس نتایج به‌صورت زنده به همه شرکت‌کنندگان ارسال می‌شود.

۲.۲. نمایش نتایج زنده

برای نمایش نتایج به‌صورت زنده، باید یک بخش جداگانه برای نمایش نتایج نظرسنجی ایجاد کنیم. این بخش می‌تواند در کنار فرم نظرسنجی یا در یک نوار اطلاع‌رسانی قرار گیرد.

<div id="poll-results" style="display: none;">
    <strong>نتایج نظرسنجی:</strong><br>
    گزینه ۱: 0<br>
    گزینه ۲: 0<br>
    گزینه ۳: 0<br>
</div>

برای پخش نتایج به‌صورت زنده، از تابع displayPollResults استفاده می‌شود که نتایج را در قالب HTML به نمایش درمی‌آورد.

۲.۳. پیاده‌سازی ارسال نتایج به سرور

برای ارسال نتایج نظرسنجی به سرور، می‌توان از پروتکل‌هایی مانند WebSocket یا API Jitsi استفاده کرد تا نتایج به‌صورت آنی به دیگر شرکت‌کنندگان منتقل شود.

function sendPollResultsToServer() {
    // ارسال نتایج نظرسنجی به سرور یا از طریق WebSocket به تمام کاربران
    console.log('نتایج نظرسنجی به سرور ارسال شد:', pollResults);
}

جمع بندی

پیاده‌سازی نظرسنجی در جلسات Jitsi می‌تواند ابزاری مفید برای جمع‌آوری بازخورد سریع و تعامل بیشتر با شرکت‌کنندگان باشد. با استفاده از رابط کاربری ساده و تکنولوژی‌های مدرن مانند WebSocket، می‌توان نتایج را به‌صورت آنی به نمایش گذاشت. این ویژگی می‌تواند تجربه بهتری برای شرکت‌کنندگان فراهم کند و به مدیران جلسه کمک کند تا نظرات و نیازهای کاربران را بهتر درک کنند.

 [/cdb_course_lesson][cdb_course_lesson title=”فصل 10. تست و عیب‌یابی ویژگی‌های توسعه‌یافته”][/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”استفاده از ابزارهای دیباگ برای بررسی مشکلات در ویژگی‌های جدید” subtitle=”توضیحات کامل”]در فرایند توسعه و پیاده‌سازی ویژگی‌های جدید در نرم‌افزارها، به‌ویژه در پلتفرم‌هایی مانند Jitsi، ابزارهای دیباگ نقش حیاتی دارند. این ابزارها کمک می‌کنند تا توسعه‌دهندگان مشکلات و باگ‌ها را شناسایی کرده و آنها را در مراحل اولیه رفع کنند. در این بخش، نحوه استفاده از ابزارهای دیباگ برای بررسی مشکلات در ویژگی‌های جدید بررسی می‌شود.


۱. استفاده از کنسول مرورگر (Browser Console)

یکی از ابتدایی‌ترین و مؤثرترین ابزارهای دیباگ، کنسول مرورگر است. کنسول مرورگر امکان مشاهده خطاها، هشدارها، و پیام‌های لاگ را فراهم می‌کند و به‌طور ویژه در بررسی مسائل جاوااسکریپت کاربرد دارد.

۱.۱. دستورات console.log و console.error

برای بررسی مشکلات در ویژگی‌های جدید، می‌توانید از دستورات console.log برای چاپ وضعیت متغیرها و خروجی‌ها و از console.error برای نمایش خطاها استفاده کنید.

console.log("ویژگی جدید بارگذاری شد");
console.error("خطا در بارگذاری ویژگی جدید");

این دستورات به شما این امکان را می‌دهند که متغیرها و وضعیت‌های مختلف را در کنسول مشاهده کنید و بفهمید که آیا همه چیز به درستی بارگذاری می‌شود یا نه.

۱.۲. استفاده از console.group

برای دسته‌بندی پیام‌ها در کنسول، می‌توان از console.group و console.groupEnd استفاده کرد که موجب می‌شود پیام‌های مربوط به یک بخش خاص بهتر قابل مشاهده باشند.

console.group("ویژگی جدید");
console.log("مرحله ۱: شروع بارگذاری");
console.log("مرحله ۲: بررسی ورودی");
console.groupEnd();

این روش می‌تواند در شلوغی کنسول مفید باشد و دسته‌بندی‌ها را روشن‌تر کند.


۲. استفاده از DevTools برای بررسی شبکه و درخواست‌ها

در بسیاری از موارد، ویژگی‌های جدید نیاز به تعامل با سرور یا APIها دارند. برای بررسی این تعاملات و درخواست‌های شبکه، ابزارهای DevTools مرورگر مانند Chrome DevTools می‌توانند بسیار مفید باشند.

۲.۱. تب Network

در DevTools، تب Network به شما این امکان را می‌دهد که تمامی درخواست‌های HTTP را مشاهده کنید. این تب می‌تواند برای بررسی درخواست‌های Ajax یا APIهای ارسال شده توسط ویژگی‌های جدید مورد استفاده قرار گیرد.

  1. به صفحه‌ای که ویژگی جدید در آن اجرا می‌شود بروید.
  2. DevTools را باز کرده و به تب Network بروید.
  3. عمل مورد نظر (مثلاً ارسال فرم یا بارگذاری ویژگی) را انجام دهید.
  4. درخواست‌های شبکه به‌طور زنده در تب Network نمایش داده می‌شوند.
  5. روی هر درخواست کلیک کنید تا جزئیات آن مانند پاسخ و هدرها را مشاهده کنید.

این ابزار به‌ویژه زمانی مفید است که بخواهید بررسی کنید که آیا درخواست‌های API به‌درستی ارسال و دریافت می‌شوند و اگر خطایی وجود دارد، علت آن را پیدا کنید.

۲.۲. استفاده از تب Console برای مشاهده خطاهای شبکه

گاهی اوقات، خطاهای مربوط به درخواست‌های شبکه (مانند عدم اتصال به سرور یا خطای ۴۰۴) در کنسول نمایش داده می‌شوند. با استفاده از console.error می‌توانید پیام‌های خطا را در کنسول مشاهده کنید.

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('خطا در دریافت داده‌ها:', error));

این روش به شما کمک می‌کند که از درخواست‌های API خطاها و مسائل احتمالی را شناسایی کنید.


۳. استفاده از Breakpoints و Debugger

برای بررسی مشکلات پیچیده‌تر، می‌توانید از Breakpointها و دستور debugger برای متوقف کردن کد در نقاط خاص و بررسی مقادیر متغیرها و وضعیت‌ها استفاده کنید.

۳.۱. استفاده از دستور debugger

در جاوااسکریپت، دستور debugger می‌تواند مانند یک نقطه توقف عمل کند. زمانی که این دستور اجرا شود، کنترل کد به DevTools منتقل می‌شود و شما می‌توانید متغیرها و وضعیت‌های کد را بررسی کنید.

function processData(data) {
    debugger; // توقف و بررسی وضعیت متغیرها
    console.log(data);
}

پس از اجرای کد، DevTools به‌طور خودکار باز می‌شود و شما می‌توانید در نقطه توقف، مقادیر متغیرها و اجرای کد را بررسی کنید.

۳.۲. استفاده از Breakpointها در DevTools

در DevTools، می‌توانید Breakpointها را در هر خط از کد جاوااسکریپت قرار دهید. زمانی که برنامه به آن خط برسد، اجرا متوقف شده و شما می‌توانید وضعیت متغیرها را بررسی کنید.

  1. DevTools را باز کنید.
  2. به تب Sources بروید.
  3. روی خط کد مورد نظر کلیک کنید تا یک Breakpoint روی آن قرار گیرد.
  4. هنگام اجرای کد، برنامه به طور خودکار متوقف می‌شود و شما می‌توانید متغیرها و وضعیت‌ها را بررسی کنید.

۴. استفاده از ابزارهای دیباگ برای React و سایر فریم‌ورک‌ها

اگر ویژگی‌های جدید شما با استفاده از فریم‌ورک‌هایی مانند React یا Vue.js توسعه یافته‌اند، ابزارهای دیباگ خاصی برای این فریم‌ورک‌ها وجود دارند که به شما کمک می‌کنند تا وضعیت کامپوننت‌ها، props و state را بررسی کنید.

۴.۱. React Developer Tools

React Developer Tools به شما امکان می‌دهد تا وضعیت React Components را بررسی کنید و تغییرات آن‌ها را در زمان واقعی مشاهده کنید. با استفاده از این ابزار می‌توانید بررسی کنید که آیا props و state به‌درستی تنظیم می‌شوند یا خیر.


جمع بندی

استفاده از ابزارهای دیباگ در فرآیند توسعه ویژگی‌های جدید، برای شناسایی مشکلات و خطاها بسیار مفید است. ابزارهایی مانند کنسول مرورگر، DevTools، Breakpoints، و ابزارهای دیباگ برای فریم‌ورک‌ها می‌توانند به شما کمک کنند که مشکلات را در سریع‌ترین زمان ممکن شناسایی و رفع کنید. در نهایت، این ابزارها موجب بهبود کیفیت و کارایی ویژگی‌های جدید می‌شوند و تجربه بهتری برای کاربران فراهم می‌کنند.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”شبیه‌سازی شرایط مختلف در جلسات برای تست ویژگی‌ها” subtitle=”توضیحات کامل”]یکی از چالش‌های مهم در توسعه ویژگی‌های جدید برای پلتفرم‌های جلسات آنلاین مانند Jitsi، اطمینان از عملکرد صحیح ویژگی‌ها در شرایط مختلف است. شبیه‌سازی شرایط مختلف می‌تواند به تست و ارزیابی بهتر ویژگی‌ها کمک کند و از بروز مشکلات غیرمنتظره جلوگیری کند. در این بخش، روش‌های مختلف برای شبیه‌سازی شرایط مختلف در جلسات آنلاین به‌ویژه برای تست ویژگی‌های جدید در Jitsi توضیح داده می‌شود.


۱. شبیه‌سازی شرایط اتصال ضعیف اینترنت

برای اطمینان از اینکه ویژگی‌های جدید حتی در شرایط اتصال ضعیف اینترنت نیز به درستی کار می‌کنند، باید شرایط اتصال ضعیف را شبیه‌سازی کنیم. این شبیه‌سازی می‌تواند به‌ویژه برای ویژگی‌هایی که به پهنای باند نیاز دارند، مانند ویدیوها و اشتراک‌گذاری صفحه، بسیار مفید باشد.

۱.۱. استفاده از ابزارهای توسعه‌دهنده مرورگر

یکی از روش‌های ساده برای شبیه‌سازی شرایط اتصال ضعیف، استفاده از ابزارهای توسعه‌دهنده مرورگر است. در مرورگرهای کروم و فایرفاکس، می‌توانید شرایط اتصال را شبیه‌سازی کنید.

  1. ابزارهای توسعه‌دهنده را باز کنید (با فشردن F12).
  2. به تب “Network” بروید.
  3. گزینه “Throttling” را انتخاب کنید و یکی از حالت‌های شبیه‌سازی اتصال ضعیف مانند “Slow 3G” یا “Offline” را انتخاب کنید.

این کار می‌تواند شرایطی شبیه به اتصال اینترنت ضعیف ایجاد کند و شما می‌توانید مشاهده کنید که ویژگی‌ها چگونه در این شرایط کار می‌کنند.

۱.۲. شبیه‌سازی اتصال ضعیف از طریق API

اگر بخواهید این شرایط را از طریق API شبیه‌سازی کنید، می‌توانید از کتابخانه‌های تست مانند fetch-mock برای شبیه‌سازی تاخیر در درخواست‌های شبکه استفاده کنید.

fetchMock.mock('*', { status: 500, body: 'Network error' });

این کد به‌طور موقت همه درخواست‌ها را به خطای شبکه تغییر می‌دهد که می‌تواند به شبیه‌سازی اتصال ضعیف کمک کند.


۲. شبیه‌سازی مشکلات سخت‌افزاری

ویژگی‌های جدید ممکن است در شرایط خاصی مانند سخت‌افزار ضعیف یا پیکربندی‌های مختلف سیستم به‌درستی کار نکنند. به همین دلیل شبیه‌سازی شرایط سخت‌افزاری مختلف ضروری است.

۲.۱. کاهش کیفیت ویدیو

برای تست ویژگی‌هایی که به پردازش ویدیو و ارسال آن به سرور مربوط هستند، می‌توانید کیفیت ویدیو را به‌طور دستی کاهش دهید تا ببینید که آیا پلتفرم می‌تواند همچنان عملکرد خوبی در این شرایط ارائه دهد یا خیر.

const constraints = {
    video: {
        width: { ideal: 640 },
        height: { ideal: 480 },
        frameRate: { ideal: 15 }
    }
};
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        // استفاده از استریم برای تست ویژگی‌های ویدیویی
    })
    .catch(error => {
        console.error('خطا در دریافت ویدیو:', error);
    });

این کد باعث می‌شود که کیفیت ویدیو به حداقل برسد و تست عملکرد در شرایط سخت‌افزاری ضعیف را امکان‌پذیر می‌کند.

۲.۲. شبیه‌سازی محدودیت منابع پردازشی

برای شبیه‌سازی شرایطی که در آن سیستم منابع پردازشی محدودی دارد، می‌توانید از ابزارهایی مانند stress-ng در لینوکس استفاده کنید که بار روی CPU و حافظه را افزایش می‌دهد.

stress-ng --cpu 4 --timeout 60s

این دستور بار زیادی روی CPU ایجاد می‌کند و می‌تواند به شبیه‌سازی سیستم‌هایی با منابع پردازشی محدود کمک کند.


۳. شبیه‌سازی شرکت‌کنندگان متعدد

یکی از ویژگی‌های مهم پلتفرم‌های جلسات آنلاین، توانایی مدیریت تعداد زیادی شرکت‌کننده است. برای تست عملکرد سیستم در شرایط حضور تعداد زیادی شرکت‌کننده، می‌توان از ابزارهای شبیه‌سازی بار استفاده کرد.

۳.۱. استفاده از ابزارهای شبیه‌سازی بار

ابزارهایی مانند JMeter یا Artillery می‌توانند برای شبیه‌سازی حضور هزاران کاربر در یک جلسه آنلاین مفید باشند.

  1. JMeter: این ابزار می‌تواند درخواست‌های HTTP را شبیه‌سازی کند و برای تست بار روی سرورهای Jitsi استفاده شود.
  2. Artillery: این ابزار برای تست عملکرد سیستم در شرایط بار بالا و شبیه‌سازی حضور تعداد زیادی کاربر مفید است.

نمونه‌ای از شبیه‌سازی بار با استفاده از Artillery:

config:
  target: 'http://localhost:8000'
  phases:
    - duration: 300
      arrivalRate: 50
scenarios:
  - flow:
      - get:
          url: '/conference'

این کد، بار زیادی روی سرور ایجاد کرده و عملکرد Jitsi را تحت فشار تست می‌کند.


۴. شبیه‌سازی شرایط نامساعد صوتی و تصویری

برای اطمینان از عملکرد درست ویژگی‌ها در شرایطی که کیفیت صوتی و تصویری پایین است، باید شبیه‌سازی‌هایی انجام داد که کیفیت صدا و تصویر را کاهش دهند.

۴.۱. کاهش کیفیت صدا

برای شبیه‌سازی شرایطی که در آن کیفیت صدا پایین است، می‌توانید از نرم‌افزارهایی مانند sox برای کاهش کیفیت صدای ورودی استفاده کنید.

sox input.wav output.wav rate 8000

این دستور کیفیت صدای ورودی را کاهش می‌دهد تا شبیه‌سازی شرایط شبکه ضعیف‌تر و یا سخت‌افزار ضعیف‌تر را انجام دهد.

۴.۲. شبیه‌سازی مشکلات ویدیویی

برای شبیه‌سازی مشکلات ویدیویی، می‌توانید از فیلترهای ویدیو استفاده کنید تا سیگنال ویدیویی خراب یا با تأخیر ارسال شود.

const constraints = {
    video: {
        width: { ideal: 320 },
        height: { ideal: 240 },
        frameRate: { ideal: 10 }
    }
};
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        // استفاده از استریم برای شبیه‌سازی مشکلات ویدیویی
    })
    .catch(error => {
        console.error('خطا در دریافت ویدیو:', error);
    });

جمع بندی

شبیه‌سازی شرایط مختلف در جلسات برای تست ویژگی‌ها در Jitsi یکی از مراحل حیاتی در فرآیند توسعه است. این شبیه‌سازی‌ها می‌توانند کمک کنند تا ویژگی‌های جدید در شرایط مختلف مورد ارزیابی قرار گیرند و مشکلات احتمالی قبل از انتشار عمومی شناسایی شوند. از ابزارهای شبیه‌سازی بار، شبیه‌سازی مشکلات شبکه و سخت‌افزار و همچنین کاهش کیفیت صدا و تصویر می‌توان برای تست عملکرد در شرایط مختلف استفاده کرد.

 [/cdb_course_lesson][cdb_course_lesson icon=”fa fa-solid fa-circle-down” badge=”lecture” title=”روش‌های تست واحد (Unit Testing) برای قابلیت‌های جدید” subtitle=”توضیحات کامل”]تست واحد یکی از مهم‌ترین مراحل در فرآیند توسعه نرم‌افزار است که به‌ویژه در پروژه‌های پیچیده و بزرگ مانند Jitsi بسیار حیاتی است. این تست‌ها به توسعه‌دهندگان این امکان را می‌دهند تا قابلیت‌های جدید را به‌طور دقیق و مستقل از سایر بخش‌ها آزمایش کنند و از عملکرد صحیح آن‌ها اطمینان حاصل کنند. در اين بخش از آموزش های ارائه شده توسط فرازنتورک، روش‌های مختلف برای پیاده‌سازی و انجام تست واحد برای قابلیت‌های جدید در Jitsi را بررسی خواهیم کرد.


۱. استفاده از فریم‌ورک‌های تست واحد

برای نوشتن و اجرای تست‌های واحد، فریم‌ورک‌های مختلفی وجود دارند که به شما این امکان را می‌دهند که تست‌های خود را به‌طور منظم و سازمان‌یافته انجام دهید. برای JavaScript و فریم‌ورک‌هایی مانند Jitsi، برخی از فریم‌ورک‌های رایج برای تست واحد عبارتند از:

۱.۱. Jest

Jest یکی از محبوب‌ترین فریم‌ورک‌های تست واحد برای JavaScript است که توسط Facebook توسعه داده شده است. این فریم‌ورک به‌طور پیش‌فرض شامل امکانات مختلفی مانند mock کردن توابع، اجرای تست به‌صورت موازی و همچنین قابلیت گزارش‌گیری از نتایج تست‌ها می‌باشد.

برای استفاده از Jest، کافی است ابتدا آن را به پروژه خود اضافه کنید:

npm install --save-dev jest

سپس می‌توانید یک تست واحد ساده بنویسید:

// sum.js
function sum(a, b) {
  return a + b;
}

module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

اجرای تست‌ها با دستور زیر:

npx jest
۱.۲. Mocha و Chai

Mocha یک فریم‌ورک تست برای JavaScript است که معمولاً با Chai برای انجام تست‌های assertion استفاده می‌شود. این فریم‌ورک بیشتر در محیط‌های Node.js کاربرد دارد، ولی برای تست در مرورگر نیز قابل استفاده است.

برای نصب Mocha و Chai، دستور زیر را وارد کنید:

npm install --save-dev mocha chai

نمونه تست:

const chai = require('chai');
const expect = chai.expect;

describe('sum', function() {
  it('should add 1 and 2 to return 3', function() {
    const result = sum(1, 2);
    expect(result).to.equal(3);
  });
});

اجرای تست‌ها:

npx mocha

۲. Mock کردن وابستگی‌ها

در تست‌های واحد، معمولاً نیاز است که وابستگی‌های خارجی مانند درخواست‌های API، پایگاه داده و غیره را شبیه‌سازی کنید تا تست‌ها مستقل از این بخش‌ها اجرا شوند. این کار با استفاده از تکنیک Mocking انجام می‌شود.

۲.۱. استفاده از Jest برای Mock کردن

Jest ابزارهای قدرتمندی برای mock کردن توابع و ماژول‌ها دارد. با استفاده از jest.mock() می‌توانید ماژول‌ها یا توابع خارجی را mock کنید.

مثال:

const axios = require('axios');
jest.mock('axios');

test('fetches data from API', async () => {
  axios.get.mockResolvedValue({ data: 'some data' });

  const result = await fetchData(); // فرض بر اینکه fetchData تابعی است که از axios استفاده می‌کند
  expect(result).toEqual('some data');
});
۲.۲. Mocking با Sinon و Chai

برای پروژه‌هایی که از Mocha و Chai استفاده می‌کنند، می‌توان از کتابخانه Sinon برای mock کردن و spy کردن توابع استفاده کرد.

npm install --save-dev sinon

مثال:

const sinon = require('sinon');
const axios = require('axios');

describe('fetchData', function() {
  it('should call axios.get once', function() {
    const spy = sinon.spy(axios, 'get');
    fetchData();
    sinon.assert.calledOnce(spy);
    spy.restore();
  });
});

۳. تست‌های Asynchronous

در بسیاری از ویژگی‌های جدید Jitsi، ممکن است نیاز به اجرای تست‌های غیرهمزمان (Asynchronous) برای عملیات‌هایی مانند ارسال درخواست‌های API یا تعاملات با پایگاه داده باشد. فریم‌ورک‌های تست مدرن مانند Jest و Mocha قابلیت‌های ویژه‌ای برای تست‌های غیرهمزمان دارند.

۳.۱. تست‌های Asynchronous با Jest

برای نوشتن تست‌های غیرهمزمان در Jest، می‌توانید از async/await یا done استفاده کنید.

test('fetches data asynchronously', async () => {
  const data = await fetchData();
  expect(data).toEqual('some data');
});
۳.۲. تست‌های Asynchronous با Mocha

در Mocha، برای تست‌های غیرهمزمان می‌توانید از done یا async/await استفاده کنید.

it('should fetch data asynchronously', async function() {
  const data = await fetchData();
  expect(data).to.equal('some data');
});

۴. تست‌های تعامل با DOM

اگر ویژگی جدیدی که پیاده‌سازی کرده‌اید با DOM تعامل دارد (مثل اضافه کردن دکمه یا تغییر ظاهر رابط کاربری)، باید تست‌هایی بنویسید که این تعاملات را شبیه‌سازی کنند.

۴.۱. استفاده از Testing Library

@testing-library/react برای پروژه‌های React یکی از بهترین فریم‌ورک‌ها برای تست تعاملات با DOM است. این کتابخانه به شما این امکان را می‌دهد که به‌راحتی اجزای مختلف رابط کاربری را شبیه‌سازی و آزمایش کنید.

برای نصب:

npm install --save-dev @testing-library/react

نمونه تست:

import { render, screen } from '@testing-library/react';
import Button from './Button'; // فرض بر اینکه یک کامپوننت دکمه دارید

test('button renders with correct text', () => {
  render(<Button />);
  const buttonElement = screen.getByText(/Click me/i);
  expect(buttonElement).toBeInTheDocument();
});

۵. پوشش کد (Code Coverage)

برای اطمینان از اینکه تست‌های شما تمامی قسمت‌های کد را پوشش می‌دهند، می‌توانید از ابزارهای پوشش کد مانند jest --coverage یا nyc استفاده کنید.

برای استفاده از پوشش کد در Jest، فقط کافی است:

npx jest --coverage

این دستور گزارشی از میزان پوشش کد توسط تست‌ها ارائه می‌دهد.


۶. پیاده‌سازی CI/CD برای تست‌های واحد

برای اینکه تست‌ها به‌طور خودکار اجرا شوند، می‌توانید یک سیستم CI/CD مانند GitHub Actions یا Jenkins را برای پروژه خود راه‌اندازی کنید. این کار باعث می‌شود که تست‌ها هر بار که تغییرات جدیدی در کد اعمال می‌شود به‌طور خودکار اجرا شوند.

نمونه‌ای از پیکربندی CI با GitHub Actions:

name: Node.js CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]

    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install
    - run: npm test
      env:
        CI: true

جمع‌بندی

تست واحد یکی از مراحل ضروری در توسعه قابلیت‌های جدید است که به توسعه‌دهندگان کمک می‌کند تا عملکرد صحیح کد را در شرایط مختلف ارزیابی کنند. با استفاده از فریم‌ورک‌های مختلف مانند Jest و Mocha، می‌توان تست‌هایی دقیق و سازمان‌یافته نوشت. همچنین، استفاده از Mocking، تست‌های غیرهمزمان، و شبیه‌سازی تعاملات با DOM می‌تواند به ارتقاء کیفیت ویژگی‌های جدید کمک کند.

 [/cdb_course_lesson][/cdb_course_lessons]

[cdb_course_lessons title=”پاسخ به سوالات فنی کاربران”][cdb_course_lesson icon=”fas fa-arrow-alt-circle-down” badge=”free” title=”پشتیبانی دائمی و در لحظه” subtitle=”توضیحات کامل”]ما در این دوره تمام تلاش خود را کرده‌ایم تا محتوایی جامع و کاربردی ارائه دهیم که شما را برای ورود به دنیای حرفه‌ای آماده کند. اما اگر در طول دوره یا پس از آن با سوالات فنی، چالش‌ها یا حتی مشکلاتی در اجرای مطالب آموزشی مواجه شدید، نگران نباشید!

  1. پرسش‌های شما، بخش مهمی از دوره است:
    هر سوال یا مشکلی که مطرح کنید، با دقت بررسی شده و پاسخ کامل و کاربردی برای آن ارائه می‌شود. علاوه بر این، سوالات و پاسخ‌های شما به دوره اضافه خواهند شد تا برای سایر کاربران نیز مفید باشد.
  2. پشتیبانی دائمی و در لحظه:
    تیم ما همواره آماده پاسخگویی به سوالات شماست. هدف ما این است که شما با خیالی آسوده بتوانید مهارت‌های خود را به کار بگیرید و پروژه‌های واقعی را با اعتماد به نفس کامل انجام دهید.
  3. آپدیت دائمی دوره:
    این دوره به طور مداوم به‌روزرسانی می‌شود تا همگام با نیازهای جدید و سوالات کاربران تکمیل‌تر و بهتر گردد. هر نکته جدید یا مشکل رایج، در نسخه‌های بعدی دوره قرار خواهد گرفت.

حرف آخر

با ما همراه باشید تا نه تنها به مشکلات شما پاسخ دهیم، بلکه در مسیر یادگیری و پیشرفت حرفه‌ای، شما را پشتیبانی کنیم. هدف ما این است که شما به یک متخصص حرفه‌ای و قابل‌اعتماد تبدیل شوید و بتوانید با اطمینان پروژه‌های واقعی را بپذیرید و انجام دهید.

📩 اگر سوالی دارید یا به مشکلی برخوردید، همین حالا مطرح کنید!
ما در کوتاه‌ترین زمان ممکن پاسخ شما را ارائه خواهیم داد. 🙌[/cdb_course_lesson][/cdb_course_lessons]

نوع دوره

کتاب آموزشی، پک آموزشی

برند

نقد و بررسی ها

نقد و بررسی وجود ندارد.

فقط مشتریانی که وارد سیستم شده اند و این محصول را خریداری کرده اند می توانند نظر بدهند.

سبد خرید

سبد خرید شما خالی است.

ورود به سایت