שילוב 100ms לוועידות וידאו באתר שלך

שילוב 100ms לוועידות וידאו באתר שלך

בעיה טיפוסית: הטמעת iframe של Zoom, אבל המשתתפים מתלוננים על עיכובים, התאמה אישית של הממשק בלתי אפשרית, והסקיילינג מוגבל. 100ms פותרת זאת באמצעות SDK עם שליטה מלאה. 100ms — פלטפורמת WebRTC עם React SDK, רכיבי UI מוכנים לשימוש, ותמחור גמיש. התכונה המרכזית היא חדרים ותבניות: אתה יוצר תבנית בדשבורד (הגדרות תפקידים, הקלטה, איכות), ולאחר מכן יוצר חדרים על בסיסה. זה מבטל ניהול הרשאות ידני ומאפשר סקיילינג של ועידות וידאו למאות משתתפים ללא עומס על השרת.

אנו משתמשים ב-100ms להטמעת ועידות וידאו עם שליטה מלאה: תפקידים מותאמים אישית, הקלטה, התאמת ממשק. ללא פריצות iframe או מגבלות Zoom. אם מאה משתמשים באתר שלך מנסים להצטרף לוועידה בו-זמנית, 100ms מתמודדת עם זה באמצעות חדרים ותבניות. הלקוחות שלנו חוסכים בממוצע $5000 בפיתוח פתרון WebRTC משלהם על ידי מעבר ל-100ms.

אילו בעיות 100ms פותרת?

100ms מנהלת תפקידים ביעילות: אתה יוצר תבנית עם תפקידים כמו מארח, אורח, צופה. כל משתתף מקבל טוקן עם התפקיד המתאים. הקלטת ענן של ועידות מופעלת בתבנית, webhooks מודיעים על התחלה וסיום. WebRTC מבטיח תקשורת בזמן אמת עם חביון מינימלי — מאומת על ידי בדיקות עומס. Roomkit מאפשר לך לשנות את הממשק כך שיתאים למותג שלך — צבעים, מיקום אלמנטים, כפתורים מותאמים אישית.

למה 100ms עדיפה על פתרון WebRTC מותאם אישית?

WebRTC מותאם אישית דורש הטמעת שרתי STUN/TURN, signaling, ניהול חדרים וטוקנים. 100ms מספקת הכל מוכן: backend מוכן ליצירת חדרים, יצירת טוקנים וניטור. זה מקצר את זמן הפיתוח בשבועות ומפחית את הסיכון לשגיאות. לפי הנתונים שלנו, שילוב 100ms מהיר פי 3 מפיתוח פתרון WebRTC מותאם אישית. העלות לדקת וידאו ב-100ms מתחילה ב-$0.004, זולה משמעותית מהחלופות (Twilio ~$0.008, Agora ~$0.007). כך, אתה חוסך גם זמן וגם כסף.

איך עובד שילוב 100ms באתר שלך?

אנו בונים API בצד השרת ליצירת חדרים ויצירת טוקנים. ה-SDK של הלקוח (React) מתחבר לחדר ומנהל זרמי אודיו/וידאו. להלן השלבים המרכזיים.

יצירת חדר וקבלת טוקן

npm install @100mslive/roomkit-react @100mslive/react-sdk 

// На сервере — Management Token для API
import jwt from 'jsonwebtoken';

function generateManagementToken(): string {
  return jwt.sign(
    {
      access_key: process.env.HMS_ACCESS_KEY,
      type: 'management',
      version: 2,
      iat: Math.floor(Date.now() / 1000),
      nbf: Math.floor(Date.now() / 1000),
    },
    process.env.HMS_APP_SECRET!,
    {
      algorithm: 'HS256',
      expiresIn: '24h',
    }
  );
}

// Создать комнату
async function createRoom(name: string): Promise<string> {
  const mgmtToken = generateManagementToken();
  const response = await fetch('https://api.100ms.live/v2/rooms', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${mgmtToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name,
      template_id: process.env.HMS_TEMPLATE_ID, // из 100ms Dashboard
    }),
  });
  const room = await response.json();
  return room.id;
}

// Получить App Token для участника
async function getAppToken(roomId: string, userId: string, role: string): Promise<string> {
  const mgmtToken = generateManagementToken();
  const response = await fetch('https://api.100ms.live/v2/auth-token', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${mgmtToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      room_id: roomId,
      user_id: userId,
      role, // роль из Template: 'host', 'guest', 'viewer'
    }),
  });
  const { token } = await response.json();
  return token;
}

// API endpoint
app.post('/api/video/join', authenticate, async (req, res) => {
  const { sessionId } = req.body;
  let session = await db.videoSessions.findById(sessionId);
  if (!session.hmsRoomId) {
    const roomId = await createRoom(`session-${sessionId}`);
    session = await db.videoSessions.update(sessionId, { hmsRoomId: roomId });
  }
  const isHost = session.hostId === req.user.id;
  const token = await getAppToken(session.hmsRoomId, req.user.id, isHost ? 'host' : 'guest');
  res.json({ token });
});

רכיב React עם Roomkit

import { HMSRoomProvider, useHMSActions, useHMSStore, selectIsConnectedToRoom, selectPeers, selectLocalPeer, HMSPeer, } from '@100mslive/react-sdk';

function VideoConference({ authToken, userName }: { authToken: string; userName: string }) {
  return (
    <HMSRoomProvider>
      <VideoRoom authToken={authToken} userName={userName} />
    </HMSRoomProvider>
  );
}

function VideoRoom({ authToken, userName }) {
  const hmsActions = useHMSActions();
  const isConnected = useHMSStore(selectIsConnectedToRoom);
  const peers = useHMSStore(selectPeers);
  const localPeer = useHMSStore(selectLocalPeer);

  useEffect(() => {
    hmsActions.join({
      authToken,
      userName,
      settings: {
        isAudioMuted: false,
        isVideoMuted: false
      }
    });
    return () => {
      hmsActions.leave();
    };
  }, [authToken]);

  if (!isConnected) {
    return <div className="flex items-center justify-center h-64">Подключение...</div>;
  }

  return (
    <div>
      <div className="grid grid-cols-2 gap-4 p-4">
        {peers.map(peer => (
          <PeerTile key={peer.id} peer={peer} />
        ))}
      </div>
      <div className="flex gap-3 justify-center p-4">
        <button onClick={() => hmsActions.setLocalAudioEnabled(!localPeer?.audioEnabled)} className="p-3 rounded-full bg-gray-800 text-white">
          {localPeer?.audioEnabled ? '🎤' : '🔇'}
        </button>
        <button onClick={() => hmsActions.setLocalVideoEnabled(!localPeer?.videoEnabled)} className="p-3 rounded-full bg-gray-800 text-white">
          {localPeer?.videoEnabled ? '📹' : '📷'}
        </button>
        <button onClick={() => hmsActions.leave()} className="p-3 rounded-full bg-red-600 text-white">
          Покинуть
        </button>
      </div>
    </div>
  );
}

function PeerTile({ peer }: { peer: HMSPeer }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const hmsActions = useHMSActions();
  const videoTrack = useHMSStore(selectCameraStreamByPeerID(peer.id));

  useEffect(() => {
    if (videoRef.current && videoTrack) {
      hmsActions.attachVideo(videoTrack.id, videoRef.current);
    }
    return () => {
      if (videoRef.current && videoTrack) {
        hmsActions.detachVideo(videoTrack.id, videoRef.current);
      }
    };
  }, [videoTrack]);

  return (
    <div className="relative bg-gray-900 rounded-xl overflow-hidden aspect-video">
      <video ref={videoRef} autoPlay muted={peer.isLocal} playsInline className="w-full h-full object-cover" />
      <span className="absolute bottom-2 left-2 text-white text-sm bg-black/50 px-2 rounded">
        {peer.name} {peer.isLocal && '(вы)'}
      </span>
    </div>
  );
}

מה כלול בשילוב?

Backend API: נקודות קצה בשרת ליצירת חדרים, יצירת טוקנים וניהול תבניות. רכיבי React: חיבור Roomkit, התאמת ממשק למותג שלך. הגדרת תבניות: יצירת תבניות בדשבורד של 100ms עם תפקידים ואפשרויות הקלטה רצויות. בדיקות: בדיקת יציבות עם חיבורים בו-זמניים של 50+ משתתפים. תיעוד: תיאור API והוראות פריסה. תמיכה לאחר השילוב: ייעוץ לאחר ההטמעה.

השוואה בין 100ms לפתרונות WebRTC אחרים

100ms מנצחת בהתאמה אישית ובקלות השילוב, ומחזיקה בעמדת מחיר בינונית. אנו עוזרים לבחור את הפתרון האופטימלי למשימות שלך.

שלבי שילוב 100ms

לוח זמנים

שילוב 100ms עם יצירת חדרים, טוקנים ורכיב React — 2–3 ימים. עם תפקידים, הקלטה ו-webhooks — 4–5 ימים. צור קשר כדי לדון בפרטי הפרויקט שלך.

למה לבחור בנו?

לצוות שלנו יש ניסיון של למעלה מ-5 שנים בפיתוח web ובשילוב פתרונות WebRTC. אנו מבטיחים יציבות של ועידות וידאו תחת עומס ומספקים תמיכה טכנית לאחר ההטמעה. מומחים מוסמכים שומרים על הקוד מעודכן ועוקבים אחר עדכוני SDK. הטכנולוגיות המרכזיות: React, TypeScript, Node.js, 100ms SDK.

קבל ייעוץ — נעריך את הפרויקט שלך ונציע את הפתרון האופטימלי לשילוב ועידות וידאו. קבל ייעוץ על שילוב 100ms. צור קשר כדי לדון בפרטים.