videoElementCreated event emitted by Publisher and Subscriber

openvidu-browser/src/main/resources/ts/OpenVidu/OpenVidu.ts

@@ -58,7 +58,7 @@ export class OpenVidu {
                     console.log("Error accessing the camera");
                 }
                 else {
-                    this.cameraReady(camera!, parentId);
+                    this.camera.setVideoElement(this.cameraReady(camera!, parentId));
                 }
             });
             return this.camera;
@@ -68,7 +68,7 @@ export class OpenVidu {
                     callback(error);
                 }
                 else {
-                    this.cameraReady(camera!, parentId);
+                    this.camera.setVideoElement(this.cameraReady(camera!, parentId));
                     callback(undefined);
                 }
             });
@@ -78,9 +78,9 @@ export class OpenVidu {
 
     cameraReady(camera: Stream, parentId: string) {
         this.camera = camera;
-        this.camera.playOnlyVideo(parentId, null);
+        let videoElement = this.camera.playOnlyVideo(parentId, null);
-        this.camera.isReady = true;
         this.camera.emitStreamReadyEvent();
+        return videoElement;
     }
 
     initPublisher(cameraOptions: any, callback) {

openvidu-browser/src/main/resources/ts/OpenVidu/Session.ts

@@ -345,7 +345,7 @@ export class Session {
                 message: message
             }]);
         } else {
-            console.error("User undefined in new message:", msg);
+            console.warn("User undefined in new message:", msg);
         }
     }
 
@@ -387,7 +387,7 @@ export class Session {
                 room: room
             }]);
         } else {
-            console.error("Room undefined in on room closed", msg);
+            console.warn("Room undefined in on room closed", msg);
         }
     }
 
@@ -403,7 +403,7 @@ export class Session {
         if (room !== undefined) {
             this.ee.emitEvent('lost-connection', [{ room }]);
         } else {
-            console.error('Room undefined when lost connection');
+            console.warn('Room undefined when lost connection');
         }
     }
 
@@ -416,7 +416,7 @@ export class Session {
                 error: error
             }]);
         } else {
-            console.error("Received undefined media error. Params:", params);
+            console.warn("Received undefined media error. Params:", params);
         }
     }
 

openvidu-browser/src/main/resources/ts/OpenVidu/Stream.ts

@@ -110,16 +110,30 @@ export class Stream {
         return this.videoSrc;
     }
 
+    removeVideo(parentElement: string);
+    removeVideo(parentElement: Element);
+    removeVideo();
+
     removeVideo(parentElement?) {
-        if (parentElement) {
+        if (typeof parentElement === "string") {
             document.getElementById(parentElement)!.removeChild(this.video);
-        } else {
+        } else if (parentElement instanceof Element) {
+            parentElement.removeChild(this.video);
+        }
+        else if (!parentElement) {
             if (document.getElementById(this.parentId)) {
                 document.getElementById(this.parentId)!.removeChild(this.video);
             }
         }
     }
 
+    getVideoElement(): HTMLVideoElement {
+        return this.video;
+    }
+
+    setVideoElement(video: HTMLVideoElement) {
+        this.video = video;
+    }
 
 
 
@@ -203,6 +217,14 @@ export class Stream {
         this.ee.addListener(eventName, listener);
     }
 
+    addOnceEventListener(eventName: string, listener: any) {
+        this.ee.addOnceListener(eventName, listener);
+    }
+
+    removeListener(eventName){
+        this.ee.removeAllListeners(eventName);
+    }
+
     showSpinner(spinnerParentId: string) {
         let progress = document.createElement('div');
         progress.id = 'progress-' + this.getId();
@@ -249,6 +271,12 @@ export class Stream {
             this.video = parentElement.appendChild(this.video);
         }
 
+        this.ee.emitEvent('video-element-created-by-stream', [{
+            element: this.video
+        }]);
+
+        this.isReady = true;
+
         return this.video;
     }
 

openvidu-browser/src/main/resources/ts/OpenViduTokBox/PublisherTokBox.ts

@@ -19,10 +19,10 @@ export class PublisherTokBox {
     element: Element;
     id: string;
     stream: Stream;
-    session: SessionTokBox;
+    session: SessionTokBox; //Initialized by SessionTokBox.publish(PublisherTokBox)
 
     constructor(stream: Stream, parentId: string) {
-        this.accessAllowed = false;
+        this.stream = stream;
 
         this.ee.on('camera-access-changed', (event) => {
             this.accessAllowed = event.accessAllowed;
@@ -33,7 +33,6 @@ export class PublisherTokBox {
             }
         });
 
-        this.stream = stream;
         if (document.getElementById(parentId) != null) {
             this.element = document.getElementById(parentId)!!;
         }
@@ -47,4 +46,31 @@ export class PublisherTokBox {
         this.stream.getWebRtcPeer().videoEnabled = value;
     }
 
-}
+    destroy() {
+        this.session.unpublish(this);
+        this.stream.dispose();
+        this.stream.removeVideo(this.element);
+        return this;
+    }
+
+    on(eventName: string, callback) {
+        this.ee.addListener(eventName, event => {
+            callback(event);
+        });
+        if (eventName == 'videoElementCreated') {
+            if (this.stream.isReady) {
+                this.ee.emitEvent('videoElementCreated', [{
+                    element: this.stream.getVideoElement()
+                }]);
+            } else {
+                this.stream.addEventListener('video-element-created-by-stream', element => {
+                    console.warn("Publisher emitting videoElementCreated");
+                    this.id = element.id;
+                    this.ee.emitEvent('videoElementCreated', [{
+                        element: element
+                    }]);
+                });
+            }
+        }
+    }
+}

openvidu-browser/src/main/resources/ts/OpenViduTokBox/SessionTokBox.ts

@@ -7,7 +7,12 @@ import { SubscriberTokBox } from './SubscriberTokBox';
 
 export class SessionTokBox {
 
+    //capabilities: Capabilities
+    //connection: Connection
+    sessionId: String;
+
     constructor(private session: Session, private openVidu: OpenViduTokBox) {
+        this.sessionId = session.getSessionId();
         this.session.addEventListener('stream-removed-default', event => {
             event.stream.removeVideo();
         });
@@ -51,7 +56,9 @@ export class SessionTokBox {
                 callback(event);
             });
         } else {
-            console.warn("That is not a supported event!");
+            this.session.addEventListener(eventName, event => {
+                callback(event);
+            });
         }
     }
 
@@ -70,7 +77,9 @@ export class SessionTokBox {
                 callback(event);
             });
         } else {
-            console.warn("That is not a supported event!");
+            this.session.addOnceEventListener(eventName, event => {
+                callback(event);
+            });
         }
     }
 
@@ -87,7 +96,7 @@ export class SessionTokBox {
         if (realEventName != '') {
             this.session.removeListener(realEventName, eventHandler);
         } else {
-            console.warn("That is not a supported event!");
+            this.session.removeListener(eventName, eventHandler);
         }
     }
 
@@ -97,12 +106,14 @@ export class SessionTokBox {
     subscribe(param1, param2, param3?): SubscriberTokBox {
         // Subscription
         this.session.subscribe(param1);
+        let subscriber = new SubscriberTokBox(param1, param2);
         param1.playOnlyVideo(param2, null);
-        return new SubscriberTokBox(param1, param2);
+        return subscriber;
     }
 
-    unsuscribe(subscriber: SubscriberTokBox) {
+    unsubscribe(subscriber: SubscriberTokBox) {
         this.session.unsuscribe(subscriber.stream);
+        subscriber.stream.removeVideo();
     }
 
 

openvidu-browser/src/main/resources/ts/OpenViduTokBox/SubscriberTokBox.ts

@@ -2,8 +2,12 @@ import { Stream, StreamOptions, VideoOptions } from '../OpenVidu/Stream';
 import { OpenViduTokBox } from './OpenViduTokBox';
 import { SessionTokBox } from './SessionTokBox';
 
+import EventEmitter = require('wolfy87-eventemitter');
+
 export class SubscriberTokBox {
 
+    private ee = new EventEmitter();
+
     element: Element;
     id: string;
     stream: Stream;
@@ -14,4 +18,25 @@ export class SubscriberTokBox {
             this.element = document.getElementById(parentId)!!;
         }
     }
+
+    on(eventName: string, callback) {
+        this.ee.addListener(eventName, event => {
+            callback(event);
+        });
+        if (eventName == 'videoElementCreated') {
+            if (this.stream.isReady) {
+                this.ee.emitEvent('videoElementCreated', [{
+                    element: this.stream.getVideoElement()
+                }]);
+            } else {
+                this.stream.addEventListener('video-element-created-by-stream', element => {
+                    console.warn("Subscriber emitting videoElementCreated");
+                    this.id = element.id;
+                    this.ee.emitEvent('videoElementCreated', [{
+                        element: element
+                    }]);
+                });
+            }
+        }
+    }
 }

openvidu-server/src/main/resources/application.properties

@@ -6,4 +6,4 @@ server.ssl.keyStoreType: JKS
 server.ssl.keyAlias: kurento-selfsigned
 
 openvidu.secret: MY_SECRET
-openvidu.security: true
+openvidu.security: false