بناء تطبيق Zoom Meeting SDK

# /build-zoom-meeting-sdk-app

مرجع خلفي لاجتماعات Zoom المدمجة عبر بيئات الويب والجوال وسطح المكتب وروبوت Linux. يفضل استخدام `build-zoom-meeting-app` أو `build-zoom-bot` أولا، ثم التوجيه هنا للحصول على تفاصيل المنصة.

# Zoom Meeting SDK

ادمج تجربة اجتماع Zoom الكاملة في تطبيقات الويب والجوال وسطح المكتب والتطبيقات بدون واجهة مستخدم.

## حراس التوجيه الإجباري (اقرأ أولا)

- إذا طلب المستخدم تضمين/الانضمام إلى الاجتماعات داخل واجهة تطبيقه، وجه نحو تطبيق Meeting SDK. - لا تنتقل إلى تدفق REST فقط إلا إذا طلب المستخدم صراحة إدارة موارد الاجتماعات أو روابط `join_url` في المتصفح. - مسار الانضمام إلى Meeting SDK يتطلب توقيع SDK ونداء انضمام SDK؛ REST `join_url` ليست حمولة انضمام Meeting SDK.

## المتطلبات الأساسية

- تطبيق Zoom بيانات اعتماد Meeting SDK - مفتاح SDK والسر من Marketplace - بيئة تطوير خاصة بالمنصة (الويب أو Android أو iOS أو macOS أو Unreal أو Electron أو Linux أو Windows)

> **هل تحتاج إلى مساعدة مع OAuth أو التوقيعات؟** انظر مهارة **[zoom-oauth](../oauth/SKILL.md)** لتدفقات المصادقة.

> **هل تحتاج إلى تشخيصات ما قبل الانضمام على الويب؟** استخدم **[probe-sdk](../probe-sdk/SKILL.md)** قبل تهيئة/انضمام Meeting SDK لحظر الأجهزة/الشبكات منخفضة الجاهزية.

> **ابدأ استكشاف الأخطاء بسرعة:** استخدم **[5-Minute Runbook](RUNBOOK.md)** قبل استكشاف الأخطاء المتقدم.

## البدء السريع (الويب - عرض العميل عبر CDN)

```html <script src="https://source.zoom.us/3.1.6/lib/vendor/react.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/react-dom.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/redux.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/redux-thunk.min.js"></script> <script src="https://source.zoom.us/3.1.6/lib/vendor/lodash.min.js"></script> <script src="https://source.zoom.us/3.1.6/zoom-meeting-3.1.6.min.js"></script>

<script> // CDN provides ZoomMtg (Client View - full page) // For ZoomMtgEmbedded (Component View), use npm instead

ZoomMtg.preLoadWasm(); ZoomMtg.prepareWebSDK();

ZoomMtg.init({ leaveUrl: window.location.href, patchJsMedia: true, disableCORP: !window.crossOriginIsolated, success: function() { ZoomMtg.join({ sdkKey: 'YOUR_SDK_KEY', signature: 'YOUR_SIGNATURE', // Generate server-side! meetingNumber: 'MEETING_NUMBER', userName: 'User Name', passWord: '', // Note: camelCase with capital W success: function(res) { console.log('Joined'); }, error: function(err) { console.error(err); } }); }, error: function(err) { console.error(err); } }); </script> ```

## ملاحظات حرجة (الويب)

### 1. CDN مقابل npm - واجهات برمجية مختلفة!

| التوزيع | الكائن العام | نوع العرض | نمط API | |---------|-------------|----------|--------| | CDN (`zoom-meeting-{ver}.min.js`) | `ZoomMtg` | عرض العميل (الصفحة الكاملة) | Callbacks | | npm (`@zoom/meetingsdk`) | `ZoomMtgEmbedded` | عرض المكون (قابل للتضمين) | Promises |

### 2. الخادم الخلفي مطلوب للإنتاج

**لا تعرض سر SDK في كود العميل.** أنشئ التوقيعات من جانب الخادم:

```javascript // server.js (مثال Node.js) const KJUR = require('jsrsasign');

app.post('/api/signature', (req, res) => { const { meetingNumber, role } = req.body; const iat = Math.floor(Date.now() / 1000) - 30; const exp = iat + 60 * 60 * 2; const header = { alg: 'HS256', typ: 'JWT' }; const payload = { sdkKey: process.env.ZOOM_SDK_KEY, mn: String(meetingNumber).replace(/\D/g, ''), role: parseInt(role, 10), iat, exp, tokenExp: exp }; const signature = KJUR.jws.JWS.sign('HS256', JSON.stringify(header), JSON.stringify(payload), process.env.ZOOM_SDK_SECRET ); res.json({ signature, sdkKey: process.env.ZOOM_SDK_KEY }); }); ```

### 3. تضارب CSS - تجنب إعادة تعيين النمط العام

إعادة تعيين النمط العام `* { margin: 0; }` تكسر واجهة Zoom. حدد نطاق أنماطك:

```css /* سيء */ * { margin: 0; padding: 0; }

/* جيد */ .your-app, .your-app * { box-sizing: border-box; } ```

### 4. إصلاح قص شريط الأدوات في عرض العميل

إذا سقط شريط الأدوات خارج الشاشة، قلل حجم واجهة Zoom:

```css #zmmtg-root { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; /* حرج لـ SPAs (React/Next/إلخ): تأكد من عدم وجود واجهة Zoom خلف قذيفة تطبيقك/التراكبات. */ z-index: 9999 !important; transform: scale(0.95) !important; transform-origin: top center !important; } ```

### 5. أخف تطبيقك عند بدء الاجتماع

يستحوذ عرض العميل على الصفحة الكاملة. أخف واجهتك:

```javascript // في رد نجاح ZoomMtg.init: document.documentElement.classList.add('meeting-active'); document.body.classList.add('meeting-active'); ```

```css body.meeting-active .your-app { display: none !important; } body.meeting-active { background: #000 !important; } ```

## خيارات واجهة المستخدم (الويب)

يوفر Meeting SDK **واجهة Zoom مع خيارات التخصيص**:

| العرض | الوصف | |------|-------| | **عرض المكون** | استخراج |