From 259df2c5067db92695b0aadbe506a7b2203efd8d Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Thu, 1 Sep 2022 12:10:56 +0200 Subject: [PATCH] openvidu-react-native: Added network security and nginx config --- openvidu-react-native/App.js | 55 ++++++++++++------- .../android/app/src/main/AndroidManifest.xml | 6 +- .../main/res/xml/network_security_config.xml | 15 +++++ openvidu-react-native/nginx.conf | 52 ++++++++++++++++++ 4 files changed, 106 insertions(+), 22 deletions(-) create mode 100644 openvidu-react-native/android/app/src/main/res/xml/network_security_config.xml create mode 100644 openvidu-react-native/nginx.conf diff --git a/openvidu-react-native/App.js b/openvidu-react-native/App.js index 4cb9b4d7..e07c1562 100644 --- a/openvidu-react-native/App.js +++ b/openvidu-react-native/App.js @@ -5,7 +5,12 @@ import axios from 'axios'; import { OpenViduReactNativeAdapter, OpenVidu, RTCView } from 'openvidu-react-native-adapter'; -const APPLICATION_SERVER_URL = 'https://demos.openvidu.io/'; +/** + * It is necessary to change the APPLICATION_SERVER_URL for communicating with the server application. + * Also you need to edit the ./android/app/src/main/res/xml/network_security_config.xml file adding your IP as a domain + * for allowing to use the certs in an Android device. + */ +const APPLICATION_SERVER_URL = 'https://X.X.X.X/'; type Props = {}; export default class App extends Component { @@ -16,7 +21,7 @@ export default class App extends Component { ovReact.initialize(); this.state = { - mySessionId: 'testReact', + mySessionId: 'react-native', myUserName: 'Participant' + Math.floor(Math.random() * 100), session: undefined, mainStreamManager: undefined, @@ -165,7 +170,6 @@ export default class App extends Component { // --- 5) Get your own camera stream --- if (this.state.role !== 'SUBSCRIBER') { - // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video // element: we will manage it on our own) and with the desired properties @@ -182,15 +186,19 @@ export default class App extends Component { // --- 6) Publish your stream --- // Set the main video in the page to display our webcam and store our Publisher - this.setState({ - mainStreamManager: publisher, - videoSource: !properties.videoSource ? '1' : properties.videoSource, // 0: back camera | 1: user camera | - }, () => { - mySession.publish(publisher); - }); + this.setState( + { + mainStreamManager: publisher, + videoSource: !publisher.properties.videoSource ? '1' : publisher.properties.videoSource, // 0: back camera | 1: user camera | + }, + () => { + mySession.publish(publisher); + }, + ); } this.setState({ connected: true }); } catch (error) { + console.log(error); console.log('There was an error connecting to the session:', error.code, error.message); this.setState({ joinBtnEnabled: true, @@ -206,7 +214,7 @@ export default class App extends Component { if (stream.connection && JSON.parse(stream.connection.data) && JSON.parse(stream.connection.data).clientData) { return JSON.parse(stream.connection.data).clientData; } - } catch (error) { } + } catch (error) {} return ''; } @@ -432,19 +440,18 @@ export default class App extends Component { ); } - /** * -------------------------------------------- * GETTING A TOKEN FROM YOUR APPLICATION SERVER * -------------------------------------------- * The methods below request the creation of a Session and a Token to * your application server. This keeps your OpenVidu deployment secure. - * + * * In this sample code, there is no user control at all. Anybody could * access your application server endpoints! In a real production * environment, your application server must identify the user to allow * access to the endpoints. - * + * * Visit https://docs.openvidu.io/en/stable/application-server to learn * more about the integration of OpenVidu in your application server. */ @@ -454,16 +461,24 @@ export default class App extends Component { } async createSession(sessionId) { - const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions', { customSessionId: sessionId }, { - headers: { 'Content-Type': 'application/json', }, - }); + const response = await axios.post( + APPLICATION_SERVER_URL + 'api/sessions', + { customSessionId: sessionId }, + { + headers: { 'Content-Type': 'application/json' }, + }, + ); return response.data; // The sessionId } async createToken(sessionId) { - const response = await axios.post(APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', {}, { - headers: { 'Content-Type': 'application/json', }, - }); + const response = await axios.post( + APPLICATION_SERVER_URL + 'api/sessions/' + sessionId + '/connections', + {}, + { + headers: { 'Content-Type': 'application/json' }, + }, + ); return response.data; // The token } } @@ -473,7 +488,7 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', flex: 1, - paddingTop: Platform.OS == 'ios' ? 20 : 0, + paddingTop: Platform.OS === 'ios' ? 20 : 0, }, selfView: { width: '100%', diff --git a/openvidu-react-native/android/app/src/main/AndroidManifest.xml b/openvidu-react-native/android/app/src/main/AndroidManifest.xml index 512e5ee7..5b401108 100644 --- a/openvidu-react-native/android/app/src/main/AndroidManifest.xml +++ b/openvidu-react-native/android/app/src/main/AndroidManifest.xml @@ -18,13 +18,15 @@ android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" - android:theme="@style/AppTheme"> + android:theme="@style/AppTheme" + android:networkSecurityConfig="@xml/network_security_config"> + android:windowSoftInputMode="adjustResize" + android:exported="true"> diff --git a/openvidu-react-native/android/app/src/main/res/xml/network_security_config.xml b/openvidu-react-native/android/app/src/main/res/xml/network_security_config.xml new file mode 100644 index 00000000..655dbd3e --- /dev/null +++ b/openvidu-react-native/android/app/src/main/res/xml/network_security_config.xml @@ -0,0 +1,15 @@ + + + + + X.X.X.X + + localhost + + + + + + + + \ No newline at end of file diff --git a/openvidu-react-native/nginx.conf b/openvidu-react-native/nginx.conf new file mode 100644 index 00000000..36853fbb --- /dev/null +++ b/openvidu-react-native/nginx.conf @@ -0,0 +1,52 @@ +events { + worker_connections 512; +} +http { + upstream openvidu-deployment { + server host.docker.internal:4443; + } + upstream server-application { + server host.docker.internal:5000; + } + upstream client-application { + server host.docker.internal:4200; + } + server { + listen 443 ssl; + ssl_certificate /etc/nginx/certs/cert.pem; + ssl_certificate_key /etc/nginx/certs/key.pem; + + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Forwarded-Proto https; + proxy_headers_hash_bucket_size 512; + proxy_redirect off; + + # Websockets + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection "upgrade"; + + # OpenVidu deployment API + location /openvidu/api { + proxy_pass http://openvidu-deployment; + } + + # OpenVidu WebSocket + location ~ /openvidu$ { + proxy_pass http://openvidu-deployment; + } + + # Server application requests + location /api/ { + proxy_pass http://server-application; + } + + # Client application requests + location / { + proxy_pass http://client-application; + } + } +} \ No newline at end of file