حزم SDK / JavaScript

JavaScript

@sada/web يضع صوت WebRTC في المتصفح: Sada.join() واحد برمز من خادمك، بضعة أحداث، كتم ومغادرة. ESM بلا اعتماديات.

حُدّث في 21 أكتوبر 2026 عدّل هذه الصفحة

01التثبيت

الحزمة ESM فقط وتعمل مع أي bundler أو مباشرة من <script type="module">. المتصفحات لا تتيح الميكروفون إلا على HTTPS أو localhost.

$ npm install @sada/web

02الانضمام إلى مكالمة

اطلب رمزاً من خادمك أولاً (يستدعي POST /calls/{call_id}/tokens)، ثم مرّره إلى Sada.join(). يُحلّ الوعد حين يصبح المشارك داخل المكالمة؛ وطلب إذن الميكروفون يحدث في الداخل.

call.js

1 import { Sada } from '@sada/web';

3 // 1. Your server creates the call and mints a token for this user.

4 const { token } = await fetch('/calls', { method: 'POST' }).then((r) => r.json());

6 // 2. Join: the browser asks for the microphone here.

7 const call = await Sada.join({

8 token,

9 displayName: 'Hussein Alaa',

10 baseUrl: 'https://sada.g4t.io', // default

11 });

13 call.id; // "call_k3j9x2m7qa"

14 call.me; // { id, userRef, name, muted }

15 call.participants; // [{ id, userRef, name, muted }, …]

03الأحداث

call.on(event, handler) يعيد دالة تزيل ذلك المعالج. الأحداث التي تطلقها المكالمة:

الحدث	البيانات	الوصف
`participant-joined`	`{ id, userRef, name, muted }`	انضم أحدهم؛ `p` هو المشارك الجديد.
`participant-left`	`{ id, userRef, name, muted }`	غادر أحدهم.
`connected`	`—`	الصوت يتدفق — أظهر المؤقت الآن.
`quality`	`{ isPoor, rtt, packetLoss }`	تغيّرت الشبكة. `isPoor` يقول إن كان عليك التحذير؛ `rtt` بالميلي ثانية و`packetLoss` بالنسبة المئوية.
`muted`	`{ participant, muted }`	مشارك (ربما أنت) كتم صوته أو ألغى الكتم.
`ended`	`{ reason: 'left' \| 'ended' \| 'error', minutes }`	انتهت المكالمة بالنسبة لك: غادرت، أو أنهاها الخادم، أو فشلت. `minutes` دقائق المشارك الخاصة بك.
`error`	`Error`	خطأ غير قاتل يستحق التسجيل.

call.js

1 const off = call.on('participant-joined', (p) => addTile(p));

3 call.on('participant-left', (p) => removeTile(p.id));

4 call.on('connected', () => setStatus('connected')); // media is flowing

5 call.on('quality', ({ isPoor, rtt, packetLoss }) => banner.toggle(isPoor));

6 call.on('muted', ({ participant, muted }) => tile(participant.id).muted = muted);

7 call.on('ended', ({ reason, minutes }) => showSummary(reason, minutes)); // 'left' | 'ended' | 'error'

8 call.on('error', (err) => console.error(err));

10 off(); // remove that one listener

04الكتم والمكبّر والمغادرة

setMuted وsetSpeaker يعيدان وعوداً. تبديل المكبّر يعتمد على المتصفح: setSpeaker يُحلّ بـ false حيث لا يمكن اختيار جهاز الإخراج (معظم متصفحات الهاتف)، وعندها يُستخدم الافتراضي للنظام.

call.js

1 await call.setMuted(true);

2 call.muted; // true

4 const switched = await call.setSpeaker(true); // false where the browser cannot switch outputs

6 await call.leave(); // fires 'ended' with reason 'left'

05كائن المكالمة

ما يُحلّ به Sada.join().

الخاصية	النوع	الوصف
`call.id`	`string`	الـ `call_id` من خادمك.
`call.me`	`{ id, userRef, name, muted }`	مشاركك أنت.
`call.participants`	`Participant[]`	كل من في المكالمة الآن، وأنت منهم.
`call.muted`	`boolean`	هل ميكروفونك مكتوم.

06متطلبات المتصفح

أي إصدار حديث من Chrome أو Edge أو Firefox أو Safari ‏(iOS 15+). HTTPS إلزامي إلا على localhost. على iOS يجب أن يتفاعل المستخدم مع الصفحة قبل تشغيل الصوت، فاستدعِ Sada.join() من معالج نقرة.

✓ شكراً، وصلتنا ملاحظتك.

→ السابق Flutter التالي ← Laravel