diff --git a/openvidu-browser/src/main/resources/ts/OpenVidu/OpenVidu.ts b/openvidu-browser/src/main/resources/ts/OpenVidu/OpenVidu.ts index 925ab8d6..6906ba80 100644 --- a/openvidu-browser/src/main/resources/ts/OpenVidu/OpenVidu.ts +++ b/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); - this.camera.isReady = true; + let videoElement = this.camera.playOnlyVideo(parentId, null); this.camera.emitStreamReadyEvent(); + return videoElement; } initPublisher(cameraOptions: any, callback) { diff --git a/openvidu-browser/src/main/resources/ts/OpenVidu/Session.ts b/openvidu-browser/src/main/resources/ts/OpenVidu/Session.ts index babb3168..2beabb19 100644 --- a/openvidu-browser/src/main/resources/ts/OpenVidu/Session.ts +++ b/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); } } diff --git a/openvidu-browser/src/main/resources/ts/OpenVidu/Stream.ts b/openvidu-browser/src/main/resources/ts/OpenVidu/Stream.ts index fca00e22..e6ae7d8c 100644 --- a/openvidu-browser/src/main/resources/ts/OpenVidu/Stream.ts +++ b/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; } diff --git a/openvidu-browser/src/main/resources/ts/OpenViduTokBox/PublisherTokBox.ts b/openvidu-browser/src/main/resources/ts/OpenViduTokBox/PublisherTokBox.ts index 4a4bd56c..d6b0d370 100644 --- a/openvidu-browser/src/main/resources/ts/OpenViduTokBox/PublisherTokBox.ts +++ b/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 + }]); + }); + } + } + } +} \ No newline at end of file diff --git a/openvidu-browser/src/main/resources/ts/OpenViduTokBox/SessionTokBox.ts b/openvidu-browser/src/main/resources/ts/OpenViduTokBox/SessionTokBox.ts index 024ab800..621881d8 100644 --- a/openvidu-browser/src/main/resources/ts/OpenViduTokBox/SessionTokBox.ts +++ b/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(); } diff --git a/openvidu-browser/src/main/resources/ts/OpenViduTokBox/SubscriberTokBox.ts b/openvidu-browser/src/main/resources/ts/OpenViduTokBox/SubscriberTokBox.ts index de979480..439a392f 100644 --- a/openvidu-browser/src/main/resources/ts/OpenViduTokBox/SubscriberTokBox.ts +++ b/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 + }]); + }); + } + } + } } \ No newline at end of file diff --git a/openvidu-server/src/main/resources/application.properties b/openvidu-server/src/main/resources/application.properties index 05eff0cd..03ccd987 100644 --- a/openvidu-server/src/main/resources/application.properties +++ b/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 \ No newline at end of file +openvidu.security: false \ No newline at end of file