From 81bfd4c547a8ec7b8b427dd9c699c12d19c3ce7a Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Mon, 13 Mar 2017 18:55:50 +0100 Subject: [PATCH] Deprecated 'getUserMedia' fixed. webrtc-adapter from 2.0.4 to 3.2.0 --- README.md | 49 ++++++++++--------- openvidu-browser/README.md | 9 ++-- .../src/main/resources/package.json | 2 +- .../src/main/resources/ts/OpenVidu.ts | 21 +++++++- .../src/main/resources/ts/Stream.ts | 21 ++++++-- openvidu-demo/.project | 4 +- openvidu-ng-testapp/src/app/app.component.ts | 24 ++------- openvidu-test/.project | 10 +++- 8 files changed, 83 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index b34f325b..79baf844 100644 --- a/README.md +++ b/README.md @@ -17,20 +17,13 @@ First of all, you will need these packages: ```sudo apt-get update``` -**node** -```sudo apt-get install nodejs``` - -**npm** -```sudo apt-get install npm``` - -**maven** -```sudo apt-get install maven``` - -**angular-cli** -```sudo npm install -g @angular/cli``` - -**typescript** -```sudo npm install -g typescript``` +| Dependecy | Command | +| ------------- | -------------------------------------- | +| node | ```sudo apt-get install -g nodejs``` | +| npm | ```sudo apt-get install -g npm``` | +| maven | ```sudo apt-get install -g maven``` | +| angular-cli | ```sudo npm install -g @angular/cli``` | +| typescript | ```sudo npm install -g typescript``` | OpenVidu structure @@ -40,12 +33,13 @@ OpenVidu is composed by several modules which require some interconnections in o Here's a simple summary about the structure of OpenVidu: -![OpenVidu structure](https://drive.google.com/uc?export=view&id=0B61cQ4sbhmWScEVBaG00N3l4N00) +
![OpenVidu structure](https://drive.google.com/uc?export=view&id=0B61cQ4sbhmWSQ1AwaXlnRTR4djA)
- - **Kurento Media Server**: External module which provides the low-level functionalities related to the media transmission. +- **Kurento Media Server**: External module which provides the low-level functionalities related to the media transmission. How to *install* and *run* KMS in your development machine: +Ubuntu 14.04 LTS Trusty (64 bits) ``` echo "deb http://ubuntu.kurento.org trusty kms6" | sudo tee /etc/apt/sources.list.d/kurento.list wget -O - http://ubuntu.kurento.org/kurento.gpg.key | sudo apt-key add - @@ -53,16 +47,26 @@ sudo apt-get update sudo apt-get install kurento-media-server-6.0 ``` +Ubuntu 16.04 LTS Xenial (64 bits) +``` +echo "deb http://ubuntu.kurento.org xenial kms6" | sudo tee /etc/apt/sources.list.d/kurento.list +wget -O - http://ubuntu.kurento.org/kurento.gpg.key | sudo apt-key add - +sudo apt-get update +sudo apt-get install kurento-media-server-6.0 +``` + +Start and stop the service ``` sudo service kurento-media-server-6.0 start sudo service kurento-media-server-6.0 stop ``` -[Here](http://doc-kurento.readthedocs.io/en/stable/installation_guide.html) you can check the Kurento's official documentation. +[Here](http://doc-kurento.readthedocs.io/en/stable/installation_guide.html) you can check Kurento's official documentation. - - [**openvidu-browser**](https://github.com/pabloFuente/openvidu/tree/master/openvidu-browser): Javascript library used to connect the application with openvidu-server - - [**openvidu-server**](https://github.com/pabloFuente/openvidu/tree/master/openvidu-server): Java API which provides the connection with Kurento Media Server - - **app**: The application that makes use of OpenVidu. In this repo, [**openvidu-ng-testapp**](https://github.com/pabloFuente/openvidu/tree/master/openvidu-ng-testapp). +- [**openvidu-browser**](https://github.com/pabloFuente/openvidu/tree/master/openvidu-browser): Javascript library used to connect the application with openvidu-server +- [**kurento-utils-js**](https://github.com/pabloFuente/openvidu/tree/master/kurento-utils-js): Javascript set of reusable components that have been found useful during the development of WebRTC applications with Kurento +- [**openvidu-server**](https://github.com/pabloFuente/openvidu/tree/master/openvidu-server): Java API which provides the connection with Kurento Media Server +- **app**: The application that makes use of OpenVidu. In this repo, [**openvidu-ng-testapp**](https://github.com/pabloFuente/openvidu/tree/master/openvidu-ng-testapp). Setup for development @@ -72,16 +76,15 @@ After installing Kurento Media Server and forking or downloading the repo, these ``` sudo service kurento-media-server-6.0 start ``` - **/openvidu/openvidu-browser/src/main/resources** ``` npm install -npm link +sudo npm link ``` **/openvidu/openvidu-ng-testapp** ``` npm install -npm link openvidu-browser +sudo npm link openvidu-browser ng serve ``` **/openvidu** diff --git a/openvidu-browser/README.md b/openvidu-browser/README.md index 86c12333..b322aa8b 100644 --- a/openvidu-browser/README.md +++ b/openvidu-browser/README.md @@ -7,13 +7,16 @@ Copyright © 2013-2016 [Kurento]. Licensed under [Apache 2.0 License]. -kurento-room-client-js +openvidu-browser ====================== -Kurento Room Client JS is a Javascript library that can be used to implement -the client-side of group communications applications based on WebRTC. +openvidu-browser is a Javascript library that can be used to implement the client-side of group communications applications based on WebRTC. It uses WebSockets and JSON-RPC to interact with the server-side of the Room API. +Typescript is currently used to develop openvidu-browser. The class diagram is shown below: + +
![OpenVidu structure](https://drive.google.com/uc?export=view&id=0B61cQ4sbhmWSM1N3SmE5amt3TzA)
+ What is Kurento --------------- diff --git a/openvidu-browser/src/main/resources/package.json b/openvidu-browser/src/main/resources/package.json index 3f5eb7d8..2246a63f 100644 --- a/openvidu-browser/src/main/resources/package.json +++ b/openvidu-browser/src/main/resources/package.json @@ -16,7 +16,7 @@ "kurento-jsonrpc": "5.1.3", "wolfy87-eventemitter": "4.2.9", "@types/wolfy87-eventemitter": "4.2.31", - "webrtc-adapter":"2.0.4", + "webrtc-adapter":"3.2.0", "kurento-utils":"6.6.0", "uuid": "~2.0.1", "sdp-translator": "^0.1.15" diff --git a/openvidu-browser/src/main/resources/ts/OpenVidu.ts b/openvidu-browser/src/main/resources/ts/OpenVidu.ts index aa1849bb..437592b0 100644 --- a/openvidu-browser/src/main/resources/ts/OpenVidu.ts +++ b/openvidu-browser/src/main/resources/ts/OpenVidu.ts @@ -30,7 +30,7 @@ export class OpenVidu { constructor( private wsUri: string ) { if(this.wsUri.charAt(wsUri.length-1) != '/'){ - this.wsUri = '/'; + this.wsUri += '/'; } this.wsUri += 'room'; @@ -262,4 +262,23 @@ export class OpenVidu { + + toggleLocalVideoTrack(activate: boolean){ + this.getCamera().getWebRtcPeer().videoEnabled = activate; + } + + toggleLocalAudioTrack(activate: boolean){ + this.getCamera().getWebRtcPeer().audioEnabled = activate; + } + + publishLocalVideoAudio() { + this.toggleLocalVideoTrack(true); + this.toggleLocalAudioTrack(true); + } + + unpublishLocalVideoAudio() { + this.toggleLocalVideoTrack(false); + this.toggleLocalAudioTrack(false); + } + } diff --git a/openvidu-browser/src/main/resources/ts/Stream.ts b/openvidu-browser/src/main/resources/ts/Stream.ts index a8995745..26ca3593 100644 --- a/openvidu-browser/src/main/resources/ts/Stream.ts +++ b/openvidu-browser/src/main/resources/ts/Stream.ts @@ -268,15 +268,26 @@ export class Stream { } }; - navigator.getUserMedia( constraints, userStream => { + navigator.mediaDevices.getUserMedia({ + audio: true, + video: { + width: { + ideal: 1280 + }, + frameRate: { + ideal: 15 + } + } + }) + .then(userStream => { userStream.getAudioTracks()[0].enabled = this.sendAudio; userStream.getVideoTracks()[0].enabled = this.sendVideo; this.wrStream = userStream; - callback(undefined, this); - }, error => { - console.error( "Access denied", error ); - callback(error, undefined); + callback(undefined, this);}) + .catch(function(e) { + console.error( "Access denied", e ); + callback(e, undefined); }); } diff --git a/openvidu-demo/.project b/openvidu-demo/.project index c3498075..a6841310 100644 --- a/openvidu-demo/.project +++ b/openvidu-demo/.project @@ -16,12 +16,12 @@ - org.eclipse.m2e.core.maven2Builder + org.springframework.ide.eclipse.core.springbuilder - org.springframework.ide.eclipse.core.springbuilder + org.eclipse.m2e.core.maven2Builder diff --git a/openvidu-ng-testapp/src/app/app.component.ts b/openvidu-ng-testapp/src/app/app.component.ts index 82a5a6f2..dfd64ba6 100644 --- a/openvidu-ng-testapp/src/app/app.component.ts +++ b/openvidu-ng-testapp/src/app/app.component.ts @@ -92,10 +92,12 @@ export class AppComponent { session.addEventListener("stream-added", streamEvent => { this.addVideoTag(streamEvent.stream); + console.log("Stream " + streamEvent.stream + " added"); }); session.addEventListener("stream-removed", streamEvent => { this.removeVideoTag(streamEvent.stream); + console.log("Stream " + streamEvent.stream + " removed"); }); }); @@ -111,33 +113,15 @@ export class AppComponent { } updateToggleVideo(event) { - this.toggleVideoTrack(event.target.checked); + this.openVidu.toggleLocalVideoTrack(event.target.checked); let msg = (event.target.checked) ? 'Publishing video...' : 'Unpublishing video...' console.log(msg); } updateToggleAudio(event) { - this.toggleAudioTrack(event.target.checked); + this.openVidu.toggleLocalAudioTrack(event.target.checked); let msg = (event.target.checked) ? 'Publishing audio...' : 'Unpublishing audio...' console.log(msg); } - toggleVideoTrack(activate: boolean) { - this.openVidu.getCamera().getWebRtcPeer().videoEnabled = activate; - } - - toggleAudioTrack(activate: boolean) { - this.openVidu.getCamera().getWebRtcPeer().audioEnabled = activate; - } - - publishVideoAudio() { - this.toggleVideoTrack(true); - this.toggleAudioTrack(true); - } - - unpublishVideoAudio() { - this.toggleVideoTrack(false); - this.toggleAudioTrack(false); - } - } diff --git a/openvidu-test/.project b/openvidu-test/.project index 15865489..3359d1c3 100644 --- a/openvidu-test/.project +++ b/openvidu-test/.project @@ -6,12 +6,12 @@ - org.eclipse.jdt.core.javabuilder + org.eclipse.wst.common.project.facet.core.builder - org.eclipse.m2e.core.maven2Builder + org.eclipse.jdt.core.javabuilder @@ -20,10 +20,16 @@ + + org.eclipse.m2e.core.maven2Builder + + + org.springframework.ide.eclipse.core.springnature org.eclipse.jdt.core.javanature org.eclipse.m2e.core.maven2Nature + org.eclipse.wst.common.project.facet.core.nature