@stream-io/video-filters-web 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.1.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.1.2...@stream-io/video-filters-web-0.1.3) (2024-07-02)
+
+
+### Bug Fixes
+
+* refactor background filters ([#1415](https://github.com/GetStream/stream-video-js/issues/1415)) ([deb6da2](https://github.com/GetStream/stream-video-js/commit/deb6da238f541c733451e84b198434671da8dceb))
+
+### [0.1.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.1.1...@stream-io/video-filters-web-0.1.2) (2024-06-12)
+
+
+### Bug Fixes
+
+* infinitely adjustable blur filter ([#1399](https://github.com/GetStream/stream-video-js/issues/1399)) ([447e73f](https://github.com/GetStream/stream-video-js/commit/447e73f2363142a0c1b43d05f848400950ecf697))
+
 ### [0.1.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.1.0...@stream-io/video-filters-web-0.1.1) (2024-06-03)
 
 

package/dist/index.cjs.js

@@ -133,11 +133,21 @@ function buildBackgroundBlurStage(gl, vertexShader, positionBuffer, texCoordBuff
     };
 }
 function buildBlurPass(gl, vertexShader, positionBuffer, texCoordBuffer, personMaskTexture, canvas, blurLevel) {
-    const weights = blurLevel === 'low'
-        ? [0.227027027, 0.1545945946, 0.1016216216, 0.0340540541, 0.0142162162]
-        : blurLevel === 'medium'
-            ? [0.327027027, 0.1945945946, 0.1216216216, 0.0540540541, 0.0162162162]
-            : [0.627027027, 0.3445945946, 0.2216216216, 0.0540540541, 0.0162162162];
+    const sigma = typeof blurLevel === 'number'
+        ? blurLevel
+        : blurLevel === 'low'
+            ? 2
+            : blurLevel === 'medium'
+                ? 4
+                : 6;
+    const windowSize = Math.max(1, Math.floor(sigma * 3));
+    const offset = new Array(windowSize).fill(0).map((v, index) => index);
+    const variance = sigma ** 2;
+    const weights = offset.map((x) => {
+        var m = sigma * Math.sqrt(2 * Math.PI);
+        var e = Math.exp(-(x ** 2) / (2 * variance));
+        return e / m;
+    });
     const fragmentShaderSource = glsl `#version 300 es
 
     precision highp float;
@@ -149,10 +159,8 @@ function buildBlurPass(gl, vertexShader, positionBuffer, texCoordBuffer, personM
     in vec2 v_texCoord;
     out vec4 outColor;
 
-    const float offset[5] = float[](0.0, 1.0, 2.0, 3.0, 4.0);
-    const float weight[5] = float[](
-      ${weights.join(',')}
-    );
+    const float offset[${windowSize}] = float[](${offset.map((i) => i.toFixed(10)).join(', ')});
+    const float weight[${windowSize}] = float[](${weights.map((i) => i.toFixed(10)).join(', ')});
 
     void main() {
       vec4 centerColor = texture(u_inputFrame, v_texCoord);
@@ -160,7 +168,7 @@ function buildBlurPass(gl, vertexShader, positionBuffer, texCoordBuffer, personM
 
       vec4 frameColor = centerColor * weight[0] * (1.0 - personMask);
 
-      for (int i = 1; i < 5; i++) {
+      for (int i = 1; i < ${windowSize}; i++) {
         vec2 offset = vec2(offset[i]) * u_texelSize;
 
         vec2 texCoord = v_texCoord + offset;
@@ -667,6 +675,8 @@ function buildWebGL2Pipeline(videoSource, backgroundImage, blurLevel, background
     const gl = canvas.getContext('webgl2');
     if (!gl)
         throw new Error('WebGL2 is not supported');
+    if (gl.isContextLost())
+        throw new Error('WebGL2 context was lost');
     const { width: frameWidth, height: frameHeight } = videoSource;
     const { width: segmentationWidth, height: segmentationHeight } = segmentationConfig;
     const vertexShaderSource = glsl `#version 300 es
@@ -769,16 +779,21 @@ const getSegmentationParams = (level) => {
     return { width: 160, height: 96 };
 };
 
-function createRenderer(tflite, videoSource, targetCanvas, options) {
+function createRenderer(tflite, videoSource, targetCanvas, options, onError) {
     const { backgroundFilter, backgroundImage, backgroundBlurLevel, segmentationLevel = exports.SegmentationLevel.HIGH, fps = 30, } = options;
     if (backgroundFilter === 'image' && !backgroundImage) {
         throw new Error(`backgroundImage element is required when backgroundFilter is image`);
     }
     const pipeline = buildWebGL2Pipeline(videoSource, backgroundImage, backgroundBlurLevel, backgroundFilter, targetCanvas, tflite, getSegmentationParams(segmentationLevel));
     const id = setInterval(() => {
-        pipeline.render();
-        if (backgroundFilter === 'image') {
-            pipeline.updatePostProcessingConfig();
+        try {
+            pipeline.render();
+            if (backgroundFilter === 'image') {
+                pipeline.updatePostProcessingConfig();
+            }
+        }
+        catch (error) {
+            onError?.(error);
         }
     }, 1000 / (fps <= 0 ? 30 : fps));
     return {
@@ -1523,7 +1538,7 @@ const createTFLiteSIMDModule = (__Module) => {
   return __Module.ready;
 };
 
-const version = "0.1.1" ;
+const version = "0.1.3" ;
 const packageName = "@stream-io/video-filters-web" ;
 
 // @ts-expect-error - module is not declared