RTConnect is an easy-to-use React component library that enables developers to set up live, real-time video calls, between multiple connected peers on different computers

Last update: Jul 27, 2022

A big shoutout to all of RTConnect's stargazers! Thank you!

Thanks to all stargazers

RTConnect

RTConnect is an easy-to-use React component library that enables developers to set up live, real-time video calls, between multiple connected peers on different computers in a React app.

RTConnect achieves these features within the functional scope of React components by simplifying the implementation of WebRTC and Websockets to establish low latency, real-time communications for developers.

logo

Table of Contents

What is RTConnect?

RTConnect is an easy-to-use npm package and React component library that enables developers to establish live, real-time peer to peer video communication in an existing React codebase.

RTConnect streamlines and simplifies the implementation of WebRTC for developers by providing a React component and signaling server module that operates using Websockets for the backend.

Demo

Install RTConnect

npm install rtconnect

Implementation

After installing the rtconnect npm package, import the VideoComponent component in your React file:

  1. Create your server — you have the option of using an http server or setting up a more secure connection by implementing an https server in order to set up a WebSocket secure connection.

(Note: Setting up an https server will require a few extra steps. Instructions on how to set up an https server)

  1. Import the RTConnect Signaling Channel class/module and instantiate the RTConnect Signaling Channel. Pass in your http or https server as an argument.

  2. Invoke the RTConnect Signaling Channel method, initializeConnection().

// server.js file

const path = require('path');
const express = require('express');
const app = express();
const PORT = 3000;

// import the RTConnect Signaling Channel class
const { SignalingChannel } = require('SignalingChannel');

app.use(express.json());
app.use(express.urlencoded({extended : true}));
app.use('/build', express.static(path.join(__dirname, '../build')));

app.get('/' (req, res) => {
 res.status(200).sendFile(path.resolve(__dirname, '../index.html'));
});

const server = app.listen(PORT, () => {
 console.log('Listening on port', PORT);
});

// instantiate the RTConnect SignalingChannel
const SignalChannel = new SignalingChannel(server);

// invoke initializeConnection() method
SignalChannel.initializeConnection;

  1. Import the RTConnect VideoCall component into your desired .jsx file.

  2. Finally use the RTConnect VideoCall component as you would any other React component by passing in ‘ws://localhost:’ as the URL prop as well as the optional mediaOptions prop

  • URL={ ‘ws://localhost:’}
  • mediaOptions={{ controls: true, style: { width: ‘640px’, height: ‘480px’ }}

(Note: If you are using an https server, then pass in ‘wss://localhost:’ as the URL prop).

// App.jsx file

import React from 'react';
import VideoCall from 'rtconnect';

const App = () => {
  return (
    '}
      mediaOptions={{ controls: true, style: { width: '640px',    height: '480px'}}}
    />
  )
}

export default App;

How Can I Contribute?

There are many features and improvements that our team is still adding to RTConect but while we are in the process of implementing some of them, you are more than welcome to help out the RTConnect team!

We are currently in the process of:

  • Implementing testing using Jest.
  • Creating group video calls/video conferences with 2 or more peers by implementing an SFU (Selective Forwarding Unit) video routing service and improving streaming by leveraging WebRTC Simulcast

# The Co-Creators of RTConnect

Anthony King | GitHub | LinkedIn
F. Raisa Iftekher | GitHub | LinkedIn
Yoojin Chang | GitHub | LinkedIn
Louis Disen | GitHub | LinkedIn

GitHub

https://github.com/oslabs-beta/RTConnect
You might also like...

A lightweight library to create reactive objects

Reactivity As the name says, Reactivity is a lightweight javascript library to create simple reactive objects. Inspired in Redux and Vuex Get started

Oct 28, 2021

A blazing fast, dependency free, 1kb runtime type-checking library written entirely in typescript, meant to be used with it.

A blazing fast, dependency free, 1kb runtime type-checking library written entirely in typescript, meant to be used with it.

A blazing fast, dependency free, 1kb runtime type-checking library written entirely in typescript, meant to be used with it.

Jul 8, 2022

A tiny library aims to parse HTML to Figma Layer Notation and do it well.

TSDX User Guide Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and h

Apr 24, 2022

A tiny, reactive JavaScript library for structured state and tabular data.

A JavaScript library for structured state. Using plain old JavaScript objects to manage data gets old very quickly. It's error-prone, tricky to track

Jul 22, 2022

React-cursor-chat - A react component for cursor chat

React-cursor-chat - A react component for cursor chat

@yomo/react-cursor-chat 🧬 Introduction A react component for cursor chat Press

Jul 26, 2022

✂️ React component for truncating JSX markup

React Truncate Markup React component for truncating JSX markup. Examples with code snippets CodeSandbox demo Why? Few use cases for using JS truncati

Jul 15, 2022

🔱 Svelte component runs everywhere, adapter for react/vue2/vue3/svelte.

🔱  Svelte component runs everywhere, adapter for react/vue2/vue3/svelte.

Write components once, run everywhere. Make svelte components run inside React or Vue applications. Managing support for libraries that provide UI com

Apr 14, 2022

React, React Native and Vue UI components for building data-driven apps with Elasticsearch

React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

Aug 7, 2022

⚡️ Lightning-fast search for React and React Native applications, by Algolia.

⚡️ Lightning-fast search for React and React Native applications, by Algolia.

React InstantSearch is a library for building blazing fast search-as-you-type search UIs with Algolia. React InstantSearch is a React library that let

Jul 31, 2022
Comments
  • 1. Anthony

    offer, answer, ice candidates are able to be exchanged, working on securing connection and showing videos from remote peer

    check remotelocaldescription for caller check if connection stays connected for callee

    Reviewed by thecapedcrusader at 2022-07-06 05:11
Compose multiple setState or getDerivedStateFromProps updaters in React
Compose multiple setState or getDerivedStateFromProps updaters in React

✍️ compose-state compose-state is a library that composes multiple state updaters in React. compose-state works with the standard setState parameters

Dec 22, 2021
A set of React components implementing Google's Material Design specification with the power of CSS Modules
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

Jul 31, 2022
A Free Set of Sketchy Illustrations provided by opendoodles
A Free Set of Sketchy Illustrations provided by opendoodles

Welcome to react-open-doodles ?? A Free Set of Sketchy Illustrations provided by opendoodles Open Doodles was created by Pablo Stanley we use this Ill

Jul 9, 2022
Teaful - Tiny, easy and powerful React state management
Teaful - Tiny, easy and powerful React state management

Tiny, easy and powerful React state management library What advantages does it have? ✨ ?? ・Tiny: Less than 1kb package to manage your state in

Aug 2, 2022
Simple and elegant component-based UI library
Simple and elegant component-based UI library

Simple and elegant component-based UI library Custom components • Concise syntax • Simple API • Tiny Size Riot brings custom components to all modern

Aug 3, 2022
react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web.

☕️ Buy me a coffee react-pdf-highlighter react-pdf-highlighter is a React library that provides annotation experience for PDF documents on web. It is

May 20, 2022
React library for ux4iot for easily building IoT web applications

React library for ux4iot for easily building IoT web applications

Jan 19, 2022
A library for react that can easily manipulate integers like adding a comma every 3 digits

A library for react that can easily manipulate integers like adding a comma every 3 digits

Nov 21, 2021
Lightweight react-like library. Support for asynchronous rendering and hooks.

Recept · Lightweight react-like library. Like the name, this project is mainly based on the architectural idea of react, which can feel react more int

Jun 20, 2022
A tiny ( 1KB) reactivity library

influer A tiny (< 1KB) reactivity library yarn add influer Introduction influer is a tiny reactivity library. Exported in ESM, CJS, and IIFE, all < 1K

Jul 13, 2022