diff --git a/openvidu-insecure-angular/README.md b/openvidu-insecure-angular/README.md index a3a7ac1f..5023e470 100644 --- a/openvidu-insecure-angular/README.md +++ b/openvidu-insecure-angular/README.md @@ -41,7 +41,7 @@ OpenVidu is composed by the three modules displayed on the image above in its in 4. _openvidu-server_ and _Kurento Media Server_ must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need [Docker CE](https://store.docker.com/search?type=edition&offering=community)): ```bash - docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 -e openvidu.security=false openvidu/openvidu-server-kms + docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 openvidu/openvidu-server-kms ``` 5. Go to [`localhost:4200`](http://localhost:4200) to test the app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of _openvidu-server_ when you first try to join a video-call. diff --git a/openvidu-insecure-angular/src/app/app.component.ts b/openvidu-insecure-angular/src/app/app.component.ts index 1f304c70..4a322863 100644 --- a/openvidu-insecure-angular/src/app/app.component.ts +++ b/openvidu-insecure-angular/src/app/app.component.ts @@ -46,7 +46,8 @@ export class AppComponent { // Init OpenVidu object this.OV = new OpenVidu(); - // We will join the video-call "sessionId". This parameter must start with the URL of OpenVidu Server + // We will join the video-call "sessionId". As there's no server, this parameter must start with the URL of + // OpenVidu Server (with secure websocket protocol: "wss://") and must include the OpenVidu secret at the end this.session = this.OV.initSession('wss://' + location.hostname + ':8443/' + this.sessionId + '?secret=MY_SECRET'); diff --git a/openvidu-insecure-js/README.md b/openvidu-insecure-js/README.md index fa47ae8c..30d077f5 100644 --- a/openvidu-insecure-js/README.md +++ b/openvidu-insecure-js/README.md @@ -40,7 +40,7 @@ OpenVidu is composed by the three modules displayed on the image above in its in 4. _openvidu-server_ and _Kurento Media Server_ must be up and running in your development machine. The easiest way is running this Docker container which wraps both of them (you will need [Docker CE](https://store.docker.com/search?type=edition&offering=community)): ```bash - docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 -e openvidu.security=false openvidu/openvidu-server-kms + docker run -p 8443:8443 --rm -e KMS_STUN_IP=193.147.51.12 -e KMS_STUN_PORT=3478 openvidu/openvidu-server-kms ``` 5. Go to [`localhost:8080`](http://localhost:8080) to test the app once the server is running. The first time you use the docker container, an alert message will suggest you accept the self-signed certificate of _openvidu-server_ when you first try to join a video-call. diff --git a/openvidu-insecure-js/web/app.js b/openvidu-insecure-js/web/app.js index 0a54c16e..6ad58562 100644 --- a/openvidu-insecure-js/web/app.js +++ b/openvidu-insecure-js/web/app.js @@ -2,6 +2,107 @@ var OV; var session; +/* OPENVIDU METHODS */ + +function joinSession() { + + var sessionId = document.getElementById("sessionId").value; + var token = document.getElementById("participantId").value; + + // --- 1) Get an OpenVidu object and init a session with a sessionId --- + + // Init OpenVidu object + OV = new OpenVidu(); + + // We will join the video-call "sessionId". As there's no server, this parameter must start with the URL of + // OpenVidu Server (with secure websocket protocol: "wss://") and must include the OpenVidu secret at the end + session = OV.initSession("wss://" + location.hostname + ":8443/" + sessionId + '?secret=MY_SECRET'); + + + // --- 2) Specify the actions when events take place --- + + // On every new Stream received... + session.on('streamCreated', function (event) { + + // Subscribe to the Stream to receive it. HTML video will be appended to element with 'video-container' id + var subscriber = session.subscribe(event.stream, 'video-container'); + + // When the HTML video has been appended to DOM... + subscriber.on('videoElementCreated', function (event) { + + // Add a new

element for the user's nickname just below its video + appendUserData(event.element, subscriber.stream.connection); + }); + }); + + // On every Stream destroyed... + session.on('streamDestroyed', function (event) { + + // Delete the HTML element with the user's nickname. HTML videos are automatically removed from DOM + removeUserData(event.stream.connection); + }); + + + // --- 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 + session.connect(token, '{"clientData": "' + token + '"}', function (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 --- + + var publisher = OV.initPublisher('video-container', { + audio: true, + video: true, + quality: 'MEDIUM' + }); + + // When our HTML video has been added to DOM... + publisher.on('videoElementCreated', function (event) { + initMainVideo(event.element, token); + appendUserData(event.element, token); + event.element['muted'] = true; + }); + + // --- 5) Publish your stream --- + + session.publish(publisher); + + } else { + console.log('There was an error connecting to the session:', error.code, error.message); + } + }); + + document.getElementById('session-title').innerText = sessionId; + document.getElementById('join').style.display = 'none'; + document.getElementById('session').style.display = 'block'; + + return false; +} + +function leaveSession() { + + // --- 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 + removeAllUserData(); + + // Back to 'Join session' page + document.getElementById('join').style.display = 'block'; + document.getElementById('session').style.display = 'none'; +} + +/* OPENVIDU METHODS */ + + + + /* APPLICATION SPECIFIC METHODS */ window.addEventListener('load', function () { @@ -13,8 +114,8 @@ window.onbeforeunload = function () { }; function generateParticipantInfo() { - $("#sessionId").val("SessionA"); - $("#participantId").val("Participant" + Math.floor(Math.random() * 100)); + document.getElementById("sessionId").value = "SessionA"; + document.getElementById("participantId").value = "Participant" + Math.floor(Math.random() * 100); } function appendUserData(videoElement, connection) { @@ -61,106 +162,7 @@ function addClickListener(videoElement, userData) { function initMainVideo(videoElement, userData) { document.querySelector('#main-video video').src = videoElement.src; document.querySelector('#main-video p').innerHTML = userData; - $('#main-video video').prop('muted', true); + document.querySelector('#main-video video')['muted'] = true; } -/* APPLICATION SPECIFIC METHODS */ - - - -/* OPENVIDU METHODS */ - -function joinSession() { - - var sessionId = document.getElementById("sessionId").value; - var token = document.getElementById("participantId").value; - - // --- 1) Get an OpenVidu object and init a session with a sessionId --- - - // Init OpenVidu object - OV = new OpenVidu(); - - // 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 + '?secret=MY_SECRET'); - - - // --- 2) Specify the actions when events take place --- - - // On every new Stream received... - session.on('streamCreated', function (event) { - - // Subscribe to the Stream to receive it. HTML video will be appended to element with 'subscriber' id - var subscriber = session.subscribe(event.stream, 'video-container'); - - // When the HTML video has been appended to DOM... - subscriber.on('videoElementCreated', function (event) { - - // Add a new

element for the user's nickname just below its video - appendUserData(event.element, subscriber.stream.connection); - }); - }); - - // On every Stream destroyed... - session.on('streamDestroyed', function (event) { - - // Delete the HTML element with the user's nickname. HTML videos are automatically removed from DOM - removeUserData(event.stream.connection); - }); - - - // --- 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 - session.connect(token, '{"clientData": "' + token + '"}', function (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 --- - - var publisher = OV.initPublisher('video-container', { - audio: true, - video: true, - quality: 'MEDIUM' - }); - - // When our HTML video has been added to DOM... - publisher.on('videoElementCreated', function (event) { - initMainVideo(event.element, token); - appendUserData(event.element, token); - $(event.element).prop('muted', true); - }); - - // --- 5) Publish your stream --- - - session.publish(publisher); - - } else { - console.log('There was an error connecting to the session:', error.code, error.message); - } - }); - - document.getElementById('session-title').innerText = sessionId; - document.getElementById('join').style.display = 'none'; - document.getElementById('session').style.display = 'block'; - - return false; -} - -function leaveSession() { - - // --- 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 - removeAllUserData(); - - // Back to 'Join session' page - document.getElementById('join').style.display = 'block'; - document.getElementById('session').style.display = 'none'; -} - -/* OPENVIDU METHODS */ \ No newline at end of file +/* APPLICATION SPECIFIC METHODS */ \ No newline at end of file diff --git a/openvidu-js-java/docker/supervisord.conf b/openvidu-js-java/docker/supervisord.conf index d04ae405..6b77bbc1 100644 --- a/openvidu-js-java/docker/supervisord.conf +++ b/openvidu-js-java/docker/supervisord.conf @@ -10,7 +10,7 @@ redirect_stderr=true priority=2 [program:openvidu-server] -command=/bin/bash -c "java -Dspring.profiles.active=ngrok -Dopenvidu.security=true -jar /openvidu-server.jar" +command=/bin/bash -c "java -Dspring.profiles.active=ngrok -jar /openvidu-server.jar" redirect_stderr=true priority=3 diff --git a/openvidu-js-java/src/main/resources/application-container.properties b/openvidu-js-java/src/main/resources/application-container.properties index 4888827b..8a4b7c07 100644 --- a/openvidu-js-java/src/main/resources/application-container.properties +++ b/openvidu-js-java/src/main/resources/application-container.properties @@ -5,5 +5,4 @@ server.ssl.enabled: false openvidu.url: http://localhost:5000/ openvidu.secret: MY_SECRET -openvidu.security: true openvidu.publicurl: ngrok