vani-meeting-client/README.md

Vani Meeting Clinet SDK

# Vani Meeting SDK
Next generation video and audio API and SDK solutions to enhance your online experience. Engage with your audience in real-time, on any platform, from anywhere, through the addition of video and voice with Vani Meetings’s API and SDK solutions.





## Getting Started


## Installation

Install vani-meeting.demo with npm

```bash
  npm install com.vanimeeting.demo
                
  yarn add com.vanimeeting.demo
```
    
## Usage/Examples

```bash
    import * as MeetingHandler from "com.vanimeeting.demo";
    import * as EventEmitter from "events";

    class WebrtcCallHandler {
    constructor() {
    this.roomid = null;
    this.meetingRequest = null;
    this.evenetEmitter = new EventEmitter();
    }

    static instance = new WebrtcCallHandler();
    static getInstance() {
        if (WebrtcCallHandler.instance === null) {
            WebrtcCallHandler.instance = new WebrtcCallHandler();
         } else {
        return WebrtcCallHandler.instance;
        }
    }
    setup(roomid, userid, appName, userData) {
        if (this.meetingRequest === null) {
            const locaUserid =
            new Date().getTime() + "_" + Math.floor(Math.random() * 20);
            this.meetingRequest = MeetingHandler.meetingStartRequestObject(
                roomid,
                userid || locaUserid,
                "demo" || appName
            );
            this.meetingRequest.numberOfUsers = 2;
            this.meetingRequest.userData = userData;
            }
            return this.meetingRequest;
        }
    }

    export default WebrtcCallHandler;

```

First we have to import SDK.
```
    import * as MeetingHandler from "com.vanimeeting.demo";
    import * as EventEmitter from "events";
```

Then we have to call meetingStartRequestObject which returns meetingStartRequestObject modal and accepts `roomId`, `userId`, `appId`, and `userData` as its params where:

* `roomId` : is always unique string to join a meeting.
* `userId` :  is always unique string respective to user.
* `appId` :   can be any manual id given by user.
* `userData` :    any extra data.
```
    setup(roomid, userid, appName, userData) {
        if (this.meetingRequest === null) {
            const locaUserid =
            new Date().getTime() + "_" + Math.floor(Math.random() * 20);
            this.meetingRequest = MeetingHandler.meetingStartRequestObject(
                roomid,
                userid || locaUserid,
                "demo" || appName
            );
            this.meetingRequest.numberOfUsers = 2;
            this.meetingRequest.userData = userData;
            }
            return this.meetingRequest;
        }
    }
```

Then we will initialize the meeting and establish the connection by calling init method.

```
    MeetingHandler.init();
```

Then we will call startLocalStream method of MeetingHandler which will ask for camera and mic permission, once given returns the localStream of the user itself.
It accepts `isVideoRequired` and `isAudioRequired` as its params.

 * `isVideoRequired` : boolean
 * `isAudioRequired` : boolean

```
    MeetingHandler.startLocalStream();
```

Then we will call checkSocket method of MeetingHandler to establish a connection with web socket.

```
    MeetingHandler.checkSocket();
```

After the connection is established with the websocket we will recieve an `onConnected` event and pass event name "onConnected" as first params and pass callback function `onConnected` as second parameter which will call `startMeeting` method of MeetingHandler to start the meeting.

```
    MeetingHandler.eventEmitter.on("onConnected", this.onConnected);
    onConnected = () => {
    MeetingHandler.startMeeting();
    };
```

After the initiation of meeting we will recieve an `onTrack` event and pass that event as event name "onTrack" as first params and pass callback function `onTrack` as second parameter which will recieve track as a parameter which will be passed as a `MediaStream` to `video` tag.

```
    MeetingHandler.eventEmitter.on("onTrack", this.onTrack);
    MeetingHandler.eventEmitter.on("refreshTrack", this.onTrack);*
    onTrack(track) {
        if (
            track.track !== null &&
            track &&
            track.kind === "video" &&
            track.isLocalTrack
        ) {
            this.localVideoRef.current.srcObject = new MediaStream([track.track]);
            this.localVideoRef.current.play();
        } else if (track && track.track !== null && !track.isLocalTrack) {
        if (track.kind === "video" && track) {
            this.remoteVideoRef.current.srcObject = new MediaStream([track.track]);
            this.remoteVideoRef.current.play();
        } else {
        if (track && track.track !== null) {
          this.remoteAudioRef.current.srcObject = new MediaStream([
            track.track,
          ]);
            this.remoteAudioRef.current.play();
            }
        }
        }
    }
```