react-clan-video

React Clan Video is a node.js package for initializing video calls using your own configurations.

Installation

This is a Node.js module available through the npm registry. Installation is done using the npm install command:

1$ npm i react-clan-video

Usage

create file with the name of video.js and past the following content

1import React, { useState, useEffect } from 'react';
2import { clanModule } from 'react-clan-video';
3const VideoConferencing = ({ domain, consumerId, jwt }) => {
4    const [wi, setWi] = useState(null);
5    useEffect(() => {
6        const script = document.createElement("script");
7        script.src = "https://ap01.clanmeeting.com/external_api.js";
8        script.async = true;
9        script.onload = () => scriptLoaded();
10
11        document.body.appendChild(script);
12    }, [domain, consumerId, jwt]);
13    const scriptLoaded = () => {
14        setWi(window);
15    }
16
17    useEffect(() => {
18        const optionalProperties = {
19            roomName: 'uniqueRoomName',
20            displayName: 'Host',
21            jwt: jwt
22        };
23        const instance = new clanModule(domain, consumerId, optionalProperties);
24        instance.generateRoomName().anonymizeDisplayName();
25        instance.start();
26    }, [wi]);
27    return (
28        <>
29            <span style={{
30                display: 'flex',
31                justifyContent: 'center'
32            }}>please wait....</span>
33        </>
34    );
35}
36
37
38export default VideoConferencing;

In your App.js file should look like this.

1import VideoConferencing from './components/video';
2
3function App(props) {
4  const domain = '<past your domain>';
5  const consumerId = '<past consumerId>';
6  const optionalProperties = {
7        jwt: '<past jwt token>',
8    };
9  return (
10    <div className="App">
11     <VideoConferencing 
12      domain={domain}
13      consumerId={consumerId}
14      jwt={optionalProperties.jwt}
15     />
16    </div>
17  );
18}
19
20export default App;
21

Finally past this in your index.html file

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>