Develop

README.md

@@ -119,27 +119,33 @@ If you prefer using ES modules in the browser and your environment supports them
     import OpensipsJS from 'https://cdn.opensipsjs.org/opensipsjs/v0.1.1/opensips-js.es.js';\
 
     const opensipsJS = new OpensipsJS({
-      configuration: {
-        session_timers: false,
-        uri: 'sip:extension_user@domain',
-        // --- Use password or authorization_jwt to authorize
-        password: 'password',
-        // or
-        authorization_jwt: 'token',
-      },
-      socketInterfaces: ['wss://domain'],
-      pnExtraHeaders: {
-        'pn-provider': 'acme',
-        'pn-param': 'acme-param',
-        'pn-prid': 'ZH11Y4ZDJlMNzODE1NgKi0K>',
-      },
-      sipDomain: 'domain',
-      sipOptions: {
-        session_timers: false,
-        extraHeaders: ['X-Bar: bar'],
-        pcConfig: {},
-      },
-      modules: ['audio', 'video', 'msrp'],
+        configuration: {
+            session_timers: false,
+            noiseReductionOptions: {
+                mode: 'dynamic',
+                noiseThreshold: 0.004
+                checkEveryMs: 500
+                noiseCheckInterval: 2000
+            },
+            uri: 'sip:extension_user@domain',
+            // --- Use password or authorization_jwt to authorize
+            password: 'password',
+            // or
+            authorization_jwt: 'token',
+        },
+        socketInterfaces: ['wss://domain'],
+        pnExtraHeaders: {
+            'pn-provider': 'acme',
+            'pn-param': 'acme-param',
+            'pn-prid': 'ZH11Y4ZDJlMNzODE1NgKi0K>',
+        },
+        sipDomain: 'domain',
+        sipOptions: {
+            session_timers: false,
+            extraHeaders: ['X-Bar: bar'],
+            pcConfig: {},
+        },
+        modules: ['audio', 'video', 'msrp'],
     });
 
     // Use the modules as before
@@ -223,6 +229,7 @@ Also, there are next public fields on OpensipsJS instance:
 - `setSpeakerVolume(value: Number): void` - set volume of callers. Value should be in range from 0 to 1
 - `setDND(value: Boolean): void` - set the agent "Do not disturb" status
 - `setMetricsConfig(config: WebrtcMetricsConfigType): void` - set the metric config (used for audio quality indicator)
+- `setVADConfiguration(options: Partial<Omit<NoiseReductionOptions, 'vadModule'>>): void` - update noise reduction configuration at runtime. **Requires `vadModule` to be passed in the constructor, otherwise throws an error**
 
 ### Audio instance fields
 - `sipOptions: Object` - returns sip options
@@ -237,6 +244,83 @@ Also, there are next public fields on OpensipsJS instance:
 - `isDND: Boolean` - returns if the agent is in "Do not disturb" status
 - `isMuted: Boolean` - returns if the agent is muted
 
+### Noise Reduction Options (VAD)
+
+**Important**: Voice Activity Detection (VAD) is an **optional feature** that requires installing an additional peer dependency. It is **NOT compatible with React Native**.
+
+#### Critical: VAD Module Must Be Passed to Constructor
+
+**If you plan to use noise reduction features (including `setVADConfiguration` in runtime), you MUST pass `vadModule` to the OpenSIPSJS constructor during initialization.**
+
+- ✅ **Required**: Pass `vadModule` in the constructor if you want to use noise reduction
+- ❌ **Will throw error**: Calling `setVADConfiguration()` without `vadModule` in the constructor will throw an error
+- ⚠️ **Cannot be changed later**: The `vadModule` cannot be set after initialization - it must be provided in the constructor
+
+#### For Web Applications (with VAD support)
+
+Install the VAD library:
+```bash
+npm install @ricky0123/vad-web
+# or
+yarn add @ricky0123/vad-web
+```
+
+Then import and inject it in your configuration **during initialization**:
+```javascript
+import OpenSIPSJS from 'opensips-js'
+import * as VAD from '@ricky0123/vad-web'
+
+const opensipsJS = new OpenSIPSJS({
+  configuration: {
+    // ... other configuration
+    noiseReductionOptions: {
+      mode: 'dynamic', // or 'enabled'
+      vadModule: VAD,  // ⚠️ REQUIRED: Must be passed here if you plan to use noise reduction
+      noiseThreshold: 0.004,
+      checkEveryMs: 500,
+      noiseCheckInterval: 2000
+    }
+  },
+  // ... rest of configuration
+})
+
+// ✅ Now you can use setVADConfiguration
+opensipsJS.audio.setVADConfiguration({
+  mode: 'enabled',
+  noiseThreshold: 0.005
+})
+```
+
+#### For React Native Applications (VAD not supported)
+
+Simply omit the VAD module and disable noise reduction:
+```javascript
+import OpenSIPSJS from 'opensips-js'
+
+const opensipsJS = new OpenSIPSJS({
+  configuration: {
+    // ... other configuration
+    noiseReductionOptions: {
+      mode: 'disabled'  // or omit noiseReductionOptions entirely
+    }
+    // NO vadModule needed
+  },
+  // ... rest of configuration
+})
+```
+
+**See [VAD_USAGE.md](VAD_USAGE.md) and [EXAMPLES.md](EXAMPLES.md) for detailed usage examples.**
+
+#### Configuration Parameters
+
+| Parameter            | Type                             | Default    | Description                                                                                                                                                                                                                                                                                      |
+|----------------------|----------------------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `mode`               | `disabled \| enabled \| dynamic` | `disabled` | Noise reduction mode. **Note**: `enabled` and `dynamic` modes require `vadModule` to be provided                                                                                                                                                                                                 |
+| `vadConfig`          | `Partial<RealTimeVADOptions>`    | `{}`       | VAD configuration                                                                                                                                                                                                                                                                                |
+| `noiseThreshold`     | `number`                         | `0.004`    | Noise threshold                                                                                                                                                                                                                                                                                  |
+| `noiseCheckInterval` | `number`                         | `2000`     | The interval, used to check if we need to disable/enable outgoing audio every N-milliseconds                                                                                                                                                                                                     |
+| `checkEveryMs`       | `number`                         | `500`      | The interval, used inside noiseCheckInterval loop, checks current noise state every N-milliseconds, to define the average noise level. Then on every noiseCheckInterval iteration, the values getting on checkEveryMs will be summed, then divided by it's number and compared to noiseThreshold |
+
 ## MSRP
 
 ### MSRP methods

src/helpers/volume.helper.ts → demo/helpers/volume.helper.ts

@@ -1,14 +1,11 @@
-import { IntervalType } from '@/types/rtc'
-import audioContext from '@/helpers/audioContext'
-
 const height = 20
 const lineWidth = 4
 
-let intervals: { [key: string]: IntervalType | undefined } = {}
+let intervals: { [key: string]: ReturnType<typeof setInterval> | undefined } = {}
 
-export const runIndicator = (stream: MediaStream, deviceId: string) => {
+export const runIndicator = (audioContext: AudioContext, stream: MediaStream, deviceId: string) => {
     if (stream && stream.getTracks().length) {
-        requestAnimationFrame(() => getVolumeLevelBar(stream, deviceId))
+        requestAnimationFrame(() => getVolumeLevelBar(audioContext, stream, deviceId))
     } else {
         clearVolumeInterval(deviceId)
     }
@@ -32,7 +29,7 @@ const getMaxSmallIndicatorHeight = (value: number) => {
     return value < halfLineHeight ? value : halfLineHeight
 }
 
-const getVolumeLevelBar = (stream: MediaStream, deviceId: string) => {
+const getVolumeLevelBar = (audioContext: AudioContext, stream: MediaStream, deviceId: string) => {
     clearVolumeInterval(deviceId)
 
     const analyser = audioContext.createAnalyser()

demo/index.html

@@ -84,6 +84,14 @@ <h3>Audio Calls</h3>
 
             <br>
 
+            <select id="vadModeSelect">
+                <option value="disabled" class="">Disabled</option>
+                <option value="enabled" class="">Enabled</option>
+                <option value="dynamic" class="">Dynamic</option>
+            </select>
+
+            <br>
+
             <form id="makeCallForm">
                 <label>
                     Your target:

demo/index.ts

@@ -1,7 +1,7 @@
 import OpenSIPSJS from '../src/index'
 //import OpenSIPSJS from '../dist/opensips-js.es'
 import { ICall, IOpenSIPSConfiguration, IRoom, RoomChangeEmitType, UAConfiguration } from '../src/types/rtc'
-import { runIndicator } from '../src/helpers/volume.helper'
+import { runIndicator } from './helpers/volume.helper'
 import { SendMessageOptions } from 'jssip/lib/Message'
 import { IMessage, MSRPSessionExtended } from '../src/types/msrp'
 import MSRPMessage from '../src/lib/msrp/message'
@@ -14,6 +14,8 @@ import { ScreenSharePlugin } from '../src/lib/janus/ScreenSharePlugin'
 import { ScreenShareWhiteBoardPlugin } from '../src/lib/janus/ScreenShareWhiteBoardPlugin'
 //import { StreamMaskPlugin } from '../src/lib/janus/StreamMaskPlugin'
 import { WhiteBoardPlugin } from '../src/lib/janus/WhiteBoardPlugin'
+import * as VAD from '@ricky0123/vad-web'
+
 //import UA from 'jssip/lib/UA'
 //import JsSIP from 'jssip/lib/JsSIP'
 
@@ -36,6 +38,7 @@ const webRTCPageEl = document.getElementById('webRTCPage')
 const logoutButtonEl = document.getElementById('logoutButton')
 
 const makeCallFormEl = document.getElementById('makeCallForm')
+const vadModeSelectEl = document.getElementById('vadModeSelect') as HTMLSelectElement
 const videoCallFormEl = document.getElementById('videoCallForm')
 const sendMessageFormEl = document.getElementById('sendMessageForm')
 const callAddingIndicatorEl = document.getElementById('callAddingIndicator')
@@ -237,7 +240,7 @@ const upsertRoomData = (room: IRoom, sessions: {[p: string]: ICall}) => {
     ulListEl.querySelectorAll('li').forEach(el => el.remove())
 
     const activeCallsInRoom = Object.values(sessions).filter((call) => call.roomId === room.roomId)
-    activeCallsInRoom.forEach((call, index) => {
+    activeCallsInRoom.forEach(async (call, index) => {
         const listItemEl = document.createElement('li')
         listItemEl.setAttribute('key', `${index}`)
         listItemEl.setAttribute('id', buildCallElementID(call.id))
@@ -367,7 +370,7 @@ const upsertRoomData = (room: IRoom, sessions: {[p: string]: ICall}) => {
         listItemEl.appendChild(indicatorSpanEl)
 
         if (call.audioTag?.srcObject) {
-            runIndicator(call.audioTag.srcObject, call._id)
+            // runIndicator(await openSIPSJS.audio.managedAudioContext.getContext(), call.audioTag.srcObject, call._id)
         }
 
         ulListEl.appendChild(listItemEl)
@@ -557,8 +560,13 @@ loginToAppFormEl?.addEventListener('submit', (event) => {
     try {
         const configuration: IOpenSIPSConfiguration = {
             session_timers: false,
+            register_expires: 60,
+            noiseReductionOptions: {
+                mode: 'dynamic',
+                vadModule: VAD
+            },
             uri: `sip:${username}@${domain}`,
-            overrideUserAgent: (userAgent) => userAgent + ' Vue 3.0'
+            overrideUserAgent: (userAgent) => userAgent + ' Vue 3.0',
         }
 
         if (password) {
@@ -612,10 +620,14 @@ loginToAppFormEl?.addEventListener('submit', (event) => {
             imageSrc: base64Image
         })
 
-        openSIPSJS.use(screenSharePlugin)
+        /*openSIPSJS.use(screenSharePlugin)
         //openSIPSJS.use(streamMaskPlugin)
         openSIPSJS.use(whiteBoardPlugin)
-        openSIPSJS.use(screenShareWhiteBoardPlugin)
+        openSIPSJS.use(screenShareWhiteBoardPlugin)*/
+
+        if (vadModeSelectEl) {
+            vadModeSelectEl.value = configuration.noiseReductionOptions?.mode || 'disabled'
+        }
 
         /* openSIPSJS Listeners */
         openSIPSJS
@@ -724,7 +736,7 @@ loginToAppFormEl?.addEventListener('submit', (event) => {
                 muteContainerEl.appendChild(buttonEl)
             })
             .on('changeActiveStream', (value: MediaStream) => {
-                runIndicator(value, 'agent-voice-level')
+                // runIndicator(value, 'agent-voice-level')
             })
             .on('changeCallVolume', (data: ChangeVolumeEventType) => {
                 //console.log('DEMO', data.callId, data.volume)
@@ -1211,6 +1223,18 @@ makeCallFormEl?.addEventListener(
     }
 )
 
+vadModeSelectEl?.addEventListener(
+    'change',
+    async (event) => {
+        event.preventDefault()
+
+        const target = event.target as HTMLSelectElement
+        console.log('mode', target.value)
+        await openSIPSJS.audio.setVADConfiguration({
+            mode: target.value
+        })
+    })
+
 videoCallFormEl?.addEventListener(
     'submit',
     (event) => {