From ce65f30e4dfcddb8785b900bb8cc948206e15423 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Thu, 20 Jul 2017 12:00:22 +0200 Subject: [PATCH] Insecure js and angular comments updated to perfectly match tutorials --- .../src/app/app.component.html | 4 +- .../src/app/app.component.ts | 54 +++++++++++++++---- .../src/app/stream.component.ts | 3 ++ openvidu-insecure-js/web/app.js | 11 ++-- 4 files changed, 55 insertions(+), 17 deletions(-) diff --git a/openvidu-insecure-angular/src/app/app.component.html b/openvidu-insecure-angular/src/app/app.component.html index 72f9d964..676a41df 100644 --- a/openvidu-insecure-angular/src/app/app.component.html +++ b/openvidu-insecure-angular/src/app/app.component.html @@ -25,10 +25,10 @@
-
+
-
+
diff --git a/openvidu-insecure-angular/src/app/app.component.ts b/openvidu-insecure-angular/src/app/app.component.ts index 246dfd73..19a0c4e0 100644 --- a/openvidu-insecure-angular/src/app/app.component.ts +++ b/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 { diff --git a/openvidu-insecure-angular/src/app/stream.component.ts b/openvidu-insecure-angular/src/app/stream.component.ts index 51e23dad..7581fb48 100644 --- a/openvidu-insecure-angular/src/app/stream.component.ts +++ b/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(); } diff --git a/openvidu-insecure-js/web/app.js b/openvidu-insecure-js/web/app.js index 0affe0e2..d5046fee 100644 --- a/openvidu-insecure-js/web/app.js +++ b/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'; }