Skip to main content

Demo App Overview

npm install​

Install the node dependencies.

npm start​

Runs the app in the development mode. Open https://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build​

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Understanding UI structure​

/meetingPreview - This route displays the meeting preview screen where you can select and preview the audio/video devices and then start/join the meeting.

/inCall - This route displays the in-meeting screen with all it's required components like participant's videos, shared screen, toolbar buttons, participant's panel, call header, etc.

Understanding code structure​

To summarize your React app's code structure, you typically have the following components:

  1. src: The main folder containing your application code.

  2. components: Reusable UI components.

  3. assets: Images, and other static files.

  4. utils: Helper functions or utilities.

  5. App.tsx: The root component that wraps your application.

  6. index.tsx: Entry point where the app is rendered.

  7. public: Contains the static files like index.html.

  8. package.json: Manages dependencies and scripts for your project.

  9. .env: Environment specific data.

  10. ProCONF Web SDK related API calls are present in ProConfService.ts