{"id":17761059,"url":"https://github.com/oslabs-beta/rtconnect","last_synced_at":"2025-03-23T00:08:09.073Z","repository":{"id":40778422,"uuid":"508038329","full_name":"oslabs-beta/RTConnect","owner":"oslabs-beta","description":"Implement live streaming and real-time video calls with RTConnect in your React codebase. An open source, JS/React component library that facilitates live, real-time video/audio communications.","archived":false,"fork":false,"pushed_at":"2024-09-18T02:20:21.000Z","size":13753,"stargazers_count":73,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-12-31T13:04:58.540Z","etag":null,"topics":["developer-tools","npm-package","react","react-component-library","real-time-communication","typescript","video-conferencing","webrtc","websockets"],"latest_commit_sha":null,"homepage":"https://www.rtconnect.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oslabs-beta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"open-source-labs","custom":["https://donorbox.org/donations-to-oslabs-inc"]}},"created_at":"2022-06-27T19:33:24.000Z","updated_at":"2024-12-18T16:15:31.000Z","dependencies_parsed_at":"2024-09-18T05:52:56.611Z","dependency_job_id":null,"html_url":"https://github.com/oslabs-beta/RTConnect","commit_stats":{"total_commits":249,"total_committers":7,"mean_commits":35.57142857142857,"dds":0.4738955823293173,"last_synced_commit":"0ca4b3d6df141818842217798f8f771fe9c2e336"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FRTConnect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FRTConnect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FRTConnect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oslabs-beta%2FRTConnect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oslabs-beta","download_url":"https://codeload.github.com/oslabs-beta/RTConnect/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243658252,"owners_count":20326467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tools","npm-package","react","react-component-library","real-time-communication","typescript","video-conferencing","webrtc","websockets"],"created_at":"2024-10-26T19:18:58.640Z","updated_at":"2025-03-14T23:04:57.700Z","avatar_url":"https://github.com/oslabs-beta.png","language":"TypeScript","funding_links":["https://github.com/sponsors/open-source-labs","https://donorbox.org/donations-to-oslabs-inc"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"rtconnect\", src=\"assets/RTConnect-logo-transparent.png\" width=\"60%\" height=\"60%\"\u003e\u003c/br\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eImplement live streaming and real-time video calls with RTConnect\u003c/h1\u003e\n\nRTConnect is open source, React component library that facilitates live, real-time video/audio communications.\n\nRTConnect achieves these features via our downloadeable npm package, our VideoCall and LiveStream React components, and by providing developers with an importable signaling server module that simplifies the implementation of WebRTC, WebSockets, and signaling to establish low latency, real-time communications. While WebRTC takes care of transcoding, packetizing, networking, and security, it does not take care of signaling and implementing its connection logic is no easy walk in the park for even seasoned developers and front-end developers. \n\nThat is where RTConnect comes in - we take care of signaling and implementing WebRTC connection logic for you so all you have to worry about is building compelling live streaming and video conferencing apps. By using RTConnect and letting us worry about all the technicalities of setting up signaling and WebRTC's connection logic, you can focus all your extra time and energy into what really matters - innovation, creation, maybe even disruption in the world of video conferencing and live streaming apps. Who knows? You might even create the next Zoom or Twitch.\n\n\n## Table of Contents\n- [Key Features \u0026 Use Cases](#features)\n- [RTConnect Demo](#demo)\n- [Installation](#install)\n- [Getting Started with RTConnect](#implementation)\n- [Setting Up Public Endpoint/URL](#setting)\n- [Solutions/Fixes for Polyfill Errors](#errors)\n- [Contributing to RTConnect](#contribution)\n- [License](#license)\n- [The RTConnect Team](#team)\n- [Support RTConnect](#support)\n\n\n## \u003ca name=\"features\"/\u003e Key Features \u0026 Use Cases\n* Supports video, voice, screen sharing, and generic data to be sent between peers.\n* Importable, WebSockets based signaling server module that allows for the rapid exchange of .\n* Rapidly set up live video calls in your React codebase without the hassle of implementing WebRTC.\n\n\n## \u003ca name=\"demo\"/\u003e Demo\n\u003cp align=\"center\"\u003e\n  \u003cimg align=\"center\" src='https://github.com/oslabs-beta/RTConnect/blob/main/assets/RTConnect-demo.gif'\u003e\n\u003c/p\u003e\n\n\n## \u003ca name=\"install\"/\u003e Installing RTConnect\n\nRTConnect is available as an [npm package](https://www.npmjs.com/package/rtconnect).\n\n**npm:**\n```\nnpm install rtconnect\n```\n\n## \u003ca name=\"implementation\"/\u003e Getting Started with RTConnect\n After installing the rtconnect npm package, import the VideoComponent component in your React file:\n \n 2. 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.\n\n(Note: Setting up an https server will require a few extra steps. \u003ca href=\"https://adamtheautomator.com/https-nodejs/\"\u003eInstructions on how to set up an https server\u003c/a\u003e)\n\n3. Import the RTConnect Signaling Channel class/module and instantiate the RTConnect Signaling Channel. Pass in your http or https server as an argument.\n\n4. Invoke the RTConnect Signaling Channel method, initializeConnection().\n\n**server.js:**\n```\n// server.js file\n\nconst path = require('path');\nconst express = require('express');\napp.use(bodyParser.urlencoded({ extended: true }));\nconst PORT = 3000;\nconst app = express();\nconst { SignalingChannel } = require('rtconnect'); // import the RTConnect Signaling Channel class\n\n\napp.use(express.json());\napp.use(bodyParser.urlencoded({extended : true}));\napp.use('/build', express.static(path.join(__dirname, '../build')));\n\napp.get('/', (req, res) =\u003e {\n  res.status(200).sendFile(path.resolve(__dirname, '../index.html'));\n});\n\nconst server = app.listen(PORT, () =\u003e {\n  console.log('Listening on port', PORT);\n});\n\nconst SignalChannel = new SignalingChannel(server); // instantiate the RTConnect SignalingChannel\n\nSignalChannel.initializeConnection(); // invoke initializeConnection() method\n```\n\n5. Import the RTConnect VideoCall component into your desired .jsx file.\n\n6. Finally use the RTConnect VideoCall component as you would any other React component by passing in `‘ws://localhost:PORT’` as the URL prop as well as the optional mediaOptions prop\n\n- `URL={ ‘ws://localhost:PORT’}` (Note: the PORT whatever you specified when you set up your server so based on the server above, the port is 3000)\n- `mediaOptions={{ controls: true, style: { width: ‘640px’, height: ‘480px’ }}`\n\n(Note: If you are using an https server, then pass in `‘wss://localhost:PORT’` as the URL prop).\n\n**App.jsx:**\n```\n// App.jsx file\n\nimport React from 'react';\nimport VideoCall from 'rtconnect';\n\nconst App = () =\u003e {\n  return (\n    \u003cVideoCall \n      URL={'ws://localhost:3000'}\n      mediaOptions={{ controls: true, style: { width: '640px',    height: '480px'}}}\n    /\u003e\n  )\n}\n  \nexport default App;\n```\n\n## \u003ca name=\"setting\"/\u003e Setting Up Public Endpoint/URL Using a Secure Tunnel Service\nIn order to create a publicly accessible URL that will allow you to share access to your localhost server, you have a number of different options but a simple option is to use a secure tunnel service. One such free, secure tunnel service that you can use to create a secure, encrypted, publicly accessible endpoint/URL that other users can access over the Internet is ngrok. \n\nngrok Secure Tunnels operate by using a locally installed ngrok agent to establish a private connection to the ngrok service. Your localhost development server is mapped to an ngrok.io sub-domain, which a remote user can then access. Once the connection is established, you get a public endpoint that you or others can use to access your local port. When a user hits the public ngrok endpoint, the ngrok edge figures out where to route the request and forwards the request over an encrypted connection to the locally running ngrok agent.\n\nThus, you do not need to expose ports, set up forwarding, or make any other network changes. You can simply install [ngrok npm package](https://www.npmjs.com/package/ngrok) and run it.\n\n### Instructions for Using ngrok With RTConnect\n1. Sign up for a free ngrok account, verify your email address, and copy your authorization token.\n\n2. Run the following command and replace with add your own authorization token:\n```\nconfig authtoken \u003cyour authorization token\u003e\n```\n\n3. Install the ngrok npm package globally: \n```\nnpm install ngrok -g\n```\n\n4. Start your app - make sure your server is running before you initiate the ngrok tunnel. \n\n* The following is a a basic example of what your App.jsx and server.js files might look like at this point if you used `npx create-react-app`. If you're using a proxy server, then the default port when you run `npm start` is 3000 so set your server port to something else such as 8080.\n\n**App.jsx:**\n```\n// App.jsx file\n\nimport React from 'react';\nimport VideoCall from 'rtconnect';\n\nconst App = () =\u003e {\n  return (\n    \u003cVideoCall \n      URL={'ws://localhost:8080'}\n      mediaOptions={controls}\n    /\u003e\n  )\n}\n  \nexport default App;\n```\n\n**server.js:**\n```\n// server.js\n\nconst path = require('path');\nconst express = require('express');\nconst bodyParser = require('body-parser');\nconst ngrok = require('ngrok');\nconst PORT = 8080;\nconst { SignalingChannel } = require('rtconnect'); // import the RTConnect Signaling Channel class\nconst app = express();\n\napp.use(express.json());\napp.use(bodyParser.urlencoded({ extended: true }));\n\napp.get('/', (req, res) =\u003e {\n  res.status(200).sendFile(path.resolve(__dirname, '../index.html'));\n});\n\nconst server = app.listen(PORT, () =\u003e {\n  console.log('Listening on port', PORT);\n});\n\nconst SignalChannel = new SignalingChannel(server); // instantiate the RTConnect SignalingChannel\n\nSignalChannel.initializeConnection(); // invoke initializeConnection() method\n```\n\n5. To start your ngrok Secure Tunnel, run the following command in your terminal:\n```\nngrok http 3000 --host-header=\"localhost:3000\"\n```\n\n* To make the connection more secure, you can enforce basic authorization on a tunnel endpoint - just use the username and password of your choosing:\n```\nngrok http 3000 --host-header=\"localhost:3000\" --auth='\u003cusername\u003e:\u003ca password\u003e`\n```\n\n6. Copy the https forwarding URL from the terminal and paste it into a new browser tab or send the link to a remote user.\n\n\n## \u003ca name=\"errors\" /\u003e Polyfill Errors\n\nIf you are using Webpack v5.x or used the `npx create-react-app` command and are getting polyfill errors, the following are some potential solutions. \n\nWebpack 4 automatically polyfilled many Node APIs in the browser but Webpack 5 removed this functionality, hence why you might get polyfill errors when using the RTConnect VideoCall component. You can do the following to address polyfill errors related to using Webpack v5.x when using RTConnect.\n\n- [Fixing Polyfill Errors if Using the npx create-react-app Command](#npx). \n- [Fixing Polyfill Errors When Using Webpack v5.x](#webpack). \n\n### \u003ca name=\"npx\" /\u003e If You Used npx create-react-app to Create Your React App\n\n1. First, install the package using Yarn or npm:\n```\nnpm install react-app-polyfill\n```\nor\n\n```\nyarn add react-app-polyfill\n```\n\n2. Then add the following in your src/index.js file.\n\n```\n// These must be the first lines in src/index.js\nimport \"react-app-polyfill/ie11\";\nimport \"react-app-polyfill/stable\";\n// ...\n```\n\n### \u003ca name=\"webpack\" /\u003e If you are using Webpack v5.x\n1. Add the following to your webpack.config.json \n\n```\nconst NodePolyfillPlugin = require(\"node-polyfill-webpack-plugin\")\n\nmodule.exports = {\n  resolve: {\n    fallback: {\n    \tbuffer: require.resolve('buffer/'),\n\tutils: require.resolve('utils'),\n\ttls: require.resolve('tls'),\n\tgyp: require.resolve('gyp'),\n\tfs: false,\n      }\n  },\n  \n  target: 'web',\n  \n  plugins: [\n     new NodePolyfillPlugin(),\n  ]\n}\n```\n\n2. Then install the following npm packages:\n\n```\nnpm install -D node-polyfill-webpack-plugin buffer utils tls gyp fs\n```\n\n## \u003ca name=\"contribution\" /\u003e Contributing to RTConnect\nThere 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, feel free to propose any bug fixes or improvements and how to build and test your changes!\n\nWe are currently in the process of: \n- 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\n\n\n## \u003ca name=\"license\"/\u003e License\nRTConnect is developed under the MIT license.\n\n\n## \u003ca name=\"team\"/\u003e The Co-Creators of RTConnect\nAnthony King  | [GitHub](https://github.com/thecapedcrusader) | [LinkedIn](https://www.linkedin.com/in/aking97)\n\u003cbr\u003e\nF. Raisa Iftekher | [GitHub](https://github.com/fraisai) | [LinkedIn](https://www.linkedin.com/in/fraisa/)\n\u003cbr\u003e\nYoojin Chang | [GitHub](https://github.com/ychang49265) | [LinkedIn](https://www.linkedin.com/in/yoojin-chang-32a75892/)\n\u003cbr\u003e\nLouis Disen | [GitHub](https://github.com/LouisDisen) | [LinkedIn](https://www.linkedin.com/in/louis-disen/)\n\u003cbr\u003e\n\n\n## \u003ca name=\"support\"/\u003eA big shoutout to all of RTConnect's stargazers! Thank you!\n[![Thank you to all of RTConnect's stargazers](https://git-lister.onrender.com/api/stars/oslabs-beta/RTConnect)](https://github.com/oslabs-beta/RTConnect/stargazers)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Frtconnect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foslabs-beta%2Frtconnect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foslabs-beta%2Frtconnect/lists"}