VB e2e test

openvidu-browser/src/OpenVidu/Filter.ts

@@ -91,8 +91,22 @@ export class Filter {
      */
     execMethod(method: string, params: Object): Promise<void> {
         return new Promise((resolve, reject) => {
+
             logger.info('Executing filter method to stream ' + this.stream.streamId);
 
+            let finalParams;
+
+            const successExecMethod = triggerEvent => {
+                logger.info('Filter method successfully executed on Stream ' + this.stream.streamId);
+                const oldValue = (<any>Object).assign({}, this.stream.filter);
+                this.stream.filter!.lastExecMethod = { method, params: finalParams };
+                if (triggerEvent) {
+                    this.stream.session.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.stream.session, this.stream, 'filter', this.stream.filter!, oldValue, 'execFilterMethod')]);
+                    this.stream.streamManager.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.stream.streamManager, this.stream, 'filter', this.stream.filter!, oldValue, 'execFilterMethod')]);
+                }
+                return resolve();
+            }
+
             if (this.type.startsWith('VB:')) {
 
                 if (typeof params === 'string') {
@@ -103,15 +117,21 @@ export class Filter {
                     }
                 }
 
+                finalParams = params;
+
                 if (method === 'update') {
                     if (!this.stream.virtualBackgroundSinkElements?.VB) {
                         return reject(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, 'There is no Virtual Background filter applied'));
                     } else {
-                        try {
+                        this.stream.virtualBackgroundSinkElements.VB.updateValues(params)
-                            this.stream.virtualBackgroundSinkElements.VB.updateValues(params);
+                            .then(() => successExecMethod(false))
-                        } catch (error) {
+                            .catch(error => {
-                            reject(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, 'Error updating values on Virtual Background filter: ' + error));
+                                if (error.name === OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR) {
-                        }
+                                    return reject(new OpenViduError(error.name, error.message));
+                                } else {
+                                    return reject(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, 'Error updating values on Virtual Background filter: ' + error));
+                                }
+                            });
                     }
                 } else {
                     return reject(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, `Unknown Virtual Background method "${method}"`));
@@ -131,6 +151,8 @@ export class Filter {
                     stringParams = <string>params;
                 }
 
+                finalParams = stringParams;
+
                 this.stream.session.openvidu.sendRequest(
                     'execFilterMethod',
                     { streamId: this.stream.streamId, method, params: stringParams },
@@ -143,12 +165,7 @@ export class Filter {
                                 return reject(error);
                             }
                         } else {
-                            logger.info('Filter method successfully executed on Stream ' + this.stream.streamId);
+                            return successExecMethod(true);
-                            const oldValue = (<any>Object).assign({}, this.stream.filter);
-                            this.stream.filter!.lastExecMethod = { method, params: JSON.parse(stringParams) };
-                            this.stream.session.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.stream.session, this.stream, 'filter', this.stream.filter!, oldValue, 'execFilterMethod')]);
-                            this.stream.streamManager.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.stream.streamManager, this.stream, 'filter', this.stream.filter!, oldValue, 'execFilterMethod')]);
-                            return resolve();
                         }
                     }
                 );

openvidu-browser/src/OpenVidu/Stream.ts

@@ -323,7 +323,7 @@ export class Stream {
                 return reject(new OpenViduError(OpenViduErrorName.GENERIC_ERROR, 'There is already a filter applied to Stream ' + this.streamId));
             }
 
-            const resolveApplyFilter = (error) => {
+            const resolveApplyFilter = (error, triggerEvent) => {
                 if (error) {
                     logger.error('Error applying filter for Stream ' + this.streamId, error);
                     if (error.code === 401) {
@@ -336,8 +336,10 @@ export class Stream {
                     const oldValue: Filter = this.filter!;
                     this.filter = new Filter(type, options);
                     this.filter.stream = this;
-                    this.session.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.session, this, 'filter', this.filter, oldValue, 'applyFilter')]);
+                    if (triggerEvent) {
-                    this.streamManager.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.streamManager, this, 'filter', this.filter, oldValue, 'applyFilter')]);
+                        this.session.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.session, this, 'filter', this.filter, oldValue, 'applyFilter')]);
+                        this.streamManager.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.streamManager, this, 'filter', this.filter, oldValue, 'applyFilter')]);
+                    }
                     return resolve(this.filter);
                 }
             }
@@ -358,9 +360,6 @@ export class Stream {
                 if (!this.mediaStream || this.streamManager.videos.length === 0) {
                     return reject(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, 'The StreamManager requires some video element to be attached to it in order to apply a Virtual Background filter'));
                 }
-                if (!!this.virtualBackgroundSinkElements && !!this.virtualBackgroundSourceElements) {
-                    return reject(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, 'There is already a Virtual Background filter applied to Stream ' + this.streamId));
-                }
 
                 logger.info('Applying Virtual Background to stream ' + this.streamId);
 
@@ -426,13 +425,13 @@ export class Stream {
                             (this.streamManager as Publisher).replaceTrack((this.virtualBackgroundSinkElements.video.srcObject as MediaStream).getVideoTracks()[0]);
                         }
 
-                        resolveApplyFilter(undefined);
+                        resolveApplyFilter(undefined, false);
 
                     } catch (error) {
                         if (error.name === OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR) {
-                            resolveApplyFilter(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, error.message));
+                            resolveApplyFilter(new OpenViduError(OpenViduErrorName.VIRTUAL_BACKGROUND_ERROR, error.message), false);
                         } else {
-                            resolveApplyFilter(error);
+                            resolveApplyFilter(error, false);
                         }
                     }
                 }
@@ -475,7 +474,7 @@ export class Stream {
                     'applyFilter',
                     { streamId: this.streamId, type, options: optionsString },
                     (error, response) => {
-                        resolveApplyFilter(error);
+                        resolveApplyFilter(error, true);
                     }
                 );
 
@@ -519,7 +518,7 @@ export class Stream {
     removeFilterAux(isDisposing: boolean): Promise<void> {
         return new Promise(async (resolve, reject) => {
 
-            const resolveRemoveFilter = (error) => {
+            const resolveRemoveFilter = (error, triggerEvent) => {
                 if (error) {
                     delete this.filter;
                     logger.error('Error removing filter for Stream ' + this.streamId, error);
@@ -532,8 +531,10 @@ export class Stream {
                     logger.info('Filter successfully removed from Stream ' + this.streamId);
                     const oldValue = this.filter!;
                     delete this.filter;
-                    this.session.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.session, this, 'filter', this.filter!, oldValue, 'applyFilter')]);
+                    if (triggerEvent) {
-                    this.streamManager.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.streamManager, this, 'filter', this.filter!, oldValue, 'applyFilter')]);
+                        this.session.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.session, this, 'filter', this.filter!, oldValue, 'applyFilter')]);
+                        this.streamManager.emitEvent('streamPropertyChanged', [new StreamPropertyChangedEvent(this.streamManager, this, 'filter', this.filter!, oldValue, 'applyFilter')]);
+                    }
                     return resolve();
                 }
             }
@@ -560,10 +561,10 @@ export class Stream {
                     delete this.virtualBackgroundSinkElements;
                     delete this.virtualBackgroundSourceElements;
 
-                    return resolveRemoveFilter(undefined);
+                    return resolveRemoveFilter(undefined, false);
 
                 } catch (error) {
-                    return resolveRemoveFilter(error);
+                    return resolveRemoveFilter(error, false);
                 }
 
             } else {
@@ -579,7 +580,7 @@ export class Stream {
                     'removeFilter',
                     { streamId: this.streamId },
                     (error, response) => {
-                        return resolveRemoveFilter(error);
+                        return resolveRemoveFilter(error, true);
                     }
                 );
 

openvidu-test-e2e/jenkins/commonFunctions.groovy

@@ -82,15 +82,22 @@ def prepareTestingEnvironment() {
                 docker.image("${KURENTO_MEDIA_SERVER_IMAGE}").pull()
             }
         },
-        'Download fake video': {
+        'Download fake videos': {
             sh(script: '''#!/bin/bash -xe
-                FAKE_VIDEO=/opt/openvidu-cache/barcode.y4m
+                FAKE_VIDEO1=/opt/openvidu-cache/barcode.y4m
-                if [ ! -f ${FAKE_VIDEO} ]; then
+                FAKE_VIDEO2=/opt/openvidu-cache/girl.mjpeg
+                if [ ! -f ${FAKE_VIDEO1} ]; then
                     sudo curl --location https://github.com/OpenVidu/openvidu/raw/master/openvidu-test-e2e/docker/barcode.y4m --create-dirs --output /opt/openvidu-cache/barcode.y4m
                 else
-                    echo "File ${FAKE_VIDEO} already exists"
+                    echo "File ${FAKE_VIDEO1} already exists"
+                fi
+                if [ ! -f ${FAKE_VIDEO2} ]; then
+                    sudo curl --location https://github.com/OpenVidu/openvidu/raw/master/openvidu-test-e2e/docker/girl.mjpeg --create-dirs --output /opt/openvidu-cache/girl.mjpeg
+                else
+                    echo "File ${FAKE_VIDEO2} already exists"
                 fi
                 sudo cp /opt/openvidu-cache/barcode.y4m /opt/openvidu/barcode.y4m
+                sudo cp /opt/openvidu-cache/girl.mjpeg /opt/openvidu/girl.mjpeg
             '''.stripIndent())
         },
         'Download fake audio': {
@@ -101,7 +108,7 @@ def prepareTestingEnvironment() {
                 else
                     echo "File ${FAKE_AUDIO} already exists"
                 fi
-                sudo cp /opt/openvidu-cache/barcode.y4m /opt/openvidu/fakeaudio.wav
+                sudo cp /opt/openvidu-cache/fakeaudio.wav /opt/openvidu/fakeaudio.wav
             '''.stripIndent())
         },
         'Download custom layout': {

openvidu-test-e2e/src/main/java/io/openvidu/test/e2e/OpenViduEventManager.java

@@ -19,9 +19,12 @@ package io.openvidu.test.e2e;
 
 import static org.openqa.selenium.OutputType.BASE64;
 
+import java.awt.Point;
 import java.util.Collection;
 import java.util.Collections;
 import java.util.HashSet;
+import java.util.Iterator;
+import java.util.List;
 import java.util.Map;
 import java.util.Queue;
 import java.util.concurrent.ConcurrentHashMap;
@@ -323,25 +326,52 @@ public class OpenViduEventManager {
 				+ "var blockSize = 5;" + "var defaultRGB = { r: 0, g: 0, b: 0 };"
 				+ "context.drawImage(video, 0, 0, 220, 150);" + "var dataURL = canvas.toDataURL();"
 				+ "imgEl.onload = function () {" + "let i = -4;" + "var rgb = { r: 0, g: 0, b: 0 };" + "let count = 0;"
-				+ "if (!context) {" + "  return defaultRGB;" + "}" +
+				+ "if (!context) {" + "  return defaultRGB;" + "}"
-
+				+ "var height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;"
-				"var height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;"
 				+ "var width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;" + "let data;"
-				+ "context.drawImage(imgEl, 0, 0);" +
+				+ "context.drawImage(imgEl, 0, 0);" + "try {" + "data = context.getImageData(0, 0, width, height);"
-
+				+ "} catch (e) {" + "return defaultRGB;" + "}" + "length = data.data.length;"
-				"try {" + "data = context.getImageData(0, 0, width, height);" + "} catch (e) {" + "return defaultRGB;"
+				+ "while ((i += blockSize * 4) < length) {" + "++count;" + "rgb.r += data.data[i];"
-				+ "}" +
+				+ "rgb.g += data.data[i + 1];" + "rgb.b += data.data[i + 2];" + "}" + "rgb.r = ~~(rgb.r / count);"
-
+				+ "rgb.g = ~~(rgb.g / count);" + "rgb.b = ~~(rgb.b / count);" + "callback(rgb);" + "};";
-				"length = data.data.length;" + "while ((i += blockSize * 4) < length) {" + "++count;"
-				+ "rgb.r += data.data[i];" + "rgb.g += data.data[i + 1];" + "rgb.b += data.data[i + 2];" + "}" +
-
-				"rgb.r = ~~(rgb.r / count);" + "rgb.g = ~~(rgb.g / count);" + "rgb.b = ~~(rgb.b / count);" +
-
-				"console.warn(rgb);" + "callback(rgb);" + "};";
 		Object averageRgb = ((JavascriptExecutor) driver).executeAsyncScript(script);
 		return (Map<String, Long>) averageRgb;
 	}
 
+	public Map<String, Long> getAverageColorFromPixels(WebElement videoElement, List<Point> pixelPercentagePositions) {
+		String script = "var callback = arguments[arguments.length - 1];"
+				+ "var points = arguments[arguments.length - 2];" + "points = JSON.parse(points);"
+				+ "var video = document.getElementById('local-video-undefined');"
+				+ "var canvas = document.createElement('canvas');" + "canvas.height = video.videoHeight;"
+				+ "canvas.width = video.videoWidth;" + "var context = canvas.getContext('2d');"
+				+ "context.drawImage(video, 0, 0, canvas.width, canvas.height);"
+				+ "var imgEl = document.createElement('img');" + "imgEl.src = canvas.toDataURL();"
+				+ "var blockSize = 5;" + "var defaultRGB = {r:0,g:0,b:0};" + "context.drawImage(video, 0, 0, 220, 150);"
+				+ "var dataURL = canvas.toDataURL();" + "imgEl.onload = function() {" + "    var rgb = {r:0,g:0,b:0};"
+				+ "    if (!context) {" + "        return defaultRGB;" + "    }"
+				+ "    var height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;"
+				+ "    var width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;"
+				+ "    let data;" + "    context.drawImage(imgEl, 0, 0);" + "    for (var p of points) {"
+				+ "        var xFromPercentage = width * (p.x / 100);"
+				+ "        var yFromPercentage = height * (p.y / 100);"
+				+ "        data = context.getImageData(xFromPercentage, yFromPercentage, 1, 1).data;"
+				+ "        rgb.r += data[0];" + "        rgb.g += data[1];" + "        rgb.b += data[2];" + "    }"
+				+ "    rgb.r = ~~(rgb.r / points.length);" + "    rgb.g = ~~(rgb.g / points.length);"
+				+ "    rgb.b = ~~(rgb.b / points.length);" + "    callback(rgb);" + "};";
+		String points = "[";
+		Iterator<Point> it = pixelPercentagePositions.iterator();
+		while (it.hasNext()) {
+			Point p = it.next();
+			points += "{\"x\":" + p.getX() + ",\"y\":" + p.getY() + "}";
+			if (it.hasNext()) {
+				points += ",";
+			}
+		}
+		points += "]";
+		Object averageRgb = ((JavascriptExecutor) driver).executeAsyncScript(script, points);
+		return (Map<String, Long>) averageRgb;
+	}
+
 	public String getDimensionOfViewport() {
 		String dimension = (String) ((JavascriptExecutor) driver)
 				.executeScript("return (JSON.stringify({width: window.innerWidth, height: window.innerHeight - 1}))");

openvidu-test-e2e/src/main/java/io/openvidu/test/e2e/OpenViduTestE2e.java

@@ -75,7 +75,7 @@ public class OpenViduTestE2e {
 
 	protected static String OPENVIDU_SECRET = "MY_SECRET";
 	protected static String OPENVIDU_URL = "https://localhost:4443/";
-	protected static String APP_URL = "http://localhost:4200/";
+	protected static String APP_URL = "https://localhost:4200/";
 	protected static String EXTERNAL_CUSTOM_LAYOUT_URL = "http://localhost:4114";
 	protected static String OPENVIDU_PRO_LICENSE = "not_valid";
 	protected static String OPENVIDU_PRO_LICENSE_API = "not_valid";
@@ -335,6 +335,11 @@ public class OpenViduTestE2e {
 			setupBrowserAux(BrowserNames.CHROME, container, false);
 			browserUser = new ChromeUser("TestUser", 50, Paths.get("/opt/openvidu/barcode.y4m"));
 			break;
+		case "chromeVirtualBackgroundFakeVideo":
+			container = chromeContainer("selenium/standalone-chrome:" + CHROME_VERSION, 2147483648L, 1, true);
+			setupBrowserAux(BrowserNames.CHROME, container, false);
+			browserUser = new ChromeUser("TestUser", 50, Paths.get("/opt/openvidu/girl.mjpeg"));
+			break;
 		case "firefox":
 			container = firefoxContainer("selenium/standalone-firefox:" + FIREFOX_VERSION, 2147483648L, 1, true);
 			setupBrowserAux(BrowserNames.FIREFOX, container, false);

openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduProTestAppE2eTest.java

@@ -2,11 +2,13 @@ package io.openvidu.test.e2e;
 
 import static org.junit.Assert.fail;
 
+import java.awt.Point;
 import java.io.File;
 import java.io.FileReader;
 import java.util.Arrays;
 import java.util.HashSet;
 import java.util.Iterator;
+import java.util.Map;
 import java.util.Queue;
 import java.util.Set;
 import java.util.concurrent.ConcurrentLinkedQueue;
@@ -630,6 +632,130 @@ public class OpenViduProTestAppE2eTest extends AbstractOpenViduTestappE2eTest {
 		gracefullyLeaveParticipants(user, 1);
 	}
 
+	@Test
+	@DisplayName("Virtual Background test")
+	void virtualBackgroundTest() throws Exception {
+
+		log.info("Virtual Background test");
+
+		OpenViduTestappUser user = setupBrowserAndConnectToOpenViduTestapp("chromeVirtualBackgroundFakeVideo");
+
+		user.getDriver().findElement(By.id("add-user-btn")).click();
+		user.getDriver().findElement(By.id("add-user-btn")).click();
+		user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 .publish-checkbox")).click();
+		user.getDriver().findElements(By.className("join-btn")).forEach(el -> el.sendKeys(Keys.ENTER));
+
+		user.getEventManager().waitUntilEventReaches("connectionCreated", 4);
+		user.getEventManager().waitUntilEventReaches("accessAllowed", 1);
+		user.getEventManager().waitUntilEventReaches("streamCreated", 2);
+		user.getEventManager().waitUntilEventReaches("streamPlaying", 2);
+
+		user.getDriver().findElement(By.cssSelector(".filter-btn")).click();
+		Thread.sleep(1000);
+
+		WebElement filterTypeInput = user.getDriver().findElement(By.id("filter-type-field"));
+		filterTypeInput.clear();
+
+		// Blur filter
+		filterTypeInput.sendKeys("VB:blur");
+		user.getDriver().findElement(By.id("apply-filter-btn")).click();
+		user.getWaiter().until(
+				ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value", "Filter applied"));
+		user.getDriver().findElement(By.id("remove-filter-btn")).click();
+		user.getWaiter().until(
+				ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value", "Filter removed"));
+		user.getDriver().findElement(By.id("apply-filter-btn")).click();
+		user.getWaiter().until(
+				ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value", "Filter applied"));
+		user.getDriver().findElement(By.id("apply-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"Error [There is already a filter applied"));
+		user.getDriver().findElement(By.id("remove-filter-btn")).click();
+		user.getWaiter().until(
+				ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value", "Filter removed"));
+		user.getDriver().findElement(By.id("remove-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"has no filter applied"));
+		user.getDriver().findElement(By.id("exec-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"has no filter applied"));
+
+		// Image filter
+		WebElement subscriberVideo = user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 video"));
+		Map<String, Long> rgb = user.getEventManager().getAverageColorFromPixels(subscriberVideo,
+				Arrays.asList(new Point[] { new Point(93, 30), new Point(30, 50) }));
+
+		// Green
+		Assert.assertTrue((rgb.get("r") < 150) && (rgb.get("g") > 240) && (rgb.get("b") < 100));
+
+		filterTypeInput.clear();
+		filterTypeInput.sendKeys("VB:image");
+		WebElement filterOptionsInput = user.getDriver().findElement(By.id("filter-options-field"));
+		filterOptionsInput.clear();
+		filterOptionsInput.sendKeys("{\"url\": \"https://openvidu.io/img/vb/not_exists.jpg\"}");
+		user.getDriver().findElement(By.id("apply-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"Error loading background image"));
+
+		filterOptionsInput = user.getDriver().findElement(By.id("filter-options-field"));
+		filterOptionsInput.clear();
+		filterOptionsInput.sendKeys("{\"url\": \"https://openvidu.io/img/vb/red.jpg\"}");
+		user.getDriver().findElement(By.id("apply-filter-btn")).click();
+		user.getWaiter().until(
+				ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value", "Filter applied"));
+
+		rgb = user.getEventManager().getAverageColorFromPixels(subscriberVideo,
+				Arrays.asList(new Point[] { new Point(93, 30), new Point(30, 50) }));
+
+		// Red
+		Assert.assertTrue((rgb.get("r") > 250) && (rgb.get("g") < 10) && (rgb.get("b") < 40));
+
+		// Fail exec method
+		WebElement filterMethodInput = user.getDriver().findElement(By.id("filter-method-field"));
+		filterMethodInput.clear();
+		filterMethodInput.sendKeys("no_existing_method");
+		user.getDriver().findElement(By.id("exec-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"Unknown Virtual Background method"));
+
+		// Fail exec method params
+		filterMethodInput.clear();
+		filterMethodInput.sendKeys("update");
+		WebElement filterParamsInput = user.getDriver().findElement(By.id("filter-params-field"));
+		filterParamsInput.clear();
+		filterParamsInput.sendKeys("wrong_params");
+		user.getDriver().findElement(By.id("exec-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"Wrong params syntax"));
+		filterParamsInput.clear();
+		filterParamsInput.sendKeys("{\"url\": \"https://openvidu.io/img/vb/not_exists.jpg\"}");
+		user.getDriver().findElement(By.id("exec-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"Error loading background image"));
+
+		// Blue
+		filterParamsInput.clear();
+		filterParamsInput.sendKeys("{\"url\": \"https://openvidu.io/img/vb/blue.jpg\"}");
+		user.getDriver().findElement(By.id("exec-filter-btn")).click();
+		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
+				"Filter method executed"));
+		rgb = user.getEventManager().getAverageColorFromPixels(subscriberVideo,
+				Arrays.asList(new Point[] { new Point(93, 30), new Point(30, 50) }));
+		Assert.assertTrue((rgb.get("r") < 10) && (rgb.get("g") < 10) && (rgb.get("b") > 240));
+
+		user.getDriver().findElement(By.id("remove-filter-btn")).click();
+		user.getWaiter().until(
+				ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value", "Filter removed"));
+
+		rgb = user.getEventManager().getAverageColorFromPixels(subscriberVideo,
+				Arrays.asList(new Point[] { new Point(93, 30), new Point(30, 50) }));
+
+		// Green
+		Assert.assertTrue((rgb.get("r") < 150) && (rgb.get("g") > 240) && (rgb.get("b") < 100));
+
+		gracefullyLeaveParticipants(user, 2);
+	}
+
 	private void waitUntilOpenViduRestarted(int maxSecondsWait) throws Exception {
 		boolean restarted = false;
 		int msInterval = 500;

openvidu-test-e2e/src/test/java/io/openvidu/test/e2e/OpenViduTestAppE2eTest.java

@@ -2106,7 +2106,6 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest {
 
 		// Analyze Chrome fake video stream without gray filter (GREEN color)
 		Map<String, Long> rgb = user.getEventManager().getAverageRgbFromVideo(subscriberVideo);
-		System.out.println(rgb.toString());
 		Assert.assertTrue("Video is not average green", RecordingUtils.checkVideoAverageRgbGreen(rgb));
 
 		// Try to apply none allowed filter
@@ -2139,7 +2138,7 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest {
 		// Try to apply another filter
 		user.getDriver().findElement(By.id("apply-filter-btn")).click();
 		user.getWaiter().until(ExpectedConditions.attributeContains(By.id("filter-response-text-area"), "value",
-				"already has a filter applied in session"));
+				"Error [There is already a filter applied"));
 
 		// Analyze Chrome fake video stream with gray filter (GRAY color)
 		user.getEventManager().waitUntilEventReaches("streamPropertyChanged", 2);