Merge branch 'web-api-reference' of https://github.com/100mslive/100m…

…s-docs into web-api-reference
100mslive · Jun 27, 2024 · 7e788b8 · 7e788b8
2 parents d7d59b4 + 0c7d581
commit 7e788b8
Show file tree

Hide file tree

Showing 663 changed files with 28,850 additions and 6,192 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -31,7 +31,7 @@ jobs:
 
           # Exit code for reviewdog when errors are found [true,false]
           # Default is `false`.
-          fail_on_error: true # optional, default is false
+          fail_on_error: false # optional, default is false
 
           # Report level for reviewdog [info,warning,error].
           # level: # optional, default is error

diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ export default redirect('/v3/100ms-v3/basics');
 
 This is needed because we need it to route somewhere if someone hits `/v3` this would redirect it to `/v3/100ms-v3/basics` i.e the MDX file `/v3/100ms-v3/basics.mdx`
 
-Then follow the Steps in 1. to add docs to it.
+Then follow the steps in 1 to add docs to it.
 
 ### 3. Aliasing Repeating Content
 

diff --git a/components/Tabs.tsx b/components/Tabs.tsx
@@ -3,7 +3,7 @@ import React, { PropsWithChildren, useCallback, useEffect, useState } from 'reac
 
 /**
  *
- * <Tabs items={['Node.js','Python']}>
+ * <Tabs items={['Node.js','Python']} isSelector={true}>
  *
  * <Tab id={1}>
  *  Code
@@ -13,15 +13,16 @@ import React, { PropsWithChildren, useCallback, useEffect, useState } from 'reac
 /**
  * Just because Compound Component React Pattern
  * Wasn't Working in MDX (children code not getting parsed)
- * So Took this Vanilla API approahc WORKS.
+ * So Took this Vanilla API approach WORKS.
  */
 
 interface TabsProps {
     items: string[];
     id: string;
+    isSelector?: boolean;
 }
 
-export const Tabs: React.FC<TabsProps> = ({ items, id }) => {
+export const Tabs: React.FC<TabsProps> = ({ items, id, isSelector = false }) => {
     const [tab, setTab] = useState(0);
     const [currentPlatform, setCurrentPlatform] = useState('');
 
@@ -60,7 +61,7 @@ export const Tabs: React.FC<TabsProps> = ({ items, id }) => {
     );
 
     // For setting value on future visits / reload
-    React.useEffect(() => {
+    useEffect(() => {
         const tabSelection = JSON.parse(localStorage.getItem('tabSelection') || '{}');
         const storedValue = items.indexOf(tabSelection[currentPlatform]);
         const idx = storedValue !== -1 ? storedValue : 0;
@@ -72,7 +73,13 @@ export const Tabs: React.FC<TabsProps> = ({ items, id }) => {
         <div
             style={{
                 borderBottom: '0.5px solid var(--docs_border_strong)',
-                marginTop: 'var(--docs_spacing_2)'
+                marginTop: 'var(--docs_spacing_2)',
+                width: 'max-content',
+                backgroundColor: isSelector ? 'var(--surface_default)' : 'transparent',
+                borderRadius: isSelector ? '12px' : '0',
+                padding: isSelector ? '8px' : '0',
+                display: 'flex',
+                gap: '1rem'
             }}>
             {items.map((el, i) => (
                 <button
@@ -82,12 +89,22 @@ export const Tabs: React.FC<TabsProps> = ({ items, id }) => {
                     }}
                     type="button"
                     style={{
+                        color: !isSelector
+                            ? 'var(--docs_text_primary)'
+                            : tab === i
+                            ? 'var(--docs_text_primary)'
+                            : 'var(--docs_text_secondary)',
+                        fontWeight: tab === i ? 'bold' : 'normal',
                         background: 'none',
                         outline: 'none',
                         cursor: 'pointer',
                         border: 'none',
-                        marginRight: '1rem',
-                        borderBottom: tab === i ? '2px solid var(--gray12)' : 'none'
+                        borderBottom:
+                            tab === i && !isSelector ? '2px solid var(--selector_blue)' : 'none',
+                        padding: isSelector ? '5px 12px' : '0',
+                        borderRadius: isSelector ? '4px' : '0',
+                        backgroundColor:
+                            tab === i && isSelector ? 'var(--selector_blue)' : 'transparent'
                     }}
                     key={el}
                     id={`${id}-button-${i}`}>

diff --git a/docs/android/v2/how-to-guides/captions/live-captions.mdx b/docs/android/v2/how-to-guides/captions/live-captions.mdx
@@ -18,3 +18,31 @@ To check if WebRTC (not hls) captions are enabled in a room. Look for any transc
 Implement `fun onTranscripts(transcripts: HmsTranscripts)` in the `HMSUpdateListener` callback.
 
 For an example implementation look at [`TranscriptionUseCase.kt`](https://github.com/100mslive/100ms-android/blob/ac66fa76503ec990322c293f8ce6a504c0c3c444/room-kit/src/main/java/live/hms/roomkit/ui/meeting/TranscriptionUseCase.kt#L44) in the 100ms-android [sample app](https://github.com/100mslive/100ms-android/blob/ac66fa76503ec990322c293f8ce6a504c0c3c444/room-kit/src/main/java/live/hms/roomkit/ui/meeting/TranscriptionUseCase.kt#L44) repository.
+
+## Toggling Live Transcripts
+To save on cost, live transcriptions can be disabled for everyone at runtime and toggled on again when required.
+
+```kotlin
+// Start Real Time Transcription
+hmsSDK.startRealTimeTranscription(
+
+    TranscriptionsMode.CAPTION,
+
+    object : HMSActionResultListener {
+        override fun onError(error: HMSException) {}
+        override fun onSuccess() {}
+})
+
+```
+
+```kotlin
+// Stop Real Time Transcription
+hmsSDK.stopRealTimeTranscription(
+
+    TranscriptionsMode.CAPTION,
+
+    object : HMSActionResultListener {
+        override fun onError(error: HMSException) {}
+        override fun onSuccess() {}
+})
+```
diff --git a/docs/android/v2/how-to-guides/extend-capabilities/plugins/bitmap-plugin.mdx b/docs/android/v2/how-to-guides/extend-capabilities/plugins/bitmap-plugin.mdx
@@ -0,0 +1,121 @@
+---
+title: Bitmap Plugin
+nav: 14.3
+---
+
+import AndroidSdkVersionShield from '@/common/android-sdk-version-shield.md';
+
+## Introduction
+
+
+The Bitmap Plugin facilitates the analysis or transformation of bitmap images. This doc provides an overview of using the Bitmap Plugin within the 100ms SDK.
+
+
+## Supported Versions/Resolutions
+
+-   Minimum 100ms SDK version it can work with is `2.9.58`
+-   Has poor fps on older android phones
+
+
+## Add dependency
+
+<AndroidSdkVersionShield />
+
+<Tabs id="sdk-imports" items={['Maven Central']} />
+
+<Tab id='sdk-imports-0'>
+
+```json{5-8}:build.gradle section=AddSDKDependencies sectionIndex=1
+dependencies {
+ // See the version in the badge above.
+
+ def hmsVersion = "x.x.x"
+ implementation "live.100ms:android-sdk:$hmsVersion"    // Essential
+}
+```
+
+</Tab>
+
+
+## How to enable Bitmap Plugin:
+
+### Instantiate 
+
+<Tabs id="instanstiate-VirtualBackgroundPlugin" items={['Kotlin']} />
+
+<Tab id='instanstiate-VirtualBackgroundPlugin-0'>
+
+<Note title="💡On instantiating Bitmap Plugin">
+Always call `addPlugin()` after `onJoin()` from `hmsSDK.join()` or `onPreview()` from `hmsSDK.preview()`
+</Note>
+
+```kotlin
+     val hmsSDK = HMSSDK
+        .Builder(application)
+        .build()
+
+      val bitmapListener = object : HMSBitmapUpdateListener {
+             override fun onFrame(bitmap: Bitmap): Bitmap {
+                //analyze or process bitmap here 
+                return bitmap
+             }
+
+         }
+
+
+    val bitmapPlugin by lazy { HMSBitmapPlugin(hmsSDK, bitmapListener) }
+
+     //call this after onJoin() or after onPreview()
+     fun addBitmapPlugin() {
+
+        if (hmsSDK.getLocalPeer()?.videoTrack != null) {
+
+            hmsSDK.addPlugin(bitmapPlugin, object : HMSActionResultListener {
+                override fun onError(error: HMSException) {}
+
+                override fun onSuccess() { }
+            })
+        }
+    }
+```
+<Note title="💡Bitmap Plugin">
+The longer the processing of bitmap takes, the lower would be FPS. Ideally try to process the bitmap under 33 ms to achieve 30 FPS
+</Note>
+
+```kotlin
+   val bitmapListener = object : HMSBitmapUpdateListener {
+             override fun onFrame(bitmap: Bitmap): Bitmap {
+                //analyze or process bitmap here 
+                val processedBitmap = // Send bitmap for processing here and return the processed bitmap
+                return processedBitmap
+             }
+
+         }
+
+```
+
+</Tab>
+
+## Remove/Detach/Disable Bitmap Plugin
+
+To remove/detach bitmap plugin at runtime:
+
+<Tabs id="remove-plugin" items={['Kotlin']} />
+
+<Tab id='remove-plugin-0'>
+
+```kotlin
+
+            hmsSDK.removePlugin(bitmapPlugin, object : HMSActionResultListener {
+                override fun onError(error: HMSException) {}
+
+                override fun onSuccess() {}
+
+            })
+
+
+```
+
+</Tab>
+
+
diff --git a/docs/android/v2/how-to-guides/extend-capabilities/plugins/blur-filter.mdx b/docs/android/v2/how-to-guides/extend-capabilities/plugins/blur-filter.mdx