TokBox Tutorial 100% compatible

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

@@ -58,9 +58,7 @@ export class OpenVidu {
                     console.log("Error accessing the camera");
                 }
                 else {
-                    this.camera.playOnlyVideo(parentId, null);
+                    this.cameraReady(camera!, parentId);
-                    this.camera.isReady = true;
-                    this.camera.emitStreamReadyEvent();
                 }
             });
             return this.camera;
@@ -70,7 +68,7 @@ export class OpenVidu {
                     callback(error);
                 }
                 else {
-                    this.camera.playOnlyVideo(parentId, null);
+                    this.cameraReady(camera!, parentId);
                     callback(undefined);
                 }
             });
@@ -78,6 +76,13 @@ export class OpenVidu {
         }
     }
 
+    cameraReady(camera: Stream, parentId: string) {
+        this.camera = camera;
+        this.camera.playOnlyVideo(parentId, null);
+        this.camera.isReady = true;
+        this.camera.emitStreamReadyEvent();
+    }
+
     initPublisher(cameraOptions: any, callback) {
         console.log("Publisher initialized!");
 
@@ -286,7 +291,11 @@ export class OpenVidu {
         options = options || {
             audio: true,
             video: true,
-            data: true
+            data: true,
+            mediaConstraints: {
+                audio: true,
+                video: { width: { ideal: 1280 } }
+            }
         }
 
         options.participant = this.session.getLocalParticipant();

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

@@ -434,7 +434,7 @@ export class Stream {
         if (this.isReady) {
             this.initWebRtcPeer(this.publishVideoCallback);
         } else {
-            this.addEventListener('stream-ready', streamEvent => {
+            this.ee.once('stream-ready', streamEvent => {
                 this.publish();
             });
         }

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

@@ -38,8 +38,23 @@ export class OpenViduTokBox {
         }
     }
 
-    initPublisher(parentId: string, cameraOptions: any): PublisherTokBox {
+    initPublisher(parentId: string, cameraOptions: any): PublisherTokBox;
-        return new PublisherTokBox(this.openVidu.initPublisherTagged(parentId, cameraOptions));
+    initPublisher(parentId: string, cameraOptions: any, callback: any): PublisherTokBox;
+
+    initPublisher(parentId: string, cameraOptions: any, callback?): PublisherTokBox {
+        if (!("audio" in cameraOptions && "data" in cameraOptions && "mediaConstraints" in cameraOptions &&
+            "video" in cameraOptions && (Object.keys(cameraOptions).length === 4))) {
+            cameraOptions = {
+                audio: true,
+                video: true,
+                data: true,
+                mediaConstraints: {
+                    audio: true,
+                    video: { width: { ideal: 1280 } }
+                }
+            }
+        }
+        return new PublisherTokBox(this.openVidu.initPublisherTagged(parentId, cameraOptions, callback));
     }
 
 }

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

@@ -17,4 +17,12 @@ export class PublisherTokBox {
         this.stream = stream;
     }
 
+    publishAudio(value: boolean) {
+        this.stream.getWebRtcPeer().audioEnabled = value;
+    }
+
+    publishVideo(value: boolean) {
+         this.stream.getWebRtcPeer().videoEnabled = value;
+    }
+    
 }

openvidu-sample-app/src/main/resources/frontend/src/app/components/video-session/video-session.component.html

@@ -5,5 +5,5 @@
     <md-icon class="right-btn" (click)="toggleLocalAudio()" [title]="'Toggle audio'">{{audioIcon}}</md-icon>
     <h1>{{lesson?.title}}</h1>
 </div>
-<div id="local-stream"></div>
+<div id="publisher"></div>
-<div id="remote-streams"></div>
+<div id="subscriber"></div>

openvidu-sample-app/src/main/resources/frontend/src/app/components/video-session/video-session.component.ts

@@ -18,13 +18,12 @@ export class VideoSessionComponent implements OnInit {
 
     OV: OpenViduTokBox;
     session: SessionTokBox;
+    publisher: PublisherTokBox;
 
     sessionId: string;
     token: string;
 
     cameraOptions: any;
-    localParentId: string = 'local-stream';
-    remoteParentId: string = 'remote-streams';
 
     localVideoActivated: boolean;
     localAudioActivated: boolean;
@@ -45,29 +44,37 @@ export class VideoSessionComponent implements OnInit {
 
         // 1) Initialize OpenVidu and your Session
         this.OV = new OpenViduTokBox("wss://" + location.hostname + ":8443/");
-        this.session = this.OV.initSession(this.sessionId);
+        this.session = this.OV.initSession("apikey", this.sessionId);
 
         // 2) Specify the actions when events take place
         this.session.on('streamCreated', (event) => {
-            console.warn("Stream created:");
+            this.session.subscribe(event.stream, 'subscriber', {
-            console.warn(event.stream);
+                insertMode: 'append',
-            this.session.subscribe(event.stream, this.remoteParentId);
+                width: '100%',
+                height: '100%'
+            });
         });
 
         // 3) Connect to the session
         this.session.connect(this.token, (error) => {
-            if (!error) {
-                // 4) Get your own camera stream with the desired resolution and publish it, only if the user is supposed to do so
-                let publisher = this.OV.initPublisher(this.localParentId, this.cameraOptions);
-                // 5) Publish your stream
-                this.session.publish(publisher);
-            }
-            else {
-                return console.log("There was an error: " + error);
-            }
 
+            // If the connection is successful, initialize a publisher and publish to the session
+            if (!error) {
+
+                // 4) Get your own camera stream with the desired resolution and publish it, only if the user is supposed to do so
+                this.publisher = this.OV.initPublisher('publisher', {
+                    insertMode: 'append',
+                    width: '100%',
+                    height: '100%'
                 });
 
+                // 5) Publish your stream
+                this.session.publish(this.publisher);
+
+            } else {
+                console.log('There was an error connecting to the session:', error.code, error.message);
+            }
+        });
     }
 
 
@@ -142,6 +149,51 @@ export class VideoSessionComponent implements OnInit {
         content.style.overflow = scroll;
     }
 
+    toggleLocalVideo() {
+        this.localVideoActivated = !this.localVideoActivated;
+        this.publisher.publishVideo(this.localVideoActivated);
+        this.videoIcon = this.localVideoActivated ? 'videocam' : 'videocam_off';
+    }
+
+    toggleLocalAudio() {
+        this.localAudioActivated = !this.localAudioActivated;
+        this.publisher.publishAudio(this.localAudioActivated);
+        this.audioIcon = this.localAudioActivated ? 'mic' : 'mic_off';
+    }
+
+    toggleFullScreen() {
+        let document: any = window.document;
+        let fs = document.getElementsByTagName('html')[0];
+        if (!document.fullscreenElement &&
+            !document.mozFullScreenElement &&
+            !document.webkitFullscreenElement &&
+            !document.msFullscreenElement) {
+            console.log("enter FULLSCREEN!");
+            this.fullscreenIcon = 'fullscreen_exit';
+            if (fs.requestFullscreen) {
+                fs.requestFullscreen();
+            } else if (fs.msRequestFullscreen) {
+                fs.msRequestFullscreen();
+            } else if (fs.mozRequestFullScreen) {
+                fs.mozRequestFullScreen();
+            } else if (fs.webkitRequestFullscreen) {
+                fs.webkitRequestFullscreen();
+            }
+        } else {
+            console.log("exit FULLSCREEN!");
+            this.fullscreenIcon = 'fullscreen';
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            }
+        }
+    }
+
     exitFullScreen() {
         let document: any = window.document;
         let fs = document.getElementsByTagName('html')[0];

openvidu-sample-app/src/main/resources/frontend/src/styles.css

@@ -66,21 +66,21 @@ md-icon:hover {
   display: inline-block;
 }
 
-#local-stream {
+#publisher {
   position: absolute;
   width: 100%;
 }
 
-#local-stream video {
+#publisher video {
   width: 100%;
 }
 
-#remote-streams {
+#subscriber {
   position: absolute;
   bottom: 0;
 }
 
-#remote-streams video {
+#subscriber video {
   width: 350px;
 }