@connectycube/use-calls/README.md

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

# 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

```tsx
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

```tsx
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](https://github.com/ConnectyCube/connectycube-web-samples/tree/master/videochat)

## Documentation

[https://developers.connectycube.com/js/use-calls](https://developers.connectycube.com/js/)

## Have an issue?

Join our [Discord](https://discord.com/invite/zqbBWNCCFJ) for quick answers to your questions

## Community

- [Blog](https://connectycube.com/blog)
- X (twitter)[@ConnectyCube](https://x.com/ConnectyCube)
- [Facebook](https://www.facebook.com/ConnectyCube)

**Want to support our team**:<br>
<a href="https://www.buymeacoffee.com/connectycube" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

## License

[Apache 2.0](https://github.com/connectycube/use-calls/blob/main/LICENSE)