architwin 1.0.32 → 1.0.36

package/README.md

@@ -24,18 +24,34 @@ ArchiTwin Library
   - [Loading and Interacting with 3D/2D Objects](#loading-and-interacting-with-3d2d-objects)
     - [What is an Object?](#what-is-an-object)
     - [Loading Objects](#loading-objects)
+    - [Accessing List of Rendered Objects and Object Structure](#accessing-list-of-rendered-objects-and-object-structure)
     - [Transforming Objects](#transforming-objects)
       - [Transforming Object by clicking it](#transforming-object-by-clicking-it)
-      - [METHOD 2: Programmatically transforming objects](#method-2-programmatically-transforming-objects)
+      - [Programmatically transforming objects](#programmatically-transforming-objects)
     - [Undoing and Redoing Transformation Changes](#undoing-and-redoing-transformation-changes)
     - [Adding Objects To Your Space](#adding-objects-to-your-space)
+      - [Programmatically Add Objects](#programmatically-add-objects)
     - [Creating a Customizable Media Screen](#creating-a-customizable-media-screen)
       - [Adding a Media Screen](#adding-a-media-screen)
       - [Media Screen Parameter Reference](#media-screen-parameter-reference)
       - [Attaching an image or video to a Media Screen](#attaching-an-image-or-video-to-a-media-screen)
+      - [Delete Media Screen](#delete-media-screen)
     - [Getting the coordinates of a clicked area in the 3D space](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space)
     - [Setting Video Playback in the Space](#setting-video-playback-in-the-space)
     - [Setting Animation Control in the Space](#setting-animation-control-in-the-space)
+  - [Meeting Guide](#meeting-guide)
+    - [Create Meeting](#create-meeting)
+    - [Start Meeting](#start-meeting)
+    - [Stop Meeting](#stop-meeting)
+    - [Utility Methods](#utility-methods)
+    - [Update Meeting Details](#update-meeting-details)
+    - [Meeting Info](#meeting-info)
+    - [Meeting Config Options](#meeting-config-options)
+      - [Meeting Custom Colors](#meeting-custom-colors)
+      - [Meeting Custom Avatars](#meeting-custom-avatar)
+      - [Meeting Device Control](#meeting-custom-control)
+      - [Meeting Bar Position](#meeting-bar-position)
+      - [Meeting Status](#meeting-status)
   - [Function Reference](#function-reference)
       - [Tags](#tags)
     - [Sweeps](#sweeps)
@@ -43,6 +59,9 @@ ArchiTwin Library
     - [Navigation](#navigation)
     - [Camera](#camera)
     - [Objects](#objects)
+    - [Meeting](#meeting)
+    
+
 ## Installation
 ---------------------
 ### Install Using NPM
@@ -525,7 +544,12 @@ Space can also contain Image Slideshow Screens. This is similar to the Video Scr
 Clicking on the right section of the current slide image will display the next slide. 
 Clicking on the the left section will display the previous slide. 
 
-The slideshow can be auto played in whole by clicking the lower-right corner. 
+The slideshow can be auto played in whole by clicking the lower-right corner.
+
+**Meeting**
+Space meeting feature introduces immersive way to conduct virtual gatherings and collaborative sessions. This innovative feature allows users to convene inside a Space, where participants represented by an avatar and can interact, communicate, and share ideas in a more lifelike and engaging manner.
+
+Please check [Meeting Guide](#meeting-guide) to know how to use Meeting feature.
 
 ## Points of Interest
 Tags are primarily use to mark locations or objects in space for quick and direct navigation.
@@ -639,6 +663,85 @@ import * as atwin from 'architwin'
 
 atwin.nearbyObjects //Gets updated everytime the User camera moves
 ```
+
+### Accessing List of Rendered Objects and Object Structure
+
+Objects that have been loaded and **rendered** into the 3D space are stored in an array called _3DXObjects which you can access by doing calling it this way
+
+```typescript
+atwin._3DXObjects
+```
+
+All the elements in this array implement the `IObjectData` interface. Each element in the array contains all the data you would need manipulate the object.
+
+*interface used* (TS)
+```typescript
+interface IObjectData {
+  collider?: any
+  object: IShowcaseObject
+  component: Scene.IComponent
+  node: Scene.INode
+  type?: string
+}
+```
+
+Each object element inside `atwin._3DXObjects` contains the value keys:
+
+**collider:** Collider components define the shape of an 3D/2D object for the purposes of physical collisions. A collider, which is invisible, does not need to be the exact same shape as the GameObject’s mesh.
+
+**object:** The object key is an object that implements the `IShowcaseObject` interface. This is one of the most important values as the object contains all the information about an object such as its id,name,position,rotation,scale,amazon_uri link, and etc. You can look at the interface below to view the full makeup of the object key.
+
+*interface used* (TS)
+```typescript
+export interface IShowcaseObject {
+  id: number;
+  showcase_id: number;
+  object_id: number;
+  user_id: number;
+  object_position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  object_rotation: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  object_scale: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  autoplay: boolean;
+  autoplay_distance: number;
+  offset_position: number;
+  offset_rotation: number;
+  position_unit: string;
+  showcase_object_name: string;
+  is_deleted: boolean;
+  is_read: boolean;
+  is_new: boolean;
+  object_data: I3DObject;
+}
+```
+
+**component:** This objects contains functions and variables responsible for intializing, updating, and destroying a rendered objects mesh, texture, etc. This object also contains the three.js instance. Since the 3D space is rendered with Three.js under the hood. You can use this instance to invoke methods made available by three.js. This gives you a lot of flexibility and control provided you know how to use it. This documentation will not cover Three.js specific methods. Visit their [official website](https://threejs.org/) if you want to learn more about it.
+
+**node:** The node is responsible for managing the lifecycle of a 3D/2D objects. The node can be used to `start()` and `stop()` a rendered model. Invoking `start()` will render the model into the scene while `stop()` will destroy it and remove it from the scene. 
+
+**type:** A string that states the file or object type of a 3D/2D object. The file type could be any of the following
+
+**Valid Types**
+
+| type | context | description | 
+| :----: | :----: | :---: |
+| GLB | 3D model | A 3D model with or without animation |
+| FBX | 3D model | A 3D model with or without animation |
+| FRAME | Media Screen | A customizable [media screen](#creating-a-customizable-media-screen) |
+| ZIP | slideshow | A zip file rendered as a image slideshow |
+
+The `atwin.selectedObject` variable is an example of a variable that implements this interfacea and contains this data.
 ### Transforming Objects
 
 Transformation such as translate, scale, and rotate are actions used to manipulate objects in a 3D space. These transformations allow you to change an object's position, size, and orientation respectively. 
@@ -670,7 +773,7 @@ If you wish the to access the object data of the object that has been clicked on
 console.log("Selected object data",atwin.selectedObject)
 ```
 
-#### METHOD 2: Programmatically transforming objects
+#### Programmatically transforming objects
 
 If you need to transform the position,rotation, and scale of one or more objects without having to use the mouse then the 
 `setObjectTransformation()` method will allow you to do so. The method accepts the following parameters 
@@ -688,10 +791,10 @@ The **transform** object contains the following key-value pairs. These values wh
 | object_rotation | Vector3 | yes | none | Valid x,y,z coordinates|
 | object_scale | Vector3 | yes | none | Valid x,y,z coordinates|
 
-In this example, we will get a random 3D model from the array of rendered objects stored in `atwin._3DXObject` and manipulate it using the method. The object we will be manipulating in this example is a 3D model with a file type of GLB (You can also transform other object types such as a media screen). This will return a javascript object that contains the rendered object's data which implement the `IObjectData` interface. You can know more about that by going to this section
+In this example, we will get a random 3D model from the array of rendered objects stored in `atwin._3DXObjects` and manipulate it using the method. The object we will be manipulating in this example is a 3D model with a file type of GLB (You can also transform other object types such as a media screen). This will return a javascript object that contains the rendered object's data which implement the `IObjectData` interface. You can know more about that by going to this section
 
 ```typescript
-const targetObject = atwin._3DXObject.find(obj => obj.object.object_data.object_type == 'GLB')
+const targetObject = atwin._3DXObjects.find(obj => obj.object.object_data.object_type == 'GLB')
 
 const transform = {
   object_position: {
@@ -742,8 +845,14 @@ In order to add an object, you may use the `addObjectToScene()` method.
 
 | parameter | type | required | values |
 | :----: | :----: | :---: | :---: |
-| object | I3DObject | yes | object |
-| option | object | no | object |
+| object | I3DObject | yes | object payload |
+| option | ObjectConfig | no | valid config object |
+
+There are two ways you can use the `addObjectToScene()` method. We will go through each one 
+
+#### Programmatically Add Objects
+
+If you wish to add new object to your space to a pre-defined position, you can use the `addObjectToScene()` method an pass the object data along 
 
 ```typescript
 atwin.addObjectToScene(object:I3DObject, option:object)
@@ -776,7 +885,7 @@ The **transform** object is an object that contains the following key-value pair
 
 By default, your media screen will show a blank white canvas if you set the mediaUrl parameter of the `addMediaScreen()` method as an empty string or `undefined`.
 
-**IMPORTANT:** The link to your media you provide to the mediaUrl **MUST** be publicly accessible and have the appropriate CORS headers, otherwise, you media will not load into the media screen.
+**IMPORTANT:** The link to your media you provide to the mediaUrl **MUST** be publicly accessible and have the appropriate CORS headers, otherwise, your media will not load into the media screen.
 
 There are many ways you can use this method to add a media screen to your 3D space. Let's go through each one.
 
@@ -806,9 +915,9 @@ atwin.addMediaScreen('',transform)
 
 If done correctly, you should be able to see your media screen in your intended position. This method is useful if you already the have position,rotation, and scale values stored in a database or possibly in a local array
 
-**Method 2: Adding with click method with getTargetPosition**
+**Method 2: Adding with click method using getTargetPosition**
 
-The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your inteneded position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the `addMediaScreen()` method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
+The library has several helper methods that provide a range of commmon functionalities to help you achieve certain actions easier. If for example, you do not have your intended position coordinates stored in the database or in a local area and wish to click a specific area of the 3D space and get that the coordinates of the area you clicked, you may do some by using the `getTargetPosition()` helper method in tangent with the `addMediaScreen()` method to do so. You can [click here](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space) to know more about the `getTargetPosition()` method
 
 Here is an example of how you can use the two methods together. This is just one example, it is up to you on how you wish to combine different methods provided by the library
 
@@ -830,90 +939,6 @@ function myCallbackFunction(clickedPosition){
 atwin.getTargetPosition(myCallbackFunction)
 ```
 
-#### Attaching an image or video to a Media Screen
-You can think of a media screen as a blank canvas whose content is totally up to you. If you wish to set the property media screen content, you may use the `attachMediaScreenContent()` method.
-
-**Attach Media Screen Parameters**
-
-| parameter | type | required |  default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| mediaScreenId | number | yes | none | id of object |
-| mediaUrl | string | yes | none | valid public url to the media|
-| mediaType | string | no | image | 'image' or 'video' |
-
-**IMPORTANT:** The link to your media you provide to the mediaUrl **MUST** be publicly accessible and have the appropriate CORS headers, otherwise, you media will not load into the media screen.
-
-In this example, we are using a link pointing to the media stored in an s3 bucket as the mediaUrl and a random media screen id. You will have to substitute the id with an actual id of a rendered media screen.
-
-Example with image:
-```typescript
-const targetMediaScreenId = 12
-const validUrl = 'https://stg-feelpet.s3.ap-northeast-1.amazonaws.com/0CB45E51-EC48-4727-906A-4CD8A13C0770.jpg'
-
-atwin.attachMediaScreenContent(targetMediaScreenId,validUrl,'image')
-```
-
-Example with video:
-```typescript
-const targetMediaScreenId = 12
-const validUrl = 'https://stg-feelpet.s3.ap-northeast-1.amazonaws.com/VID_20230203_165202.mp4'
-
-atwin.attachMediaScreenContent(targetMediaScreenId,validUrl,'video')
-```
-
-When setting a video as the media screen content. You can use the `setVideoPlayback()` method to programmatically play,pause,mute,and unmute a video. You can navigate to the [playback controls section](#setting-video-playback-in-the-space) to learn more about the method. Here is an example on how to use it. 
-
-In this example, we are getting a random media screen from the `atwin._3DXObject` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the `setVideoPlayback()` method. Please take note that this variable is not acessible if the media type of the media screen content is an image.
-
-
-*Interface used*
-```typescript
-export interface IObjectData {
-  collider?: any
-  object: IShowcaseObject
-  component: Scene.IComponent
-  node: Scene.INode
-  type?: string
-}
-```
-
-*Example*
-```typescript
-const randomMediaScreen:IObjectData = atwin._3DXObject.find(obj => obj.object.object_data.object_type == 'FRAME')
-
-setVideoPlayback('play',randomMediaScreen.component.planeElement)
-```
-
-You can use the [transform controls](#transforming-objects) to change the position, scale, and rotation of the media screen using the mouse cursor.
-
-### Getting the coordinates of a clicked area in the 3D space
-
-The 3D space you walk around is a three dimensional mesh under the hood. Every point in this space has an x,y,z coordinates. These are coordinates are important since it allows us to anchor objects into the 3D space and navigate around it. You may at times need the ability to get the coordinates of an area in the space. You can do this by utilizing the `getTargetPosition()` method. 
-
-**Parameter Reference**
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| callback | Function | no | none | any valid function|
-
-You can invoke the method by doing the following
-
-```typescript
-//pass a callback function to the method below to get
-//the coordinates once the user has clicked on an area
-function myCallbackFunction(coords){
-  //Line of code to do something else
-  return coords
-}
-
-atwin.getTargetPosition(myCallbackFunction)
-```
-
-The method accepts a callback function that is triggered once the user has clicked on an area in the space. The methods passes the x,y,z coordinates of the clicked position to the callback function you have passed into the method. When the method is invoked the original white circle pointer is replaced with the target pointer pictured below
-
-<img src="https://drive.google.com/uc?id=1vD4ELNj_rjBVh3hOyYjMcO12Ffmse2Rz" width="50" height="50" />
-
-The pointer goes back to normal after the user has clicked on any area inside the 3D space
-
 ### Setting Video Playback in the Space
 
 Setting video playback refers to the act of adjusting various controls associated with the playback of a video in the space. It involves manipulating controls such as pause, play, mute, and unmute to modify the playback behavior according to user's preferences.
@@ -970,6 +995,435 @@ If you wish to pause the Animation of the 3D object, change the parameter to 'pa
 atwin.setAnimationState('pause',17)
 ```
 
+## Meeting Guide
+
+Hosting Live Virtual Meetings in 3D Space
+
+The meeting feature in ArchiTwin Library is a virtual meeting inside a 3D Space. Each participant in the virtual meeting is represented by a 3D object called an avatar. The meeting feature enables an immersive way to conduct virtual gatherings and collaborative sessions inside a 3D Space. A popular application of this virtual meeting feature is for architectural design reviews. Architects, designers, and clients can gather in the shared 3D Space as avatars to explore and discuss the virtual representation of a building or project. This immersive approach allows stakeholders to experience the design from various perspectives, collaborate in real-time, and make informed decisions more efficiently, regardless of their physical locations.
+
+The next few sections will explain how you can get started in creating or hosting your own virtual meeting inside your 3D Spaces.
+
+### Create Meeting
+
+Before you can start hosting your virtual meeting, we must first create a meeting. 
+
+````typescript
+atwin.createMeeting(
+  spaceId: string, 
+  hostName: string, 
+  title: string, 
+  meetingStart: Date, 
+  meetingStatus: MeetingStatus
+  duration: number, 
+  password: string,
+)
+````
+
+The `createMeeting` method requires the following parameters to work.
+
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| spaceId | string | yes | any string |
+| hostName | string | yes | any string|
+| title | string | yes | any string |
+| meetingStart | string | yes | any string |
+| meetingStatus | string | yes | '0', '1', '2', or '3'|
+| duration | number | yes | any number |
+| password | string | no | any string|
+
+`spaceId` : string - The ID of the Space where the meeting will take place.
+
+`hostName` : string - The meeting's host name.
+
+`title` : string - The title of the meeting.
+
+`meetingStart` : string - The date and time when meeting will start, `meetingStart` will follow ISO 8601 (e.g, '2023-07-19T17:34'). 
+format.
+
+`meetingStatus` : [Meeting Status](#meeting-status) - The initial status of meeting will automatically set to `STARTED` if `meetingStart` is empty or null.
+
+`duration` : number - Duration of the meeting in hour (e.g, 3, 2.5).
+
+Note: `duration` can accept floating numbers like `1.5`. `1.5` is equivalent to 1 hour and 30 minutes.
+
+`password` : string - Password of the meeting.
+
+*Example:*
+````typescript
+<script lang='ts'>
+  import * as atwin from 'architwin';
+
+  atwin.createMeeting(
+    '1', 
+    'John Doe', 
+    'Daily Meeting', 
+    '2023-07-19T17:34', 
+    1.5, 
+    'password123',
+  )
+
+</script>
+````
+
+Successfuly invoking the `createMeeting` method will return an object containing the meeting password, and meeting URL for host and guest which is used in another method called [startMeeting](#start-meeting).
+
+*Return Example:*
+````json
+{
+    "host": "http://localhost:5173/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=host",
+    "guest": "http://localhost:5173/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=guest",
+    "meeting_id": "290d9f7d-fb14-4c8f-9d95-695cac59e44b",
+    "meeting_password" : "password123"
+}
+````
+
+### Start Meeting
+
+Star the meeting using `startMeeting` method. 
+````typescript
+atwin.startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig?: MeetingConfig)
+````
+The `startMeeting` method requires the following parameters to work.
+
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingUrl | string | yes | valid public URL |
+| meetingPassword | string | no | any string|
+| meetingConfig | MeetingConfig | no | MeetingConfig object |
+
+This `startMeeting` method will initialize the meeting and display pre-meeting settings.
+
+`meetingUrl` : string - The URL that is generated from `createMeeting` method.
+
+`meetingPassword` : string - The password set during creation of the meeting.
+
+`meetingConfig` : [MeetingConfig](#meeting-config-options) - You can pass `MeetingConfig` object to configure and customize the meeting experience. 
+
+NOTE: Please check [MeetingConfig](#meeting-config-options) interface to see more customization options.
+
+*Example:*
+````typescript
+atwin.startMeeting(
+  meetingUrl: "http://localhost:5173/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=host",
+  meetingPassword: 'password123',
+  meetingConfig: {
+    customColors: {
+      primary900: '16 29 70',
+      primary200: '141 164 239',
+      primary: '58 92 204',
+      }
+    deviceControl: {
+      videoInput: false,
+      audioInput: true,
+      audioOutput: true
+    },
+    meetingBarPosition: 'top',
+  }
+)
+````
+Successfuly invoking the `startMeeting` method will start the meeting.
+
+### Stop Meeting
+````typescript
+atwin.stopMeeting()
+````
+To end the current or initialized meeting use `stopMeeting` method.
+
+Note: `stopMeeting` method will have the same result of using hang-up button in meeting session control.
+
+### Utility Methods
+
+**Get Meeting Participants**
+````typescript
+atwin.getMeetingParticipants()
+````
+This method will return the current meeting participants' space data (e.g, position and rotation).
+
+*Return Example:*
+````json
+[
+  {
+    id: 123,
+    name: "John Doe",
+    avatar: {
+      model: "myAvatar.gltf",
+    },
+    avatarConfig: {
+      scale: 1,
+      height: 0,
+      laserOrigin: { x: 0, y: 0, z: 0 },
+    },
+    position: { x: 1, y: 2, z: 1 },
+    rotation: { x: 1, y: 1 },
+  },
+]
+````
+
+**Get all meeting in specific Space**
+````typescript
+atwin.getSpaceMeetings(spaceId: string)
+````
+This function will return a list of all meeting in a specific Space.
+
+*Example:*
+````typescript
+atwin.getSpaceMeetings(spaceId: 1)
+````
+
+*Return Example:*
+````json
+{
+    "status": "success",
+    "data": [
+        {
+            "id": 9,
+            "space_id": "1",
+            "meeting_id": "04acd056-e563-46bb-a585-9069c4e75160",
+            "host_name": "John Doe",
+            "title": "Meeting in Space",
+            "meeting_start": "2023-07-30 15:50:00",
+            "meeting_status": 3,
+            "duration": null,
+            "password": null,
+            "created_on": "2023-07-19 05:21:24",
+            "created_by": 5,
+            "modified_on": "2023-07-21 09:06:54",
+            "modified_by": 5,
+            "deleted_on": "2023-07-21 09:06:54",
+            "deleted_by": 5,
+            "is_deleted": false,
+            "is_read": null,
+            "is_new": null
+        },
+        {
+            "id": 10,
+            "space_id": "1",
+            "meeting_id": "35520e9d-1f1e-4135-9f7b-0e55cb7b9e05",
+            "host_name": "John Smith",
+            "title": "Space Meeting",
+            "meeting_start": "2023-07-19 13:30:00",
+            "meeting_status": 1,
+            "duration": null,
+            "password": null,
+            "created_on": "2023-07-19 05:21:44",
+            "created_by": 5,
+            "modified_on": "2023-07-19 05:21:44",
+            "modified_by": 5,
+            "deleted_on": "2023-07-19 05:21:44",
+            "deleted_by": 5,
+            "is_deleted": false,
+            "is_read": null,
+            "is_new": null
+        },
+    ]
+}
+````
+
+**Get Meeting**
+````typescript
+atwin.getMeeting(meetingId: string)
+````
+This method will return meeting details.
+
+*Example:*
+````typescript
+atwin.getMeeting(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+````
+
+*Return Example:*
+````json
+{
+    "status": "success",
+    "data": {
+        "id": 16,
+        "space_id": "2",
+        "meeting_id": "bac67012-d2ff-47f6-b427-fc2538caac2b",
+        "host_name": "John Doe",
+        "title": "Meeting in Space",
+        "meeting_start": null,
+        "meeting_status": 1,
+        "duration": null,
+        "password": null,
+        "created_on": "2023-07-20 08:40:32",
+        "created_by": 5,
+        "modified_on": "2023-07-20 08:40:32",
+        "modified_by": 5,
+        "deleted_on": "2023-07-20 08:40:32",
+        "deleted_by": 5,
+        "is_deleted": false,
+        "is_read": null,
+        "is_new": null
+    }
+}
+````
+
+**Check meeting if exist**
+````typescript
+atwin.isMeetingExist(meetingId: string)
+````
+This method will check if meeting exists and returns a boolean.
+
+**Check meeting if active**
+````typescript
+atwin.isMeetingActive(meetingId: string)
+````
+This method will check if meeting is active and return a boolean.
+
+Note: Active meeting refers to `MeetingStatus.STARTED` or `MeetingStatus.SCHEDULED`.
+
+### Update Meeting Details
+
+Methods to update meeting details.
+
+All update methods will return a response.
+
+````typescript
+atwin.updateMeetingTitle(meetingId: string, meetingTitle: string)
+````
+
+````typescript
+atwin.updateMeetingStart(meetingId: string, meetingStart: string)
+````
+
+````typescript
+atwin.updateMeetingStatus(meetingId: string, meetingStatus: string)
+````
+
+````typescript
+atwin.updateMeetingSpace(meetingId: string, spaceId: string)
+````
+
+### Meeting Info
+````typescript
+export interface MeetingInfo {
+  space_id: number;
+  meeting_id?: string;
+  host_name?: string;
+  title?: string;
+  meeting_start?: Date;
+  meeting_status?: MeetingStatus;
+  duration?: number;
+  password?: string;
+}
+````
+
+`space_id` : number - The id of the Space.
+
+`meeting_id` : string - The meeting ID.
+
+`host_name` : string - The name of host of the meeting.
+
+`title` : string - The title of the meeting.
+
+`meeting_start` : Date - The date when meeting expected to start.
+
+`meeting_status` : [MeetingStatus](#meeting-status) - The status of the meeting.
+
+`duration` : number - The duration of the meeting.
+
+`password` : string - The password of the meeting.
+
+### Meeting Config Options
+````typescript
+export interface MeetingConfig {
+  customColors?: MeetingCustomColors;
+  customAvatars?: Avatar[];
+  deviceControl?: MeetingDeviceControl;
+  meetingBarPosition?: MeetingBarPosition;
+}
+````
+
+`customColors` : [MeetingCustomColors](#meeting-custom-colors) - This property allows you to personalize the theme of the meeting bar or modals by providing custom colors.
+
+`customAvatars` : [Avatar](#meeting-custom-avatar)[ ] - This property allows you to have the option to use your own avatars in the meeting.
+
+Note: You cannot have both the default avatars and custom avatar in avatar selection.
+
+`deviceControl` : [MeetingDeviceControl](#meeting-device-control) - This property allows you to determine whether participants can use their video input, audio input, and audio output devices during the meeting.
+
+`meetingBarPosition` : [MeetingBarPosition](#meeting-bar-position) - This property allows you to specify the position of the meeting bar or modals during the meeting.
+
+#### Meeting Custom Colors
+````typescript
+export interface MeetingCustomColors {
+  primary?: string,
+  primary900?: string,
+  primary200?: string,
+  secondary?: string,
+  gray?: string,
+  success?: string,
+  danger?: string,
+  black?: string,
+  white?: string,
+  gray100?: string,
+  gray200?: string,
+  gray300?: string,
+  gray400?: string,
+  gray500?: string,
+  gray600?: string,
+  gray700?: string,
+  gray800?: string,
+}
+````
+
+*Example:*
+````typescript
+const meetingCustomColors: MeetingCustomColors = {
+  primary900: '16 29 70',
+  primary200: '141 164 239',
+  primary: '58 92 204',
+  gray800: '250 250 252',
+  gray700: '233 229 239',
+  gray600: '201 196 209',
+  gray500: '174 169 184',
+  gray400: '126 122 136',
+  gray300: '87 83 95',
+  gray200: '57 54 62',
+  gray100: '38 36 42',
+}
+````
+
+#### Meeting Custom Avatar
+````typescript
+export interface Avatar {
+  model: string;
+  thumbnail: string;
+}
+````
+`model` : string - Source link of the GLB file or 3d model object.
+
+`thumbnail` : string - Source link of the thumbnail image.
+
+
+#### Meeting Device Control
+````typescript
+export interface MeetingDeviceControl {
+  videoInput: boolean;
+  audioInput: boolean;
+  audioOutput: boolean;
+}
+````
+`videoInput` : boolean - Enable or disable video input device.
+
+`audioInput` : boolean - Enable or disable audio input device.
+
+`audioOutput` : boolean - Enable or disable audio output device.
+
+#### Meeting Bar Position
+````typescript
+export type MeetingBarPosition = 'left' | 'right' | 'top' | 'bottom';
+````
+
+#### Meeting Status
+````typescript
+export const enum MeetingStatus {
+  SCHEDULED = 0,
+  STARTED = 1,
+  STOPPED = 2,
+  CANCELLED = 3,
+}
+````
+
 ## Function Reference
 
 Some Functions are **async**; when invoking them, Use keyword **await** or **.then** syntax
@@ -1299,6 +1753,148 @@ showObjectDimensions(selected:IObjectData)
 </script>
 ````
 
+### Meeting
+
+````typescript
+
+createMeeting(
+  spaceId: string, 
+  hostName: string, 
+  title: string, 
+  meetingStart: string, 
+  meetingStatus: MeetingStatus
+  duration: string, 
+  password: string,
+)
+
+  // returns an object consist of meeting URL, meeting ID, meeting password
+  // this is an async function that returns a Promise
+
+startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig: MeetingConfig)
+    // meetingUrl - URL generated by `createMeeting` function
+    // meetingPassword - optional but default is null
+    // meetingConfig - optional but default is null
+    // this is an void async function
+
+stopMeeting() 
+    // this is an async function
+
+getMeetingParticipants()
+    // return a list of participants
+    // this is an async function
+
+getSpaceMeetings(spaceId: string)
+    // spaceId - the id of Space
+    // returns a list if meetings
+    // this is an async function
+
+getMeeting(meetingId: string)
+    // meetingId - the id of the meeting
+    // returns a meeting
+    // this is an async function
+
+isMeetingExist(meetingId: string)
+    // meetingId - the id of the meeting
+    // returns a boolean
+    // this is an async function
+
+isMeetingActive(meetingId: string)
+    // meetingId - the id of the meeting
+    // returns a boolean
+    // this is an async function
+
+updateMeetingTitle(meetingId: string, meetingTitle: string)
+    // meetingId - the id of the meeting
+    // meetingTitle - the new meeting title
+    // returns a response status
+    // this is an async function
+
+updateMeetingStart(meetingId: string, meetingStart: string)
+    // meetingId - the id of the meeting
+    // meetingStart - the new date when meeting scheduled to start
+    // returns a response status
+    // this is an async function
+
+updateMeetingStatus(meetingId: string, meetingStatus: string)
+    // meetingId - the id of the meeting
+    // meetingStatus - can be 0 for SCHEDULED, 1 for STARTED, 2 for STOPPED, 3 for CANCELLED
+    // returns a response status
+    // this is an async function
+
+updateMeetingSpace(meetingId: string, spaceId: string)
+    // meetingId - the id of the meeting
+    // spaceId - the ID of the new Space 
+    // returns a response status
+    // this is an async function
+````
+
+**Example**
+````typescript
+<script lang="ts">
+  import * as atwin from 'architwin';
+  ...
+
+  // create a meeting and generate meeting URL
+  atwin.createMeeting(
+    '1', 
+    'John Doe', 
+    'Daily Meeting', 
+    '2023-07-19T17:34', 
+    1.5, 
+    'password123',
+  )
+
+  // start a meeting
+  atwin.startMeeting(
+    meetingUrl: "http://www.example.com/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=host",
+    meetingPassword: 'password123',
+    meetingConfig: {
+      customColors: {
+        primary900: '16 29 70',
+        primary200: '141 164 239',
+        primary: '58 92 204',
+        }
+      deviceControl: {
+        videoInput: false,
+        audioInput: true,
+        audioOutput: true
+      },
+      meetingBarPosition: 'top',
+    }
+  )
+
+  // stop current or initialized meeting
+  atwin.stopMeeting()
+
+  // get all current meeting's participant
+  atwin.getMeetingParticipants()
+
+  // get all meetings in specific Space
+  atwin.getSpaceMeetings(spaceId: 1)
+
+  // get specific meeting 
+  await atwin.getMeeting(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+
+  // check if meeting exist
+  atwin.isMeetingExist(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+
+  // check if meeting is active or on-going
+  atwin.isMeetingActive(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+
+  // updates the meeting title
+  atwin.updateMeetingTitle(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingTitle: 'New Meeting Title')
+
+  // updates the date when the meeting schedule to start
+  atwin.updateMeetingStart(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingStart: '2023-07-19T17:34')
+
+  // updates the meeting status
+  atwin.updateMeetingStatus(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingStatus: '0')
+  
+  // updates the meeting space ID 
+  atwin.updateMeetingSpace(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', spaceId: 2)
+
+</script>
+````
 **To Do:**
 * when adding an object it should specify the position, scale, rotate of the object
 for example:
@@ -1326,4 +1922,4 @@ for example:
   * we can do this by returning the media screen payload from addMediaScreen()
 
 * deleteMediaScreen() 
-* hideMediaScreen()
+* hideMediaScreen()