Insecure js and angular comments updated to perfectly match tutorials

openvidu-insecure-angular/src/app/app.component.html

@@ -25,10 +25,10 @@
 			<stream-component [stream]="this.mainVideoStream"></stream-component>
 		</div>
 		<div id="video-container" class="col-md-6">
-			<div class="stream-container col-md-6 col-xs-6" *ngIf="this.localStream">
+			<div *ngIf="this.localStream" class="stream-container col-md-6 col-xs-6">
 				<stream-component [stream]="this.localStream" (mainVideoStream)="getMainVideoStream($event)"></stream-component>
 			</div>
-			<div class="stream-container col-md-6 col-xs-6" *ngFor="let s of this.remoteStreams">
+			<div *ngFor="let s of this.remoteStreams" class="stream-container col-md-6 col-xs-6">
 				<stream-component [stream]="s" (mainVideoStream)="getMainVideoStream($event)"></stream-component>
 			</div>
 		</div>

openvidu-insecure-angular/src/app/app.component.ts

@@ -20,8 +20,9 @@ export class AppComponent {
   sessionId: string;
   token: string;
 
-  @Input()
-  mainVideoStream: Stream;
+  // Main video of the page, will be 'localStream' or one of the 'remoteStreams',
+  // updated by an Output event of StreamComponent children
+  @Input() mainVideoStream: Stream;
 
   constructor() {
     this.generateParticipantInfo();
@@ -39,36 +40,67 @@ export class AppComponent {
   }
 
   joinSession() {
+
+    // --- 1) Get an OpenVidu object and init a session with a sessionId ---
+
+    // Init OpenVidu object
     this.OV = new OpenVidu();
+
+    // We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server
     this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionId);
 
-    // 2) Specify the actions when events take place
+
+    // --- 2) Specify the actions when events take place ---
+
+    // On every new Stream received...
     this.session.on('streamCreated', (event) => {
-      this.remoteStreams.push(event.stream); // Add the new stream to 'remoteStreams' array
-      this.session.subscribe(event.stream, ''); // Empty string for no video element
+
+      // Add the new stream to 'remoteStreams' array
+      this.remoteStreams.push(event.stream);
+
+      // Subscribe to the Stream to receive it. Second parameter is an empty string
+      // so OpenVidu doesn't create an HTML video by its own
+      this.session.subscribe(event.stream, '');
     });
 
+    // On every Stream destroyed...
     this.session.on('streamDestroyed', (event) => {
-      event.preventDefault(); // Avoid OpenVidu trying to remove the HTML video element
-      this.deleteRemoteStream(event.stream); // Remove the stream from 'remoteStreams' array
+
+      // Avoid OpenVidu trying to remove the HTML video element
+      event.preventDefault();
+
+      // Remove the stream from 'remoteStreams' array
+      this.deleteRemoteStream(event.stream);
     });
 
-    // 3) Connect to the session
+
+    // --- 3) Connect to the session ---
+
+    // 'token' param irrelevant when using insecure version of OpenVidu. Second param will be received by every user
+    // in Stream.connection.data property, which will be appended to DOM as the user's nickname
     this.session.connect(this.token, '{"clientData": "' + this.token + '"}', (error) => {
-      // If the connection is successful, initialize a publisher and publish to the session
+
+     // If connection successful, initialize a publisher and publish to the session
       if (!error) {
 
-        // 4) Get your own camera stream with the desired resolution
+        // --- 4) Get your own camera stream with the desired resolution ---
+
+        // Both audio and video will be active. Second parameter is an empty string
+        // so OpenVidu doesn't create an HTML video by its own
         let publisher = this.OV.initPublisher('', {
           audio: true,
           video: true,
           quality: 'MEDIUM'
         });
 
+        // Store your webcam stream in 'localStream' object
         this.localStream = publisher.stream;
+        // Set the main video in the page to display our webcam
         this.mainVideoStream = this.localStream;
 
-        // 5) Publish your stream
+
+        // --- 5) Publish your stream ---
+
         this.session.publish(publisher);
 
       } else {

openvidu-insecure-angular/src/app/stream.component.ts

@@ -45,10 +45,13 @@ export class StreamComponent implements DoCheck {
     constructor(private sanitizer: DomSanitizer) { }
 
     ngDoCheck() { // Detect any change in 'stream' property
+
         // If 'src' of Stream object has changed, 'videoSrc' value must be updated
         if (!(this.videSrcUnsafe === this.stream.getVideoSrc())) {
+
             // Angular mandatory URL sanitization
             this.videoSrc = this.sanitizer.bypassSecurityTrustUrl(this.stream.getVideoSrc());
+
             // Auxiliary value to store the URL as a string for upcoming comparisons
             this.videSrcUnsafe = this.stream.getVideoSrc();
         }

openvidu-insecure-js/web/app.js

@@ -76,10 +76,10 @@ function joinSession() {
 
 	// --- 1) Get an OpenVidu object and init a session with a sessionId ---
 
-	// OpenVidu listening on "localhost:8443"
+	// Init OpenVidu object
 	OV = new OpenVidu();
 
-	// We will join the video-call "sessionId"
+	// We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server
 	session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId);
 
 
@@ -124,6 +124,7 @@ function joinSession() {
 				quality: 'MEDIUM'
 			});
 
+			// When our HTML video has been added to DOM...
 			publisher.on('videoElementCreated', function (event) {
 				initMainVideo(event.element, token);
 				appendUserData(event.element, token);
@@ -147,13 +148,15 @@ function joinSession() {
 
 function leaveSession() {
 
-	// 6) Leave the session by calling 'disconnect' method over the Session object
+	// --- 6) Leave the session by calling 'disconnect' method over the Session object ---
 
 	session.disconnect();
 
-	// Removing all HTML elements with the user's nicknames. HTML videos are automatically removed when leaving a Session
+	// Removing all HTML elements with the user's nicknames. 
+	// HTML videos are automatically removed when leaving a Session
 	removeAllUserData();
 
+	// Back to 'Join session' page
 	document.getElementById('join').style.display = 'block';
 	document.getElementById('session').style.display = 'none';
 }