CallFusion Library

CallFusion is a WebRTC signaling and peer connection library that simplifies managing video and audio calls using Socket.IO as the signaling server. The library allows users to set up high-quality audio and video calls with flexible media constraints.

Features

• Easy-to-use API for WebRTC video and audio calls.
• Socket.IO-based signaling.
• Customizable media constraints for both video and audio.
• Integrated handling of client lists and call signaling.

Installation

Install the CallFusion library using npm:

npm install callfusion

General Setup

1. Signaling Server and ICE Configuration

You'll need to configure the signaling server and ICE servers for WebRTC to function properly.

const signalingServer = io("https://test-api.com");

const iceConfiguration = {
  iceServers: [
    ....
  ],
  iceTransportPolicy: "relay",
};

2. Media Constraints

Define your media constraints for video and audio:

let constraints = {
	video: {
		width: { ideal: 1280 },
		height: { ideal: 720 },
		frameRate: { ideal: 30, max: 60 },
		facingMode: "user",
	},
	audio: {
		echoCancellation: true,
		noiseSuppression: true,
		autoGainControl: true,
	},
};

3. Creating the CallFusion Instance

const callFusion = new CallFusion(
	signalingServer,
	iceConfiguration,
	document.getElementById("videoContainer"),
	constraints
);

Using CallFusion in Vanilla JavaScript

You can implement CallFusion in a pure JavaScript application like so:

HTML Example

<div id="videoContainer"></div>
<ul id="clientsList"></ul>
<button id="startVideoButton">Start Video Call</button>
<button id="startVoiceButton">Start Voice Call</button>
<button id="hangupButton">Hang Up</button>

JavaScript Example

document.getElementById("startVideoButton").addEventListener("click", async () => {
	if (!callFusion.getSelectedClientId()) {
		console.log("Please select a client.");
		return;
	}
	await callFusion.startCall(constraints, true); // Video call
});

document.getElementById("hangupButton").addEventListener("click", () => {
	callFusion.hangup();
});

Using CallFusion in React

To use CallFusion in a React component, initialize CallFusion inside a useEffect hook and manage it using React state.

React Example

import React, { useEffect, useRef, useState } from "react";
import { CallFusion } from "callfusion";
import io from "socket.io-client";

const signalingServer = io("https://test-api.com");

const iceConfiguration = {
	iceServers: [
		...
	],
};

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

function CallComponent() {
	const videoContainerRef = useRef(null);
	const [callFusion, setCallFusion] = useState(null);

	useEffect(() => {
		const cfInstance = new CallFusion(
			signalingServer,
			iceConfiguration,
			videoContainerRef.current,
			constraints
		);
		setCallFusion(cfInstance);

		return () => {
			cfInstance.hangup(); // Cleanup on unmount
		};
	}, []);

	return (
		<div>
			<div ref={videoContainerRef}></div>
			<button onClick={() => callFusion?.startCall(constraints, true)}>Start Video Call</button>
			<button onClick={() => callFusion?.hangup()}>Hang Up</button>
		</div>
	);
}

export default CallComponent;

Using CallFusion in Vue.js

To use CallFusion in Vue, initialize it in the mounted lifecycle hook.

Vue.js Example

<template>
	<div>
		<div id="videoContainer"></div>
		<button @click="startVideoCall">Start Video Call</button>
		<button @click="hangupCall">Hang Up</button>
	</div>
</template>

<script>
	import { CallFusion } from "callfusion";
	import io from "socket.io-client";

	export default {
		data() {
			return {
				callFusion: null,
			};
		},
		mounted() {
			const signalingServer = io("https://test-api.com");
			const iceConfiguration = {
				iceServers: [
	         ...
	       ],
			};

			const constraints = {
				video: { width: 1280, height: 720 },
				audio: { echoCancellation: true, noiseSuppression: true },
			};

			this.callFusion = new CallFusion(
				signalingServer,
				iceConfiguration,
				document.getElementById("videoContainer"),
				constraints
			);
		},
		methods: {
			startVideoCall() {
				this.callFusion.startCall(this.callFusion.getMediaConstraints(), true);
			},
			hangupCall() {
				this.callFusion.hangup();
			},
		},
	};
</script>

Using CallFusion in Angular

To use CallFusion in Angular, initialize the library in a component's lifecycle hook.

Angular Example

1. Install the library:

   npm install callfusion

2. Create the Angular component:

   import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
   import { CallFusion } from "callfusion";
   import { io } from "socket.io-client";
   
   @Component({
   	selector: "app-video-call",
   	templateUrl: "./video-call.component.html",
   	styleUrls: ["./video-call.component.css"],
   })
   export class VideoCallComponent implements OnInit {
   	@ViewChild("videoContainer") videoContainer!: ElementRef;
   	callFusion!: CallFusion;
   
   	private signalingServer = io("https://test-api.com");
   	private iceConfiguration = {
   		iceServers: [
        ...
      ],
   	};
   	private constraints = {
   		video: true,
   		audio: true,
   	};
   
   	ngOnInit(): void {
   		this.callFusion = new CallFusion(
   			this.signalingServer,
   			this.iceConfiguration,
   			this.videoContainer.nativeElement,
   			this.constraints
   		);
   	}
   
   	startVideoCall() {
   		this.callFusion.startCall(this.constraints, true);
   	}
   
   	hangupCall() {
   		this.callFusion.hangup();
   	}
   }

3. Template file (video-call.component.html):

   <div #videoContainer></div>
   <button (click)="startVideoCall()">Start Video Call</button>
   <button (click)="hangupCall()">Hang Up</button>

API Reference

• startCall(constraints: MediaStreamConstraints, isVideoCall: boolean): Starts a video or voice call with the specified media constraints.
• hangup(): Ends the ongoing call.
• acceptCall(data: any): Accepts an incoming call.
• denyCall(data: any): Denies an incoming call.
• getMediaConstraints(): Retrieves the media constraints used for the call.

Conclusion

The CallFusion library provides an easy way to implement WebRTC-based audio and video calling in various environments, including React, Vue, Angular, and Vanilla JavaScript. By following the steps above, you can integrate real-time communication into your application quickly and efficiently.