Connectify Video SDK

A powerful, self-contained React component for easily embedding a feature-rich 1-on-1 video chat experience into any web application. This SDK handles all the complex logic of WebRTC signaling, peer-to-peer connection, and real-time media state management, providing a polished UI out of the box.

Features

• 1-on-1 Video Chat: Crystal-clear, low-latency video communication.
• Random Matchmaking: Connects users randomly for spontaneous conversations.
• Direct Room Connection: Option to connect two users directly via a shared Room ID.
• Full Media Controls: In-call options to toggle the microphone, camera, and screen sharing.
• Built-in Text Chat: A floating, real-time text chat panel for messaging.
• Responsive Design: Adapts seamlessly to both desktop and mobile viewports.
• Connection Management: Gracefully handles user disconnects and allows users to find the next partner.
• Customizable UI: Easily override default icons and theme colors to match your application's branding.
• Backend Agnostic: Integrates with any backend via a simple WebSocket and API interface.

Setup and Authentication

To integrate the SDK, your frontend application must request a short-lived, single-purpose token from your backend. This token is used exclusively to authenticate the user for the video chat service.

This flow assumes the user is already logged into your main application, and their user details are accessible (e.g., via Redux, React Context, or another state management solution).

Authentication Flow

1. User is Logged In

   • Your application has already authenticated the user. The user's details (like email, name, username) and a primary authentication token (e.g., a login JWT) are available in the client.

2. Frontend Constructs User Payload

   • Using the logged-in user's data from your state management (like Redux), the frontend constructs a payload.
   • Example payload:

     {
       "email": "[email protected]",
       "username": "janedoe",
       "firstName": "Jane",
       "lastName": "Doe"
     }

3. Frontend Requests SDK Token

   • The frontend makes an POST request to the Connectify API to get a token specifically for the video session.
   • Endpoint: POST https://api.connectify.global/authenticate-user
   • This request must be done by sending a payload using the currently logged in user details.

4. Backend Validates and Issues SDK Token

   • The backend receives the request, validates the payload, and generates a new, short-lived token that is only valid for the video SDK.
   • Expected successful response:

     {
       "token": "<sdk-specific-jwt-token>",
       "user": {
         "id": "<user-id>",
         "email": "<user-email>"
       }
     }

5. Token is Passed to the Video SDK

   • The frontend receives the SDK-specific token, stores it in its state, and passes it to the ConnectifyVideoChat component via the token prop.

6. SDK Connects to the WebSocket Server

   • The SDK uses the received token to establish a secure connection with the WebSocket server.
   • WebSocket URL: wss://api.connectify.global/ws

Usage Example

import React from "react";
import { ConnectifyVideoChat } from "connectify-video-sdk";

function MyVideoApp() {
  // This token should be fetched from your backend after the user logs in,
  // following the authentication flow described above.
  const userAuthToken = "your-sdk-specific-token-from-server";

  const handleLeaveChat = () => {
    console.log("User has left the video chat.");
    window.location.href = "/dashboard";
  };

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <ConnectifyVideoChat
        wsUrl="wss://api.connectify.global/ws"
        token={userAuthToken}
        onLeaveChat={handleLeaveChat}
      />
    </div>
  );
}

export default MyVideoApp;