@videosdk.live/react-sdk 0.6.6 → 0.6.8

package/README.md

@@ -1,92 +1,104 @@
 <h1 align="center">
-  <img src="https://static.videosdk.live/videosdk_logo_website_black.png"/><br/>
-<p align="center">
-  Video SDK React App<br/>
-  <a href="https://videosdk.live/">videosdk.live</a>
-</p>
+  <img src="https://cdn.videosdk.live/docs/images/react/banner.png" /><br/>
 </h1>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk"><img src="https://img.shields.io/npm/dw/@videosdk.live/react-sdk.svg?style=for-the-badge" alt="NPM downloads"></a>
-  <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk"><img src="https://img.shields.io/npm/v/@videosdk.live/react-sdk/latest.svg?style=for-the-badge" alt="NPM latest version"></a>
-   <a href="https://discord.gg/kgAvyxtTxv">
-<img src="https://img.shields.io/discord/734858252939952248?logo=discord&style=for-the-badge" />
-</a>
-<a href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fpublish.twitter.com%2F&ref_src=twsrc%5Etfw%7Ctwcamp%5Ebuttonembed%7Ctwterm%5Efollow%7Ctwgr%5Evideo_sdk&screen_name=video_sdk">
-<img src="https://img.shields.io/twitter/follow/video_sdk?label=Twitter&logo=twitter&style=for-the-badge" />
-</a>
-<a href="http://youtube.com/videosdk?sub_confirmation=1">
-<img src="https://img.shields.io/youtube/channel/subscribers/UCuY7JzXnpp874oa7uQbUwsA?logo=Youtube&style=for-the-badge" />
-</a>
+  <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk">
+    <img src="https://img.shields.io/npm/dw/@videosdk.live/react-sdk.svg?style=for-the-badge" alt="NPM downloads" />
+  </a>
+  <a href="https://www.npmjs.com/package/@videosdk.live/react-sdk">
+    <img src="https://img.shields.io/npm/v/@videosdk.live/react-sdk/latest.svg?style=for-the-badge" alt="NPM latest version" />
+  </a>
+  <a href="https://discord.gg/kgAvyxtTxv">
+    <img src="https://img.shields.io/discord/734858252939952248?logo=discord&style=for-the-badge" />
+  </a>
+  <a href="http://youtube.com/videosdk?sub_confirmation=1">
+    <img src="https://img.shields.io/youtube/channel/subscribers/UCuY7JzXnpp874oa7uQbUwsA?logo=Youtube&style=for-the-badge"/>
+  </a>
 </p>
 
-## Features
+# VideoSDK React SDK 🚀
 
-- Video API with real-time audio, video and data streams
-- 5,000+ participants support
-- Chat support with rich media.
-- Screen sharing with HD and Full HD.
-- Play realtime video in meeting
-- Connect it with social media such as Facebook, Youtube etc (RTMP out support).
-- Intelligent speaker switch
-- Record your meetings on cloud
-- Customise UI and built other rich features with our new data streams such as whiteboard, poll, Q & A etc.
+Build fast, scalable, and customizable real-time video applications for the web using **VideoSDK**.  
+Whether you’re creating a video conferencing app, virtual classroom, or live streaming platform, VideoSDK provides a robust foundation with minimal setup.
 
-## Browser Support
+---
 
-Visit our official guide for [Browser Support](https://docs.videosdk.live/docs/realtime-communication/see-also/device-browser-support)
+## Why VideoSDK?
 
-## Demo App
-Check out demo [here](https://demo.videosdk.live/conference-meeting/)
+VideoSDK enables developers to ship production-grade real-time communication features quickly.
 
-## Prerequisites
+- Supports **5,000+ participants**
+- Low-latency audio, video, and data streams
+- Fully customizable UI and workflows
+- Works across modern browsers
+- Designed for scale and reliability
 
-You must have the following installed:
+---
 
-- Node.js v12+
-- NPM v6+ (comes installed with newer Node versions)
+## 🌍 Browser Support
 
-# Setup
+VideoSDK supports all major modern browsers.
 
-`@videosdk.live/react-sdk` wraps up our [`@videosdk.live/js-sdk`](https://www.npmjs.com/package/@videosdk.live/js-sdk)
-into usable hooks APIs. It simplifies code and concept for react-js
+📖 Full compatibility guide:  
+https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/supported-browser
 
-### Install the library in React
+---
 
-The easiest way to get started is by installing `@videosdk.live/react-sdk` in your app.
+## 🎯 Live Demo
 
-**From npm package**:
-```js
-npm install @videosdk.live/react-sdk
-```
+Try the live demo to see VideoSDK in action: 
+https://demo.videosdk.live/conference-meeting/
 
-**From yarn package**:
-```js
-yarn add @videosdk.live/react-sdk
-```
+---
 
-### Import the library in your app
+## ⚙️ Installation
 
-`react-sdk` provides two most important hook `useMeeting` and `useParticipant`. it also provides `MeetingProvider` and `MeetingConsumer` to listen changes in meeting state and events.
+Get started by installing `@videosdk.live/react-sdk` in your React application.
 
-```javascript title="Import the library"
-import {
-  MeetingProvider,
-  useMeeting,
-  useParticipant,
-  MeetingConsumer,
-} from "@videosdk.live/react-sdk";
+**Using npm**
+```bash
+npm install @videosdk.live/react-sdk
 ```
 
-## Documentation
-
-Check the components and their usage in our [documentation](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/concept-and-architecture).
-
-## Quick Start
-
-Check the Quick Start guide to our [documentation](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/quick-start).
-
-
-## Try it out
+**Using yarn**
+```bash
+yarn add @videosdk.live/react-sdk
+```
 
-Run the [Code sample](https://github.com/videosdk-live/videosdk-rtc-react-sdk-example) to see it in action.
+---
+
+## 🔥 Meeting Features
+
+Unlock a suite of powerful features to enhance your meetings:
+
+| Feature | Documentation | Description |
+|--------|---------------|-------------|
+| 📋 **Pre-call Setup** | [Setup Precall](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/setup-call/precall) | Configure audio, video, and device preferences before joining a meeting. |
+| ⏳ **Waiting Lobby** | [Waiting Lobby](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/setup-call/waiting-lobby) | Hold participants in a virtual lobby until they’re allowed to join. |
+| 🤝 **Join Meeting** | [Join Meeting](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/setup-call/join-meeting) | Join a meeting with a single action. |
+| 🚪 **Leave Meeting** | [Leave Meeting](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/setup-call/leave-end-meeting) | Exit the meeting safely without disrupting others. |
+| 🎤 **Microphone Control** | [Mute / Unmute Mic](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/handling-media/mute-unmute-mic) | Toggle your microphone during the meeting. |
+| 📷 **Camera Control** | [Camera On / Off](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/handling-media/on-off-camera) | Enable or disable your camera stream. |
+| 🖥️ **Screen Sharing** | [Screen Share](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/handling-media/screen-share) | Share your entire screen or a specific window. |
+| 📸 **Image Capture** | [Image Capture](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/handling-media/image-capturer) | Capture images from participant video streams, ideal for Video KYC use cases. |
+| 🔌 **Change Input Devices** | [Switch Input Devices](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/handling-media/change-input-device) | Switch between available audio and video input devices. |
+| 🔊 **Audio Output Selection** | [Switch Audio Output](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/handling-media/change-audio-ouptut-device) | Select a preferred speaker or output device. |
+| ⚙️ **Track Optimization** | [Custom Tracks](https://docs.videosdk.live/react/api/sdk-reference/custom-tracks) | Optimize media tracks for better quality and performance. |
+| 💬 **In-meeting Chat** | [PubSub Chat](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/collaboration-in-meeting/pubsub) | Exchange real-time messages using a publish–subscribe model. |
+| 📝 **Whiteboard** | [Whiteboard](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/collaboration-in-meeting/whiteboard) | Collaborate visually using a shared whiteboard. |
+| 📁 **File Sharing** | [File Sharing](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/collaboration-in-meeting/upload-fetch-temporary-file) | Share files securely during the meeting. |
+| 📼 **Recording** | [Recording](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/recording/Overview) | Record meetings for later playback and auditing. |
+| 📡 **RTMP Livestreaming** | [RTMP Livestream](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/live-streaming/rtmp-livestream) | Broadcast meetings live to platforms like YouTube or Facebook. |
+| 📝 **Real-time Transcription** | [Live Transcription](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/transcription-and-summary/realtime-transcribe-meeting) | Generate real-time transcripts during meetings. |
+| 🔇 **Remote Media Control** | [Remote Media Control](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/control-remote-participant/remote-participant-media) | Control the microphone and camera of remote participants. |
+| 🚫 **Mute All Participants** | [Mute All](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/control-remote-participant/mute-all-participants) | Instantly mute all participants in the meeting. |
+| 🗑️ **Remove Participant** | [Remove Participant](https://docs.videosdk.live/react/guide/video-and-audio-calling-api-sdk/control-remote-participant/remove-participant) | Remove a participant from the meeting. |
+
+---
+
+## 🧪 Sample Application
+
+Explore a fully functional React example that demonstrates real-world implementation of the VideoSDK:
+
+👉 https://github.com/videosdk-live/videosdk-rtc-react-sdk-example

package/dist/index.js

@@ -458,7 +458,7 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MeetingProviderContex.Consumer, null, children));
 };
 
-var version = "0.6.6";
+var version = "0.6.8";
 
 var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,

package/dist/index.modern.js

@@ -456,7 +456,7 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MeetingProviderContex.Consumer, null, children));
 };
 
-var version = "0.6.6";
+var version = "0.6.8";
 
 var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@videosdk.live/react-sdk",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "license": "ISC",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -10,7 +10,8 @@
     "build": "microbundle-crl --no-compress --format modern,cjs && yarn copyTypesFolder",
     "copyTypesFolder": "cp -a ./src/types/ ./dist/types",
     "prettier": "prettier --write 'src/**/*.js'",
-    "lint": "eslint 'src/**/*.js'"
+    "lint": "eslint 'src/**/*.js'",
+    "typedoc": "typedoc"
   },
   "peerDependencies": {
     "react": "^16.13.1 || ^17 || ^18 || ^19"
@@ -39,6 +40,7 @@
     "prettier": "^1.17.1",
     "react": "^16.13.1",
     "test-listen": "^1.1.0",
+    "typedoc": "^0.28.15",
     "typescript": "^4.7.4"
   },
   "eslintConfig": {
@@ -74,7 +76,7 @@
     }
   },
   "dependencies": {
-    "@videosdk.live/js-sdk": "0.5.5",
+    "@videosdk.live/js-sdk": "0.5.7",
     "events": "^3.3.0"
   }
 }