Circle App Component Usage
Circle is a self-hosted, open source video conferencing software solution built by Ant Media. It can be deployed anywhere, both locally or in the cloud.
It offers the highest quality with the lowest latency, and it can accommodate up to 200 participants. If you are concerned about Privacy or being behind a firewall, this is the best solution for you.
This documentation will explain how you can integrate the Circle application into any existing webpage.
- Clone conference-call-application repository.
- Install Node v20 LTS version and NPM v9
- Open terminal and go to react folder
- Run
npm install
command - Run
npm run build
command - Go to build folder inside react folder
- Copy static folder, into your web application's path
- Open the HTML page that you wanted to add Circle App.
- Add CSS and JS files that we copy from conference-call-application/react/build folder into HTML header. NOTE: File names will change after every build process.
<script defer="defer" src="./static/js/main.9c1bebc8.js"></script>
<link href="./static/css/main.24ed3d1e.css" rel="stylesheet" />
- Add following div element into the section that you wanted to add Circle App
<div id="root" data-room-name="<room_name>" data-websocket-url="wss://<ip_address>:<port>/<application_name>/websocket" style="background-color: #001D1A; box-sizing: border-box; height: 480; width: 640; position: relative;"></div>
- Replace
room_name
,ip_address
,port
andapplication_name
variables and it's ready to use.