React Clan Meeting

Add features like video meeting, audio calling, screen sharing and file sharing to your React applications with the most affordable video API Clan Meeting.  

Installation

Execute the following in your project directory.

1$ npm install react-clan-meeting

 

Usage

Create a file called clanMeeting.js and paste the following

1import React, { useEffect } from "react";
2import { clanMeeting } from "react-clan-meeting";
3
4const VideoMeeting = ({
5  domain,
6  consumerId,
7  optionalProperties,
8  getInstance,
9}) => {
10  useEffect(() => {
11    const script = document.createElement("script");
12    script.src = `https://${domain}/external_api.js`;
13    script.async = true;
14    script.onload = () => scriptLoaded();
15    document.body.appendChild(script);
16  }, [domain, consumerId, optionalProperties.jwt]);
17
18  const scriptLoaded = () => {
19    const meeting = new clanMeeting(domain, consumerId, optionalProperties);
20    meeting.start();
21    getInstance(meeting);
22  };
23
24  return (
25    <>
26      <span
27        style={{
28          display: "flex",
29          justifyContent: "center",
30        }}
31      >
32        Loading. Please wait....
33      </span>
34    </>
35  );
36};
37
38export default VideoMeeting;

 

Modify your App.js file as follows

All your meeting related customizations are to be included in this file. Please note the following:

• Edit the file path for clanMeeting.js with respect to App.js while importing (see the line 3)
• Add the domain, consumerId and the test JWT that has been shared with you in the following code.
• JWT is only needed for the hosts. If you pass a valid JWT in the optionalProperties, this user will become a host. Read more about authentication and host privileges.
• Add the properties that you need to optionalProperties. Click here to see all available properties.
• Check Clan Meeting Video API events and methods to control the other aspects of the meeting.

1import "./App.css";
2import React, { useState } from "react";
3import VideoMeeting from "./components/clanMeeting";
4
5function App() {
6  const [meeting, setMeetingInstance] = useState(null);
7
8  // Create instance
9  const getInstance = (instance) => {
10    setMeetingInstance(instance);
11  };
12
13  // Add domain and consumerId here
14  const domain = "<domain>";
15  const consumerId = "<consumerId>";
16
17  // Add properties here
18  const optionalProperties = {
19    roomName: "test",
20    displayName: "Host",
21    // Pass jwt only for the host.
22    // When generating your own JWT token, please fetch the token from your backend server
23    // Visit https://clanmeeting.com/docs/video-api-token-generation/generate-jwt/
24    jwt: "<jwt_token>",
25    enableJoinMeetingPage: false,
26  };
27
28  // Add JavaScript events and methods inside the IF block
29  if (meeting) {
30    // Example event that triggers if a participant joins the meeting
31    // The callback listener is triggered in case this event occurs within the meeting
32    const someoneJoinedLsnr = () => {
33      console.log("Trigger custom logic of what happens if a participant joins the meeting");
34    };
35
36    // Start listening for the someoneJoined event
37    meeting.on("someoneJoined", someoneJoinedLsnr);
38  }
39
40  return (
41    <div className="App">
42      <VideoMeeting
43        domain={domain}
44        consumerId={consumerId}
45        optionalProperties={optionalProperties}
46        getInstance={(data) => getInstance(data)}
47      />
48    </div>
49  );
50}
51
52export default App;

 

Finally paste the following into your index.html file in the section

1<div id="my-meeting" style="position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 99;"></div>

 

Ensure that strict mode is disabled in your src/index.js file

1// change this
2root.render(
3  <React.StrictMode>
4    <App />
5  </React.StrictMode>
6);
7// to below
8root.render(
9    <App />
10);
11