Use Calls

A React hook for state management in ConnectyCube-powered audio/video calls solutions.

This library provides a headless solution for managing calls functionality in ConnectyCube.

The core purpose is to handle essential chat features like state management, handling subsequent events and APIs properly etc, so the end user takes care about UI building only.

Features

• Screensharing
• Switch cameras

Installation

npm install @connectycube/use-chat @connectycube/use-calls

or

yarn add @connectycube/use-chat @connectycube/use-calls

Usage

Caller

import { useEffect } from "react";
import { useChat } from "@connectycube/use-chat";
import { useCalls, LocalStream, RemoteStream, CallType } from "@connectycube/use-calls";

const StartCallDemo: React.FC<{ calleeID: number }> = ({ calleeID }) => {
  const { connect } = useChat();
  const { activeCall, startCall, stopCall, participantsIds } = useCalls();

  const _startCall = () => {
    startCall(calleeID, CallType.VIDEO, { userName: "Alice", type: "video" });
  };

  const _stopCall = () => {
    stopCall();
  };

  useEffect(() => {
    connect({ userId: 123450, password: "password1" });
  }, []);

  return (
    <div className="container">
      ...
      <button type="button" onClick={_startCall}>
        Start call
      </button>
      <button type="button" onClick={_stopCall}>
        Stop call
      </button>
      {activeCall && (
        <div className="media-container">
          {participantsIds.map((id) => (
            <RemoteStream userID={id} />
          ))}
          <LocalStream />
        </div>
      )}
    </div>
  );
};

export default StartCallDemo;

Callee

import { useState, useEffect } from "react";
import { useChat } from "@connectycube/use-chat";
import { useCalls, LocalStream, RemoteStream } from "@connectycube/use-calls";

const ReceiveCallDemo = () => {
  const { connect } = useChat();
  const { incomingCall, activeCall, acceptCall, rejectCall, participantsIds } = useCalls();

  useEffect(() => {
    if (incomingCall) {
      const accepted = confirm(`Incoming ${extension.type} call from ${extension.userName}`);

      if (accepted) {
        acceptCall();
      } else {
        rejectCall();
      }
    }
  }, [incomingCall]);

  useEffect(() => {
    await connect({ userId: 123451, password: "password2" });
  }, []);

  return (
    <div className="container">
      ...
      {activeCall && (
        <div className="media-container">
          {participantsIds.map((id) => (
            <RemoteStream userID={id} />
          ))}
          <LocalStream />
        </div>
      )}
    </div>
  );
};

export default ReceiveCallDemo;

For more complex example please check Video Chat code sample

Documentation

https://developers.connectycube.com/js/use-calls

Have an issue?

Join our Discord for quick answers to your questions

Community

• Blog
• X (twitter)@ConnectyCube
• Facebook

Want to support our team:

License

Apache 2.0