Skip to content
logo logo Connectycube
Home Features Pricing Contact

Make first call

ConnectyCube’s Video Calling Peer-to-Peer (P2P) API provides a solution for integrating real-time video and audio calling into your application. This API enables you to create smooth one-on-one and group video calls, supporting a wide range of use cases like virtual meetings, telemedicine consultations, social interactions, and more. The P2P approach ensures that media streams are transferred directly between users whenever possible, minimizing latency and delivering high-quality audio and video.

If you’re planning to build a new app, we recommend starting with one of our code samples apps as a foundation for your client app.
If you already have an app and you are looking to add chat and voice/video calls to it, proceed with this guide. This guide walks you through installing the ConnectyCube SDK in your app, configure it and then initiating the call to the opponent.

Before you start

Before you start, make sure:

  1. You have access to ConnectyCube account. If you don’t have an account, sign up here.
  2. An app created in ConnectyCube dashboard. Once logged into your ConnectyCube account, create a new application and make a note of the app credentials (app ID, auth key, and auth secret) that you’ll need for authentication.

Step 1: Configure SDK

To use voice and video calls in a client app, you should install, import and configure ConnectyCube SDK.

Note: If the app is already created during the onboarding process and you followed all the instructions, you can skip the ‘Configure SDK’ step and start with Connect React Native WerRTC lib.

Install SDK

Install package from the command line:

Terminal window
npm install react-native-connectycube --save

Import SDK

Add the following import statement to start using all classes and methods.

import ConnectyCube from 'react-native-connectycube';

Initialize SDK

Initialize the SDK with your ConnectyCube application credentials. You can access your application credentials in ConnectyCube Dashboard:

const CREDENTIALS = {
  appId: 21,
  authKey: 'hhf87hfushuiwef',
  authSecret: 'jjsdf898hfsdfk',
};


ConnectyCube.init(CREDENTIALS);

Step 2: Сonnect React Native WebRTC lib

Since react-native-connectycube version 3.34.0, the react-native-webrtc has been replaced from dependencies to peerDependencies to support autolinking. Install the react-native-webrtc and follow the Getting started. Configure your iOS and Android projects.

Step 3: Create and Authorise User

To make API requests, firstly you need to create and authenticate a user who will initiate a call later.

Create an application session

ConnectyCube.createSession()
  .then((session) => {})
  .catch((error) => {});

Register a user

const userProfile = {
  login: "marvin18",
  password: "supersecurepwd",
  email: "awesomeman@gmail.com",
  full_name: "Marvin Simon",
  phone: "47802323143",
  website: "https://dozensofdreams.com",
  tag_list: ["iphone", "apple"],
  custom_data: JSON.stringify({ middle_name: "Bartoleo" }),
};


ConnectyCube.users
  .signup(userProfile)
  .then((user) => {})
  .catch((error) => {});

Create a user’s session

To allow users to proceed with any actions within the application, you need to create a session for them. Having created an application session, you need to upgrade it to a user session by calling login method:

const userCredentials = { login: "cubeuser", password: "awesomepwd" };
// const userCredentials = { email: 'cubeuser@gmail.com', password: 'awesomepwd' };
// const userCredentials = { provider: 'facebook', keys: {token: 'a876as7db...asg34dasd8wqe'} };


ConnectyCube.login(userCredentials)
  .then((user) => {})
  .catch((error) => {});

Step 4: Connect User to chat

Connecting to the chat is an essential step in enabling real-time communication.

ConnectyCube Chat API is used as a signaling transport for Video Calling API, so to start using Video Calling API you need to connect user to Chat:

const userCredentials = {
  userId: 4448514,
  password: "supersecurepwd",
};


ConnectyCube.chat
  .connect(userCredentials)
  .then(() => {
    // connected
  })
  .catch((error) => {});

Step 5: Create video session

Also, to use Video Calling API you need to create a call session object - choose your opponent(s) you will have a call with and a type of session (VIDEO or AUDIO):

const calleesIds = [56, 76, 34]; // User's ids
const sessionType = ConnectyCube.videochat.CallType.VIDEO; // AUDIO is also possible
const additionalOptions = {};
const session = ConnectyCube.videochat.createNewSession(calleesIds, sessionType, additionalOptions);

Step 6: Access local media stream

In order to have a video chat session you need to get an access to the user’s devices (webcam / microphone):

const mediaParams = {
  audio: true,
  video: true
};


session
  .getUserMedia(mediaParams)
  .then((localStream) => {


    // pass a local or remote stream to the RTCView component
    //
    // <RTCView  objectFit="cover" style={styles.rtcView} key={currentUserId} streamURL={localStream.toURL()} />
  })
  .catch((error) => {});

Step 7: Initiate a call

The initiate call function is essential for starting a video call session between users, enabling real-time communication by establishing the initial connection:

const extension = {};
session.call(extension);

The extension is used to pass any extra parameters in the request to your opponents.

After this, your opponents will receive a callback call:

ConnectyCube.videochat.onCallListener = function (session, extension) {};

Or if your opponents are offline or did not answer the call request:

ConnectyCube.videochat.onUserNotAnswerListener = function (session, userId) {};

Step 8: Accept call

To accept a call the following code snippet is used:

ConnectyCube.videochat.onCallListener = function (session, extension) {
  // Here we need to show a dialog with 2 buttons - Accept & Reject.
  // By accepting -> run the following code:
  //
  // 1. await session.getUserMedia (...)
  //
  // 2. Accept call request:
  const extension = {};
  session.accept(extension);
};

After this, you will get a confirmation in the following callback:

ConnectyCube.videochat.onAcceptCallListener = function (session, userId, extension) {};

Also, both the caller and opponents will get a special callback with the remote stream:

ConnectyCube.videochat.onRemoteStreamListener = function (session, userID, remoteStream) {
  // attach the remote stream to a video element


  // import {RTCView} from 'react-native-connectycube';
  //
  // <RTCView  objectFit="cover" style={styles.rtcView} key={userId} streamURL={remoteStream.toURL()} />
};

Great work! You’ve completed the essentials of making a call in ConnectyCube. From this point, you and your opponents should start seeing each other.

What’s next?

To enhance your calling feature with advanced functionalities, such as call recording, screen sharing, or integrating emojis and attachments during calls, follow the API guides below. These additions will help create a more dynamic and engaging experience for your users!