كود غرفة الفيديو

نسخ الكود كاملاً

انسخ هذا الكود في ملف HTML جديد، ضع مفتاح API الخاص بك، وافتحه في المتصفح.

💡 غيّر قيمة <code style="color:#D4A843;">msk_live_Your_api_key</code> بمفتاحك من لوحة التحكم.

room.html — الملف الكامل

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Room</title>
  <!-- MENA-Stream SDK -->
  <script src="https://api.mena-stream.com/mena-stream-sdk.js"></script>
</head>
<body style="margin:0;background:#050810;color:#f0f4ff;font-family:sans-serif;">

  <!-- Pre-join form -->
  <div id="prejoin">
    <input id="inp-name" placeholder="اسمك">
    <input id="inp-room" placeholder="اسم الغرفة">
    <input id="cfg-key" value="msk_live_Your_api_key" placeholder="API Key">
    <button onclick="start()">ابدأ الاجتماع</button>
  </div>

  <!-- Video grid -->
  <div id="grid" style="display:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;"></div>

  <!-- Controls -->
  <div id="controls" style="display:none;position:fixed;bottom:0;width:100%;text-align:center;padding:12px;background:#0c1426;">
    <button onclick="toggleMic()">🎤 Mic</button>
    <button onclick="toggleCam()">📷 Camera</button>
    <button onclick="leave()" style="background:red;color:#fff;">📵 End</button>
  </div>

<script>
let session = null, room = null, micOn = true, camOn = true;

async function start() {
  const name   = document.getElementById('inp-name').value.trim();
  const rName  = document.getElementById('inp-room').value.trim();
  const apiKey = document.getElementById('cfg-key').value.trim();

  const { MenaStreamClient } = window.MenaStreamSDK;
  const client = new MenaStreamClient({
    apiKey,
    baseUrl: 'https://api.mena-stream.com'
  });

  room    = await client.createRoom({ name: rName });
  session = await room.join({ displayName: name, role: 'moderator' });

  // Start camera + mic
  const stream = await session.enableCamera();
  addVideo('local', name, stream, true);

  // Show controls, hide form
  document.getElementById('prejoin').style.display  = 'none';
  document.getElementById('grid').style.display     = 'grid';
  document.getElementById('controls').style.display = 'flex';

  // Listen for other participants
  session.addEventListener('newProducer', async ({ detail }) => {
    const track  = await session.consume(detail.producerId);
    const stream = new MediaStream([track]);
    if (detail.kind === 'video') addVideo(detail.participantId, 'Guest', stream, false);
  });
}

function addVideo(id, name, stream, muted) {
  let v = document.getElementById(`v-${id}`);
  if (!v) {
    v = document.createElement('video');
    v.id        = `v-${id}`;
    v.autoplay  = true;
    v.playsInline = true;
    v.muted     = muted;
    v.style.cssText = 'width:100%;border-radius:10px;background:#111;aspect-ratio:16/9;';
    document.getElementById('grid').appendChild(v);
  }
  v.srcObject = stream;
}

function toggleMic()  { micOn = !micOn; session.setAudioEnabled(micOn); }
function toggleCam()  { camOn = !camOn; session.setVideoEnabled(camOn); }
function leave()     { session?.disconnect(); location.reload(); }
</script>
</body>
</html>

تثبيت SDK

طريقتان للاستخدام:

CDN (بدون تثبيت)

html

<script src="https://api.mena-stream.com/mena-stream-sdk.js"></script>

npm

bash

npm install @mena-stream/client

هيكل HTML

الهيكل الأساسي للصفحة — 3 أقسام رئيسية:

ℹ️ كل قسم يظهر ويختفي حسب حالة الاتصال.

html

<!-- 1. Pre-join: يظهر قبل الاتصال -->
<div id="prejoin">...</div>

<!-- 2. Video Grid: يظهر بعد الاتصال -->
<div id="grid" style="display:none"></div>

<!-- 3. Controls: أزرار التحكم -->
<div id="controls" style="display:none"></div>

نموذج الدخول

نموذج بسيط يجمع الاسم ومفتاح API قبل الدخول للغرفة.

html

<div id="prejoin">
  <input id="inp-name"  placeholder="اسمك">
  <input id="inp-room"  placeholder="اسم الغرفة">
  <input id="cfg-key"
         value="msk_live_Your_api_key"
         placeholder="API Key">
  <button onclick="start()">ابدأ</button>
</div>

شبكة الفيديو

دالة تضيف فيديو لكل مشارك ديناميكياً.

javascript

function addVideo(id, name, stream, muted) {
  let v = document.getElementById(`v-${id}`);

  if (!v) {
    v             = document.createElement('video');
    v.id          = `v-${id}`;
    v.autoplay    = true;
    v.playsInline = true;
    v.muted       = muted; // مهم: local video دائماً muted
    v.style.cssText = 'width:100%;border-radius:10px;aspect-ratio:16/9;';
    document.getElementById('grid').appendChild(v);
  }

  v.srcObject = stream;
}

// استخدام:
// addVideo('local', myName, localStream, true)  ← الكاميرا المحلية
// addVideo(pid, guestName, stream, false)        ← كاميرا ضيف

أزرار التحكم

3 دوال أساسية للتحكم في الميكروفون والكاميرا ومغادرة الغرفة.

javascript

let micOn = true, camOn = true;

function toggleMic() {
  micOn = !micOn;
  session.setAudioEnabled(micOn);
}

function toggleCam() {
  camOn = !camOn;
  session.setVideoEnabled(camOn);
}

function leave() {
  session?.disconnect();
  location.reload(); // أو عُد لصفحة أخرى
}

ربط SDK وإنشاء الغرفة

الكود الأساسي للاتصال بالمنصة وإنشاء الغرفة.

⚠️ لا تضع API Key في كود frontend في الإنتاج — استخدم backend يجلب الـ Token.

javascript

async function start() {
  const name   = document.getElementById('inp-name').value;
  const rName  = document.getElementById('inp-room').value;
  const apiKey = document.getElementById('cfg-key').value;

  // 1. Initialize client
  const { MenaStreamClient } = window.MenaStreamSDK;
  const client = new MenaStreamClient({
    apiKey,
    baseUrl: 'https://api.mena-stream.com'
  });

  // 2. Create or get room
  const room = await client.createRoom({
    name:            rName,
    maxParticipants: 50,
  });

  // 3. Join as moderator
  const session = await room.join({
    displayName: name,
    role:        'moderator', // أو 'participant'
  });

  // 4. Enable camera + mic
  const stream = await session.enableCamera();
  addVideo('local', name, stream, true);

  // 5. Listen for new participants
  session.addEventListener('newProducer', async ({ detail }) => {
    const track  = await session.consume(detail.producerId);
    const stream = new MediaStream([track]);
    if (detail.kind === 'video') {
      addVideo(detail.participantId, 'Guest', stream, false);
    }
  });
}

قائمة الأحداث

جميع الأحداث التي يمكنك الاستماع لها عبر session.addEventListener.

الحدث	الداتا	الاستخدام
newProducer	{ participantId, producerId, kind }	مشارك جديد أو مشاركة شاشة
participantJoined	{ participantId, displayName }	إظهار إشعار الانضمام
participantLeft	{ participantId }	إزالة فيديو المشارك
activeSpeakers	{ speakers: [...] }	تمييز المتحدث النشط
admissionRequest	{ participantId, displayName }	طلب دخول جديد
admissionGranted	{}	تم قبولك في الغرفة
admissionDenied	{}	تم رفضك
networkQuality	{ quality: good\|fair\|poor }	مؤشر جودة الشبكة
disconnected	{}	انقطع الاتصال
reconnecting	{}	جاري إعادة الاتصال
reconnected	{}	تم إعادة الاتصال

javascript — مثال

// مشارك انضم
session.addEventListener('participantJoined', ({ detail }) => {
  console.log(`${detail.displayName} joined`);
});

// مشارك غادر
session.addEventListener('participantLeft', ({ detail }) => {
  document.getElementById(`v-${detail.participantId}`)?.remove();
});

// جودة الشبكة
session.addEventListener('networkQuality', ({ detail }) => {
  if (detail.quality === 'poor') {
    alert('اتصالك ضعيف');
  }
});

كود غرفة الفيديو الكاملة

نسخ الكود كاملاً

تثبيت SDK

هيكل HTML

نموذج الدخول

شبكة الفيديو

أزرار التحكم

ربط SDK وإنشاء الغرفة

قائمة الأحداث