🌐 JS SDK v1.0.11: Buffer Overflow / MessageEvents Support

Release date: 18 July, 2023

What's New

βž• New functionality

MessageEvents Support in FilterNode

The FilterNode now supports MessageEvents. This means that the ready and dispose events can now be handled using event listeners instead of being passed as a callback (although the callback version is still supported).

Available events are: ready, dispose , buffer_overflow

Below is the sample of MessageEvents usage.

filterNode = await krispSDK.createNoiseFilter(audioContext);

filterNode.addEventListener('ready', (event) => {
	// Fired when filterNode is ready to proceed with audio data.
	filterNode.enable();
});

filterNode.addEventListener('dispose', (event) => {
	// Fired when filterNode was disposed
});

System Overload Handling

When the system experiences high load, the JS SDK may malfunction and result in choppy voice output. To address this issue, we recommend implementing the buffer_overflow scenario.

During initialization, set the bufferOverflowMS property to a value between 50-250 to determine the acceptable delay due to overload. The default and recommended value is 200ms, but you can adjust it according to your preference. The buffer_overflow event will be emitted each time the buffer difference between the previously emitted value reaches the configured value.

If the buffer keeps growing and no action is taken on the application layer, the JS SDK will drop the buffer after 500ms and emit the buffer_overflow event once again.

Below is a code sample that demonstrates how to configure and listen for the buffer_overflow event.

const krispSDK = new KrispSDK({
      params: {
				...
        bufferOverflowMS: 200
      }
});

const filterNode = await krispSDK.createNoiseFilter(audioContext);

filterNode.addEventListener('buffer_overflow', (event) => {
	// event.data.overflowCount - count of buffer overflow occurrences after filterNode is enabled.
  // event.data.bufferSizeMS - current buffer size in ms
  // event.data.isBufferDopped - indicates if buffer was dropped due to overflow. Max buffer size is 500ms; it will start dropping once it reaches 500ms.
});

Application Scenario

Below is the application scenario example that you can take to deal with overflow event.

let overflowTimer;

filterNode.addEventListener('buffer_overflow', (e) => {
			// cleaning previously set timer.
			clearTimeout(overflowTimer);

      const count = e.data.overflowCount;

			// disabling Noise cancellation each time buffer_overflow occured
      filterNode.disable();

			// 3 attempts to resume krisp with 2x growing wait time interval
			// Initial wait time 20 sec.
			// In case the system is under load buffer_overflow will trigger once again.
      if (count < 4) {
	      const waitTime = 10 * (2 ** count) * 1000;

        overflowTimer = setTimeout(() => {
          if (filterNode) filterNode.enable();
        }, waitTime);
      }
});