كيفية اضافة اتصال فيديو الى الموقع الخاص بي

أسهل و أسرع طريقة هي استخدم https://videosdk.live/ توفير مكالمة فيديو مضمنة في SDK تم إنشاؤه مسبقًا وإضافة مكالمات فيديو على موقع الويب والتطبيق الخاص بك باستخدام بضعة أسطر من التعليمات البرمجية ولا شيء يمكن أن يكون أبسط من تجربة دردشة الفيديو الأفضل مع 10 أسطر فقط من التعليمات البرمجية.

يتيح إجراء مكالمات الفيديو المضمنة الفرصة لدمج SDK للاتصال في الوقت الفعلي دون كتابة تعليمات برمجية صريحة. وهو يدعم جميع أطر جافا سكريبت الحديثة مثل React JS, Vue, and Angular including Vanilla JS.

• 10000 دقيقة مجانية كل شهر
• كود منخفض تمامًا وبدون خادم.
• Video API مع تدفقات الصوت والفيديو والبيانات في الوقت الحقيقي
• أكثر من 5000 مشارك يدعمون
• دعم الدردشة مع الوسائط الغنية.
• مشاركة الشاشة بجودة HD و Full HD.
• تشغيل الفيديو في الوقت الحقيقي في الاجتماع
• قم بتوصيله بوسائل التواصل الاجتماعي مثل Facebook و Youtube وغيرها (دعم RTMP خارج).
• مفتاح مكبر الصوت الذكي
• سجل اجتماعاتك على السحابة
• دعم داخلي للسبورة البيضاء والاستطلاع والأسئلة والأجوبة.
• تخصيص واجهة المستخدم حسب احتياجاتك.

الخطوات 

1. دخول إلي https://app.videosdk.live/ وتسجيل فيه
2. ثم نضغط علي  Generate an API key and Secret

     3.قم باستيراد البرنامج النصي في صفحة html الخاصة بك 

 <script src="https://sdk.videosdk.live/rtc-js-prebuilt/0.1.21/rtc-js-prebuilt.js"></script>

  أو يمكنك استخدام Npm package: rtc-js-prebuilt

     4.قم بتضمين كود جافا سكريبت الذي تم إنشاؤه مسبقًا لمكالمات الفيديو في صفحة HTML الخاصة بك

<script>
  var script = document.createElement("script");
  script.type = "text/javascript";

  script.addEventListener("load", function (event) {
    const meeting = new VideoSDKMeeting();

    const config = {
      name: "John Doe",
      apiKey: "<API KEY>", // generated in Setup
      meetingId: "milkyway", // enter your meeting id

      containerId: null,
      redirectOnLeave: "https://www.videosdk.live/",

      micEnabled: true,
      webcamEnabled: true,
      participantCanToggleSelfWebcam: true,
      participantCanToggleSelfMic: true,

      chatEnabled: true,
      screenShareEnabled: true,
      pollEnabled: true,
      whiteBoardEnabled: true,
      raiseHandEnabled: true,

      recordingEnabled: true,
      recordingWebhookUrl: "https://www.videosdk.live/callback",
      participantCanToggleRecording: true,

      brandingEnabled: true,
      brandLogoURL: "https://picsum.photos/200",
      brandName: "Awesome startup",
      poweredBy: true,

      participantCanLeave: true, // if false, leave button won't be visible

      // Live stream meeting to youtube
      livestream: {
        autoStart: true,
        outputs: [
          // {
          //   url: "rtmp://x.rtmp.youtube.com/live2",
          //   streamKey: "<STREAM KEY FROM YOUTUBE>",
          // },
        ],
      },

      whiteboardEnabled: true,

      permissions: {
        askToJoin: false, // Ask joined participants for entry in meeting
        toggleParticipantMic: true, // Can toggle other participant's mic
        toggleParticipantWebcam: true, // Can toggle other participant's webcam
        drawOnWhiteboard: true,
        toggleWhiteboard: true,

      },

      joinScreen: {
        visible: true, // Show the join screen ?
        title: "Daily scrum", // Meeting title
        meetingUrl: window.location.href, // Meeting joining url
      },
    };

    meeting.init(config);
  });

  script.src =
    "https://sdk.videosdk.live/rtc-js-prebuilt/0.1.21/rtc-js-prebuilt.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>

  5. قم بتغير هذا السطر apiKey: "<API-KEY>" الي API KEY الخاص بك

يمكنك قراءة المزيد في الموقع الرسمي .