Make first call

ConnectyCube 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 and auth key) that you’ll need for authentication.

Step 1: Configure SDK

To use chat 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 Create and Authorise User.

Install SDK

React, Angular, Vue etc.

Install package from the command line:

npm

npm install connectycube --save

yarn

yarn add connectycube

Plain HTML

Сonnect SDK js file as a normal script:

<script src="https://cdn.jsdelivr.net/npm/connectycube/dist/connectycube.min.js"></script>

Vite

If you use Vite build tool, update vite.config.ts and add the following:

export default defineConfig({
  plugins: ...
  esbuild: ...

  define: {
    // add this line for ConnectyCube to work properly
    global: {},
  },
})

Also, it needs to add polyfils for some node libs.

Install the package as a dev dependency:

npm

npm install --save-dev vite-plugin-node-polyfills

yarn

yarn add --dev vite-plugin-node-polyfills

Add the plugin to your vite.config.ts file:

import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    nodePolyfills(),
  ],
})

For Vite 6 to work, add the following code in package.json:

"overrides": {
  "vite-plugin-node-polyfills": {
    "vite": "^6.0.0"
  }
}

Remix SSR (Server-Side Rendering) guide

When using the ConnectyCube SDK in SSR environments like Remix, native Node.js modules such as “events” may cause runtime errors due to differences between Node and browser environments.
To ensure smooth SSR integration, follow the steps below.

Install ConnectyCube SDK and apply SSR patches:

npm

npm install connectycube
npx connectycube patch-ssr      # apply SSR patches
# npx connectycube revert-ssr   # revert SSR patches (if needed)

yarn

yarn add connectycube
yarn connectycube patch-ssr     # apply SSR patches
# yarn connectycube revert-ssr  # revert SSR patches (if needed)

Remix Config Update

Add the following option in your remix.config.js or remix.config.ts file to polyfill the “events” module, which is required by ConnectyCube’s dependencies:

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
const commonConfig = {
  // ... your existing config options ...
  browserNodeBuiltinsPolyfill: {
    modules: {
      events: true,
    },
  },
};

export default remixConfig;

This enables polyfilling of the Node.js “events” module in the browser environment, preventing errors related to “@xmpp/events” and similar packages used internally by ConnectyCube SDK.

Import SDK

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

import ConnectyCube from 'connectycube';

*this is not needed for Plain HTML

Initialize SDK

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

SDK v4

const CREDENTIALS = {
  appId: 21,
  authKey: "hhf87hfushuiwef",
};

ConnectyCube.init(CREDENTIALS);

SDK v3

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

ConnectyCube.init(CREDENTIALS);

Step 2: Create and Authorise User

As a starting point, the user’s session token needs to be created allowing to participate in calls.

const userCredentials = { login: "marvin18", password: "supersecurepwd" };

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

Note: With the request above, the user is created automatically on the fly upon session creation using the login (or email) and password from the request parameters.

Important: such approach with the automatic user creation works well for testing purposes and while the application isn’t launched on production. For better security it is recommended to deny the session creation without an existing user.
For this, set ‘Session creation without an existing user entity’ to Deny under the Application -> Overview -> Permissions in the admin panel.

Step 3: Connect User to chat

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

To start using Video Calling API you need to connect user to Chat as ConnectyCube Chat API is used as a signalling transport for Video Calling API:

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

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

Step 4: Create video session

In order to use Video Calling API you need to create a call session object - choose your opponents with whom you will have a call and a type of session (VIDEO or AUDIO).

Note

The calleesIds array must contain the opponents ids only and exclude current user id.

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 5: 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) => {
    // display local stream
    session.attachMediaStream("myVideoElementId", localStream, {
      muted: true,
      mirror: true,
    });
  })
  .catch((error) => {});

This method lets the browser ask the user for permission to use devices. You should allow this dialog to access the stream. Otherwise, the browser can’t obtain access and will throw an error for getUserMedia callback function.

Step 6: Initiate a call

Use the code below to initiate call with the opponent(s):

const extension = {};
session.call(extension, (error) => {});

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 7: Accept a 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 DOM element
  session.attachMediaStream("remoteOpponentVideoElementId", remoteStream);
};

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!

• Voice/video calling SDK documentation
• Conference calling SDK documentation