שילוב שיחות וידאו של Daily.co לאתרים

הערה: כשהלקוח הראשון ביקש מאיתנו להטמיע שיחות וידאו באתר ייעוץ רפואי, נתקלנו בבעיה טיפוסית: זה היה צריך להיות מהיר, מאובטח, וללא צורך בהתקנת אפליקציה. הבעיה היא שפרטיות הייעוץ הרפואי היא קריטית — נדרשים הצפנה ובקרת גישה, כמו גם אינטגרציה עם CRM לצורך הקלטת שיחות. בחרנו ב-Daily.co — פלטפורמת WebRTC עננית עם SDK JavaScript פשוט. Daily.co בולטת בתשתית המוכנה שלה: אין צורך להקים שרתי STUN/TURN, ו-API פשוט יוצר חדר עם בקשה אחת. האינטגרציה עם Daily.co מהירה פי 3–4 מאשר עם Twilio Video, ו-10,000 הדקות הראשונות בחודש הן בחינם. עבור סטארטאפים, זה גורם מכריע. לפי התיעוד של Daily.co, יצירת חדר דורשת בקשת API אחת. מגבלת 10,000 הדקות החינמיות חוסכת עד 500$ בחודש בהשוואה להשכרת שרתים משלך. הפלטפורמה מבטיחה זמינות של 99.9%, מה שמבטיח קישוריות וידאו יציבה.

אילו בעיות אנחנו פותרים

פרטיות הייעוצים. כברירת מחדל, חדר פתוח לכל מי שיודע את ה-URL. פתרנו זאת באמצעות אסימוני פגישה: כל משתתף מקבל אסימון אישי שנוצר בקצה העורפי ותקף רק למשך השיחה. אמצעי האבטחה שלנו לשיחות וידאו כוללים הצפנה מקצה לקצה.

התאמת ממשק משתמש. Daily Prebuilt לא התאים לעיצוב האתר — כפתורים, צבעים, פריסה. בנינו רכיב שיחות וידאו מותאם אישית ב-React באמצעות @daily-co/daily-js שמתאים לכל פריסה.

קנה מידה. העומס גדל מ-10 ל-100 חדרים במקביל. Daily.co מטפלת בתשתית WebRTC; אנחנו רק עוקבים אחרי מגבלות — 50 משתתפים לחדר בתוכנית הבסיסית, עד 200 בתוכנית הארגונית.

פתרון פרטיות שיחות וידאו

עבור חדרים פרטיים, צור אסימון פגישה של Daily באמצעות POST /v1/meeting-tokens. האסימון מקושר לשם משתתף ולחדר; ניתן להגדיר הרשאות (בעלים, הקלטה). ללא אסימון, כל מי שיש לו את ה-URL יכול להצטרף. יצירת אסימון בקצה העורפי והעברתו ללקוח דרך API היא תבנית סטנדרטית.

התאמת ממשק שיחות הווידאו

Daily.co מאפשרת להטמיע iframe עם CSS מותאם אישית או להשתמש ב-Daily Prebuilt עם הגדרות כפתורים. לשליטה מלאה בממשק, השתמש ב-@daily-co/daily-js כדי ליצור פקדים משלך. יישמנו רכיב React שמחליף אלמנטים ברירת מחדל ומשתלב עם מערכת העיצוב.

למה Daily.co על פני Twilio Video או Zoom Embed?

Daily.co מנצחת במהירות היישום: כל המחזור אורך 3–4 ימים לעומת 1–2 שבועות אצל המתחרים. האינטגרציה שלנו מקצרת את זמן הפיתוח ב-75% בהשוואה לבנייה מאפס.

איך אנחנו עושים את זה

טכנולוגיות: React 18, Node.js (Nest.js), PostgreSQL לאחסון שיחות. הקצה העורפי מנהל חדרים דרך ה-API של Daily.co, והקצה הקדמי משתמש ב-@daily-co/daily-js לתצוגה.

יצירת חדר ב-Daily — דרך POST /v1/rooms עם מפתח בכותרת. דוגמה ב-TypeScript:

const DAILY_API_KEY = process.env.DAILY_API_KEY;

async function createRoom(options: {
  name?: string;
  expiresInMinutes?: number;
  maxParticipants?: number;
}): Promise<{ url: string; name: string }> {
  const response = await fetch('https://api.daily.co/v1/rooms', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${DAILY_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: options.name ?? `room-${Date.now()}`,
      properties: {
        exp: Math.floor(Date.now() / 1000) + (options.expiresInMinutes ?? 60) * 60,
        max_participants: options.maxParticipants ?? 10,
        enable_screenshare: true,
        enable_chat: true,
        enable_recording: false,
        start_video_off: false,
        start_audio_off: false,
      },
    }),
  });
  const room = await response.json();
  return { url: room.url, name: room.name };
}

// API для создания сессии
app.post('/api/video/room', authenticate, async (req, res) => {
  const { consultationId } = req.body;
  const room = await createRoom({
    name: `consultation-${consultationId}`,
    expiresInMinutes: 90,
    maxParticipants: 2,
  });
  await db.consultations.update(consultationId, { roomUrl: room.url });
  res.json({ url: room.url });
});

אסימון משתתף — חובה לחדרים פרטיים. נוצר בקצה העורפי ומועבר ללקוח דרך API:

async function createMeetingToken(roomName: string, participantName: string, isOwner = false) {
  const response = await fetch('https://api.daily.co/v1/meeting-tokens', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${DAILY_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      properties: {
        room_name: roomName,
        user_name: participantName,
        is_owner: isOwner,
        exp: Math.floor(Date.now() / 1000) + 90 * 60,
        enable_recording: isOwner,
      },
    }),
  });
  const { token } = await response.json();
  return token;
}

רכיב React עם Daily JS SDK

npm install @daily-co/daily-js 

import DailyIframe from '@daily-co/daily-js';
import { useEffect, useRef, useState } from 'react';

interface VideoCallProps {
  roomUrl: string;
  token: string;
  userName: string;
  onLeave?: () => void;
}

function VideoCall({ roomUrl, token, userName, onLeave }: VideoCallProps) {
  const callRef = useRef<ReturnType<typeof DailyIframe.createFrame> | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [status, setStatus] = useState<'idle' | 'joining' | 'joined' | 'left'>('idle');

  useEffect(() => {
    if (!containerRef.current) return;

    const call = DailyIframe.createFrame(containerRef.current, {
      showLeaveButton: true,
      showFullscreenButton: true,
      iframeStyle: {
        width: '100%',
        height: '100%',
        border: 'none',
        borderRadius: '12px',
      },
    });

    callRef.current = call;

    call.on('joining-meeting', () => setStatus('joining'));
    call.on('joined-meeting', () => setStatus('joined'));
    call.on('left-meeting', () => {
      setStatus('left');
      onLeave?.();
    });
    call.on('error', (err) => console.error('Daily error:', err));

    call.join({ url: roomUrl, token, userName });

    return () => {
      call.destroy();
    };
  }, [roomUrl, token]);

  return (
    <div className="relative" style={{ height: 600 }}>
      {status === 'joining' && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-900 rounded-xl z-10">
          <p className="text-white">Подключение...</p>
        </div>
      )}
      {status === 'left' && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-900 rounded-xl z-10">
          <p className="text-white text-lg">Звонок завершён</p>
        </div>
      )}
      <div ref={containerRef} className="w-full h-full" />
    </div>
  );
}

איך להגדיר webhooks?

Daily.co שולחת אירועים לשרת שלך — סטטוס חדר, חיבורי משתתפים, משך שיחה:

app.post('/api/webhooks/daily', async (req, res) => {
  const { event_type, payload } = req.body;
  switch (event_type) {
    case 'meeting.started':
      await db.videoSessions.markStarted(payload.room.name);
      break;
    case 'meeting.ended':
      await db.videoSessions.markEnded(payload.room.name, {
        duration: payload.meeting_duration,
      });
      break;
    case 'participant.joined':
      await db.videoSessions.addParticipant(payload.room.name, payload.participant.user_name);
      break;
  }
  res.status(200).end();
});

הפניה: WebRTC API

מהם השלבים בעבודה?

1. ניתוח — בחינת עומס, דרישות פרטיות, צורך בהקלטה.
2. עיצוב — ארכיטקטורה: קצה עורפי (יצירת חדרים, אסימונים), קצה קדמי (רכיב), webhooks.
3. יישום — כתיבת קוד, הגדרת מפתחות API, אינטגרציה עם CRM/ERP.
4. בדיקות — בדיקת שיחות מקבילות, איכות וידאו ברשת 3G, התאוששות לאחר אובדן רשת.
5. פריסה — פריסה על השרת שלך או בענן, הדרכת הצוות.

מה כלול בעבודה

• קוד אינטגרציה מלא (קצה עורפי + קצה קדמי) עם הערות
• תיעוד הגדרת API ו-webhook
• גישה לסביבת בדיקות
• הדרכת מפתחים (שעה)
• חודש תמיכה טכנית לאחר ההשקה

לוחות זמנים

המחיר מחושב באופן אישי. נבחן את הפרויקט שלך תוך יום עבודה אחד. הצוות שלנו סיפק למעלה מ-30 פרויקטי WebRTC. עם ניסיון של 5+ שנים, אנחנו מספקים אינטגרציה אמינה. לשיחות וידאו בדפדפן, אנחנו משתמשים ב-SDK של Daily.co. לייעוצי וידאו באתר, אנחנו מבטיחים פרטיות ואבטחה. קבל הערכת מחיר לפרויקט שלך — צור קשר לייעוץ. פנה אלינו כדי לדון באינטגרציה. קבל ייעוץ — נבחן את הפרויקט שלך תוך יום אחד.