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

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.

What is RTConnect?
Install
Getting Started and Using RTConnect
Demo
How Can I Contribute
The Team

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:

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)

Import the RTConnect Signaling Channel class/module and instantiate the RTConnect Signaling Channel. Pass in your http or https server as an argument.
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;

Import the RTConnect VideoCall component into your desired .jsx file.
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

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

7 Jul 13, 2022

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

2 Oct 28, 2021

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

90 Dec 9, 2022

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

opened by thecapedcrusader 0