OpenViduBrowser API definition

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

@@ -27,16 +27,58 @@ export class OpenVidu {
     private rpcParams: any;
     private callback: Callback<OpenVidu>;
     private camera: Stream;
+    private remoteStreams: Stream[] = [];
     
     constructor( private wsUri: string ) {
         if(this.wsUri.charAt(wsUri.length-1) != '/'){
             this.wsUri += '/';
         }
         this.wsUri += 'room';
-        
-        this.session = new Session(this);
     }
 
+
+
+
+
+    /* NEW METHODS */
+    initSession(sessionId) {
+        console.log("Session initialized!");
+        this.session = new Session(this, sessionId);
+        return this.session;
+    }
+
+    initPublisherTagged(parentId: string, cameraOptions: any) {
+        console.log("Publisher tagged initialized!");
+
+        let camera = this.getCamera(cameraOptions);
+        camera.requestCameraAccess((error, camera) => {
+            if (error) return console.log(error);
+            camera!.playOnlyVideo(parentId, null);
+        });
+    }
+
+    initPublisher(cameraOptions: any) {
+        console.log("Publisher initialized!");
+
+        let camera = this.getCamera(cameraOptions);
+        camera.requestCameraAccess((error, camera) => {
+            if (error) return console.log(error);
+        });
+    }
+
+    getLocalStream() {
+        return this.camera;
+    }
+
+    getRemoteStreams() {
+        return this.remoteStreams;
+    }
+    /* NEW METHODS */
+
+
+
+
+
     getRoom() {
         return this.session;
     }
@@ -230,7 +272,7 @@ export class OpenVidu {
         return this.camera;
     };
 
-    joinSession(options: SessionOptions, callback: Callback<Session>) {
+    /*joinSession(options: SessionOptions, callback: Callback<Session>) {
         
         this.session.configure(options);
         
@@ -241,7 +283,7 @@ export class OpenVidu {
         this.session.addEventListener('error-room', error => callback(error));
         
         return this.session;
-    };
+    };*/
 
     //CHAT
     sendMessage( room, user, message ) {

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

@@ -25,113 +25,135 @@ export class Session {
     public thresholdSpeaker: number;
     private options: SessionOptions
 
-    constructor( private openVidu: OpenVidu ) {
+    constructor(private openVidu: OpenVidu, private sessionId: string) {
-        this.localParticipant = new Participant( this.openVidu, true, this );
+        this.localParticipant = new Participant(this.openVidu, true, this);
     }
 
-    configure( options: SessionOptions ) {
+
+
+    /* NEW METHODS */
+    connect(token, callback) {
+
+        this.openVidu.connect((error) => {
+            if (error) {
+                callback('ERROR CONNECTING TO OPENVIDU');
+            }
+            else {
+                this.configure({
+                    sessionId: this.sessionId,
+                    participantId: token
+                });
+
+                let joinParams = {
+                    user: token,
+                    room: this.sessionId,
+                    dataChannels: false
+                }
+
+                if (this.localParticipant) {
+                    if (Object.keys(this.localParticipant.getStreams()).some(streamId =>
+                        this.streams[streamId].isDataChannelEnabled())) {
+                        joinParams.dataChannels = true;
+                    }
+                }
+
+                this.openVidu.sendRequest('joinRoom', joinParams, (error, response) => {
+
+                    if (error) {
+                        callback('UNABLE TO JOIN ROOM');
+                    } else {
+
+                        this.connected = true;
+
+                        let exParticipants = response.value;
+
+                        let roomEvent = {
+                            participants: new Array<Participant>(),
+                            streams: new Array<Stream>()
+                        }
+
+                        let length = exParticipants.length;
+                        for (let i = 0; i < length; i++) {
+
+                            let participant = new Participant(this.openVidu, false, this,
+                                exParticipants[i]);
+
+                            this.participants[participant.getId()] = participant;
+
+                            roomEvent.participants.push(participant);
+
+                            let streams = participant.getStreams();
+                            for (let key in streams) {
+                                roomEvent.streams.push(streams[key]);
+                                if (this.subscribeToStreams) {
+                                    streams[key].subscribe();
+                                }
+                            }
+                        }
+
+                        if (this.subscribeToStreams) {
+                            for (let stream of roomEvent.streams) {
+                                this.ee.emitEvent('stream-added', [{ stream }]);
+
+                                // Adding the remote stream to the OpenVidu object
+                                this.openVidu.getRemoteStreams().push(stream);
+                            }
+                        }
+
+                        callback(undefined);
+                    }
+                });
+            }
+        });
+    }
+
+    publish() {
+        this.openVidu.getCamera().publish();
+    }
+    /* NEW METHODS */
+
+
+
+
+
+    configure(options: SessionOptions) {
 
         this.options = options;
         this.id = options.sessionId;
         this.subscribeToStreams = options.subscribeToStreams || true;
         this.updateSpeakerInterval = options.updateSpeakerInterval || 1500;
         this.thresholdSpeaker = options.thresholdSpeaker || -50;
-        this.localParticipant.setId( options.participantId );
+        this.localParticipant.setId(options.participantId);
         this.activateUpdateMainSpeaker();
 
         this.participants[options.participantId] = this.localParticipant;
     }
-    
+
-    getId(){
+    getId() {
         return this.id;
     }
 
     private activateUpdateMainSpeaker() {
 
         setInterval(() => {
-            if ( this.participantsSpeaking.length > 0 ) {
+            if (this.participantsSpeaking.length > 0) {
-                this.ee.emitEvent( 'update-main-speaker', [{
+                this.ee.emitEvent('update-main-speaker', [{
                     participantId: this.participantsSpeaking[this.participantsSpeaking.length - 1]
-                }] );
+                }]);
             }
-        }, this.updateSpeakerInterval );
+        }, this.updateSpeakerInterval);
     }
 
     getLocalParticipant() {
         return this.localParticipant;
     }
 
-    addEventListener( eventName, listener ) {
+    addEventListener(eventName, listener) {
-        this.ee.addListener( eventName, listener );
+        this.ee.addListener(eventName, listener);
     }
 
-    emitEvent( eventName, eventsArray ) {
+    emitEvent(eventName, eventsArray) {
-        this.ee.emitEvent( eventName, eventsArray );
+        this.ee.emitEvent(eventName, eventsArray);
-    }
-
-    connect() {
-
-        let joinParams = {
-            user: this.options.participantId,
-            room: this.options.sessionId,
-            dataChannels: false
-        }
-
-        if ( this.localParticipant ) {
-            if ( Object.keys( this.localParticipant.getStreams() ).some( streamId =>
-                this.streams[streamId].isDataChannelEnabled() ) ) {
-                joinParams.dataChannels = true;
-            }
-        }
-
-        this.openVidu.sendRequest( 'joinRoom', joinParams, ( error, response ) => {
-
-            if ( error ) {
-
-                console.warn( 'Unable to join room', error );
-                this.ee.emitEvent( 'error-room', [{
-                    error: error
-                }] );
-
-            } else {
-
-                this.connected = true;
-
-                let exParticipants = response.value;
-
-                let roomEvent = {
-                    participants: new Array<Participant>(),
-                    streams: new Array<Stream>()
-                }
-
-                let length = exParticipants.length;
-                for ( let i = 0; i < length; i++ ) {
-
-                    let participant = new Participant( this.openVidu, false, this,
-                        exParticipants[i] );
-
-                    this.participants[participant.getId()] = participant;
-
-                    roomEvent.participants.push( participant );
-
-                    let streams = participant.getStreams();
-                    for ( let key in streams ) {
-                        roomEvent.streams.push( streams[key] );
-                        if ( this.subscribeToStreams ) {
-                            streams[key].subscribe();
-                        }
-                    }
-                }
-
-                this.ee.emitEvent( 'room-connected', [roomEvent] );
-
-                if ( this.subscribeToStreams ) {
-                    for ( let stream of roomEvent.streams ) {
-                        this.ee.emitEvent( 'stream-added', [{ stream }] );
-                    }
-                }
-            }
-        });
     }
 
 
@@ -161,6 +183,9 @@ export class Session {
             if ( this.subscribeToStreams ) {
                 stream.subscribe();
                 this.ee.emitEvent( 'stream-added', [{ stream }] );
+
+                // Adding the remote stream to the OpenVidu object
+                this.openVidu.getRemoteStreams().push(stream);
             }
         }
     }
@@ -201,6 +226,10 @@ export class Session {
                 this.ee.emitEvent( 'stream-removed', [{
                     stream: streams[key]
                 }] );
+
+                // Deleting the removed stream from the OpenVidu object
+                let index = this.openVidu.getRemoteStreams().indexOf(streams[key]);
+                this.openVidu.getRemoteStreams().splice(index, 1);
             }
 
             participant.dispose();

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

@@ -69,6 +69,8 @@ export class Stream {
     private dataChannel: boolean;
     private dataChannelOpened = false;
 
+    private videoSrc: string;
+
     constructor(private openVidu: OpenVidu, private local: boolean, private room: Session, options: StreamOptions) {
 
         if (options.id) {
@@ -84,8 +86,32 @@ export class Stream {
         this.sendVideo = options.video;
         this.sendAudio = options.audio;
         this.mediaConstraints = options.mediaConstraints;
+
+        this.addEventListener('src-added', (srcEvent) => {
+            this.videoSrc = srcEvent.src;
+            if (this.video) this.video.src = srcEvent.src;
+            console.warn("Videosrc [" + srcEvent.src + "] added to stream [" + this.getId() + "]");
+        });
     }
 
+    emitSrcEvent(wrstream) {
+        this.ee.emitEvent('src-added', [{
+            src: URL.createObjectURL(wrstream)
+        }]);
+    }
+
+    getVideoSrc() {
+        return this.videoSrc;
+    }
+
+    removeVideo(parentElement) {
+        document.getElementById(parentElement)!.removeChild(this.video);
+    }
+
+
+
+
+
     getRecvVideo() {
         return this.recvVideo;
     }
@@ -108,6 +134,7 @@ export class Stream {
         this.localMirrored = true;
         if (wr) {
             this.wrStream = wr;
+            this.emitSrcEvent(this.wrStream);
         }
     }
 
@@ -183,13 +210,7 @@ export class Stream {
         this.video.id = 'native-video-' + this.getId();
         this.video.autoplay = true;
         this.video.controls = false;
-        if (this.wrStream) {
+        this.video.src = this.videoSrc;
-            this.video.src = URL.createObjectURL(this.wrStream);
-            show(thumbnailId);
-            this.hideSpinner();
-        } else {
-            console.log("No wrStream yet for", this.getId());
-        }
 
         this.videoElements.push({
             thumb: thumbnailId,
@@ -203,10 +224,10 @@ export class Stream {
         if (typeof parentElement === "string") {
             let parentElementDom = document.getElementById(parentElement);
             if (parentElementDom) {
-                parentElementDom.appendChild(this.video);
+                this.video = parentElementDom.appendChild(this.video);
             }
         } else {
-            parentElement.appendChild(this.video);
+            this.video = parentElement.appendChild(this.video);
         }
 
         return this.video;
@@ -278,12 +299,14 @@ export class Stream {
             }
         };
 
-        navigator.mediaDevices.getUserMedia(constraints)
+        navigator.mediaDevices.getUserMedia(constraints2)
             .then(userStream => {
                 userStream.getAudioTracks()[0].enabled = this.sendAudio;
                 userStream.getVideoTracks()[0].enabled = this.sendVideo;
 
                 this.wrStream = userStream;
+                this.emitSrcEvent(this.wrStream);
+
                 callback(undefined, this);
             })
             .catch(function (e) {
@@ -438,6 +461,8 @@ export class Stream {
 
                 if (this.wrStream != undefined) {
 
+                    this.emitSrcEvent(this.wrStream);
+
                     this.speechEvent = kurentoUtils.WebRtcPeer.hark(this.wrStream, { threshold: this.room.thresholdSpeaker });
 
                     this.speechEvent.on('speaking', () => {
@@ -460,8 +485,8 @@ export class Stream {
                     video.src = URL.createObjectURL(this.wrStream);
                     video.onplay = () => {
                         console.log(this.getId() + ': ' + 'Video playing');
-                        show(thumbnailId);
+                        //show(thumbnailId);
-                        this.hideSpinner(this.getId());
+                        //this.hideSpinner(this.getId());
                     };
                 }
                 this.room.emitEvent('stream-subscribed', [{