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:

$ npm i react-clan-video

Usage

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

import React, { useState, useEffect } from 'react';
import { clanModule } from 'react-clan-video';
const VideoConferencing = ({ domain, consumerId, jwt }) => {
    const [wi, setWi] = useState(null);
    useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://ap01.clanmeeting.com/external_api.js";
        script.async = true;
        script.onload = () => scriptLoaded();

        document.body.appendChild(script);
    }, [domain, consumerId, jwt]);
    const scriptLoaded = () => {
        setWi(window);
    }

    useEffect(() => {
        const optionalProperties = {
            roomName: 'uniqueRoomName',
            displayName: 'Host',
            jwt: jwt
        };
        const instance = new clanModule(domain, consumerId, optionalProperties);
        instance.generateRoomName().anonymizeDisplayName();
        instance.start();
    }, [wi]);
    return (
        <>
            <span style={{
                display: 'flex',
                justifyContent: 'center'
            }}>please wait....</span>
        </>
    );
}


export default VideoConferencing;

In your App.js file should look like this.

import VideoConferencing from './components/video';

function App(props) {
  const domain = '<past your domain>';
  const consumerId = '<past consumerId>';
  const optionalProperties = {
        jwt: '<past jwt token>',
    };
  return (
    <div className="App">
     <VideoConferencing 
      domain={domain}
      consumerId={consumerId}
      jwt={optionalProperties.jwt}
     />
    </div>
  );
}

export default App;

Finally past this in your index.html file

<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>