tests-e2e: Added videoElementCreated event test

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

@@ -72,8 +72,6 @@ import org.openqa.selenium.Dimension;
 import org.openqa.selenium.Keys;
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.WebElement;
-import org.openqa.selenium.logging.LogEntries;
-import org.openqa.selenium.logging.LogType;
 import org.openqa.selenium.support.ui.ExpectedCondition;
 import org.openqa.selenium.support.ui.ExpectedConditions;
 import org.springframework.http.HttpMethod;
@@ -89,7 +87,6 @@ import io.openvidu.java.client.Connection;
 import io.openvidu.java.client.ConnectionProperties;
 import io.openvidu.java.client.ConnectionType;
 import io.openvidu.java.client.IceServerProperties;
-import io.openvidu.java.client.KurentoOptions;
 import io.openvidu.java.client.MediaMode;
 import io.openvidu.java.client.OpenVidu;
 import io.openvidu.java.client.OpenViduHttpException;
@@ -728,6 +725,41 @@ public class OpenViduTestAppE2eTest extends AbstractOpenViduTestappE2eTest {
 		gracefullyLeaveParticipants(user, 2);
 	}
 
+	@Test
+	@DisplayName("Receive VideoElementCreated event when subscriber initializes with target element")
+	void subscriberVideoElementCreatedTest() throws Exception {
+
+		OpenViduTestappUser user = setupBrowserAndConnectToOpenViduTestapp("chrome");
+
+		// Add publisher
+		user.getDriver().findElement(By.id("add-user-btn")).click();
+		user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 .subscribe-checkbox")).click();
+		// join
+		user.getDriver().findElement(By.cssSelector("#openvidu-instance-0 .join-btn")).click();
+		// events
+		user.getEventManager().waitUntilEventReaches("connectionCreated", 1);
+		user.getEventManager().waitUntilEventReaches("accessAllowed", 1);
+		user.getEventManager().waitUntilEventReaches("streamCreated", 1);
+		user.getEventManager().waitUntilEventReaches("streamPlaying", 1);
+
+		// Add subscriber
+		user.getDriver().findElement(By.id("add-user-btn")).click();
+		user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 .publish-checkbox")).click();
+		user.getDriver().findElement(By.id("session-settings-btn-1")).click();
+		user.getDriver().findElement(By.id("target-element-checkbox")).click();
+		user.getDriver().findElement(By.id("save-btn")).click();
+		user.getDriver().findElement(By.cssSelector("#openvidu-instance-1 .join-btn")).click();
+
+		user.getEventManager().waitUntilEventReaches("connectionCreated", 4);
+		user.getEventManager().waitUntilEventReaches("accessAllowed", 1);
+		user.getEventManager().waitUntilEventReaches("streamCreated", 2);
+		user.getEventManager().waitUntilEventReaches("streamPlaying", 2);
+		user.getEventManager().waitUntilEventReaches("videoElementCreated", 1);
+
+		gracefullyLeaveParticipants(user, 2);
+	}
+
+
 	@Test
 	@DisplayName("Change publisher dynamically")
 	void changePublisherTest() throws Exception {

openvidu-testapp/package.json

@@ -14,8 +14,8 @@
     "colormap": "2.3.2",
     "core-js": "3.26.1",
     "json-stringify-safe": "5.0.1",
-    "openvidu-browser-v2compatibility": "3.0.0-beta3",
+    "openvidu-browser-v2compatibility": "3.0.1-beta2",
-    "openvidu-node-client-v2compatibility": "3.0.0-beta3",
+    "openvidu-node-client-v2compatibility": "3.0.1-beta1",
     "rxjs": "7.8.1",
     "tslib": "2.4.1",
     "zone.js": "0.12.0"

openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.html

@@ -122,6 +122,9 @@
         <mat-checkbox class="checkbox-form" [(ngModel)]="forcePublishing" id="force-publishing-checkbox">Force
           publishing
         </mat-checkbox>
+        <mat-checkbox class="checkbox-form" [(ngModel)]="targetElement" id="target-element-checkbox">Init with target
+          element
+        </mat-checkbox>
         <mat-checkbox class="checkbox-form" [(ngModel)]="reconnectionOnServerFailure" id="reconnection-on-server-failure-checkbox">
           Reconnection on server failure
         </mat-checkbox>
@@ -135,5 +138,5 @@
 <mat-dialog-actions>
   <button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
   <button id="save-btn" mat-button
-    [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, reconnectionOnServerFailure: reconnectionOnServerFailure, connectionProperties: generateConnectionProperties()}">SAVE</button>
+    [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, targetElement: targetElement, reconnectionOnServerFailure: reconnectionOnServerFailure, connectionProperties: generateConnectionProperties()}">SAVE</button>
 </mat-dialog-actions>

openvidu-testapp/src/app/components/dialogs/session-properties-dialog/session-properties-dialog.component.ts

@@ -15,6 +15,7 @@ export class SessionPropertiesDialogComponent {
     manualTurnConf: RTCIceServer = { urls: [] };
     customToken: string;
     forcePublishing: boolean;
+    targetElement: boolean;
     reconnectionOnServerFailure: boolean;
     connectionProperties: ConnectionProperties;
     forceVideoCodec = VideoCodec;
@@ -34,6 +35,7 @@ export class SessionPropertiesDialogComponent {
         this.manualTurnConf = data.manualTurnConf;
         this.customToken = data.customToken;
         this.forcePublishing = data.forcePublishing;
+        this.targetElement = data.targetElement;
         this.reconnectionOnServerFailure = data.reconnectionOnServerFailure;
         this.connectionProperties = data.connectionProperties;
     }

openvidu-testapp/src/app/components/openvidu-instance/openvidu-instance.component.ts

@@ -142,6 +142,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
   manualTurnConf: RTCIceServer = { urls: [] };
   customToken: string;
   forcePublishing: boolean = false;
+  withTargetElement: boolean = false;
   reconnectionOnServerFailure: boolean = false;
   connectionProperties: ConnectionProperties = {
     role: OpenViduRole.PUBLISHER,
@@ -576,8 +577,12 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   syncInitPublisher() {
+    let targetElement: HTMLElement = undefined;
+    if(this.withTargetElement){
+      targetElement = document.getElementsByClassName('video-container')[0] as HTMLElement;
+    }
     this.publisher = this.OV.initPublisher(
-      undefined,
+      targetElement,
       this.publisherProperties,
       err => {
         if (err) {
@@ -614,7 +619,13 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   syncSubscribe(session: Session, event) {
-    this.subscribers.push(session.subscribe(event.stream, undefined));
+    let targetElement: HTMLElement = undefined;
+    if(this.withTargetElement){
+      targetElement = document.getElementsByClassName('video-container')[0] as HTMLElement;
+    }
+
+    const subscriber = session.subscribe(event.stream, targetElement);
+    this.subscribers.push(subscriber);
   }
 
   openSessionPropertiesDialog() {
@@ -626,6 +637,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         manualTurnConf: this.manualTurnConf,
         customToken: this.customToken,
         forcePublishing: this.forcePublishing,
+        targetElement: this.withTargetElement,
         reconnectionOnServerFailure: this.reconnectionOnServerFailure,
         connectionProperties: this.connectionProperties,
       }
@@ -641,6 +653,7 @@ export class OpenviduInstanceComponent implements OnInit, OnChanges, OnDestroy {
         this.manualTurnConf = result.manualTurnConf;
         this.customToken = result.customToken;
         this.forcePublishing = result.forcePublishing;
+        this.withTargetElement = result.targetElement;
         this.reconnectionOnServerFailure = result.reconnectionOnServerFailure;
         this.connectionProperties = result.connectionProperties;
       }

openvidu-testapp/src/app/components/video/video.component.html

@@ -58,6 +58,9 @@
             <button class="video-btn other-operations-btn" title="Other operations" (click)="otherOperations()">
                 <mat-icon aria-label="Other operations" class="mat-icon material-icons" role="img" aria-hidden="true">settings</mat-icon>
             </button>
+            <button class="video-btn add-video-element-btn" *ngIf="!this.unpublished" title="Add Video Element" (click)="addVideoElement()">
+                <mat-icon aria-label="Add Video Element" class="mat-icon material-icons" role="img" aria-hidden="true">add</mat-icon>
+            </button>
             <button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
               <mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
             </button>

openvidu-testapp/src/app/components/video/video.component.ts

@@ -836,6 +836,11 @@ export class VideoComponent implements OnInit, OnDestroy {
         });
     }
 
+    addVideoElement() {
+        const sub: Subscriber = <Subscriber>this.streamManager;
+        sub.createVideoElement(document.getElementsByClassName('video-container')[0] as HTMLElement);
+    }
+
     emitFilterEventToParent(event: FilterEvent) {
         this.updateEventListInParent.emit({
             eventName: 'filterEvent',