neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored react-native tutorial

Browse Source
This commit is contained in:
csantosm 2020-07-03 10:57:17 +02:00
parent ae63211805
commit 2faf8b4a98
11 changed files with 56 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
openvidu-react-native/App.js
View File

@ -1,11 +1,3 @@
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
@ -20,11 +12,10 @@ import {
Image,
PermissionsAndroid,
} from 'react-native';
import { OpenVidu } from 'openvidu-browser';
import { RTCView } from './node_modules/openvidu-browser/node_modules/react-native-webrtc';
import axios from 'axios';
import { OpenViduReactNativeAdapter, OpenVidu, RTCView, StreamManager } from 'openvidu-react-native-adapter';
const OPENVIDU_SERVER_URL = 'https://demos.openvidu.io';
const OPENVIDU_SERVER_SECRET = 'MY_SECRET';
@ -34,8 +25,11 @@ export default class App extends Component<Props> {
constructor(props) {
super(props);
const openViduReact = new OpenViduReactNativeAdapter();
openViduReact.initialize();
this.state = {
mySessionId: 'SessionA',
mySessionId: 'testReact',
myUserName: 'Participant' + Math.floor(Math.random() * 100),
session: undefined,
mainStreamManager: undefined,
@ -48,10 +42,12 @@ export default class App extends Component<Props> {
};
}
componentDidMount() {}
componentDidMount() {
//this.joinSession();
}
componentWillUnmount() {
//this.leaveSession();
this.leaveSession();
}
async checkAndroidPermissions() {
@ -113,13 +109,11 @@ export default class App extends Component<Props> {
// --- 3) Specify the actions when events take place in the session ---
// On every new Stream received...
mySession.on('streamCreated', (event) => {
mySession.on('streamCreated', async (event) => {
// Subscribe to the Stream to receive it. Second parameter is undefined
// so OpenVidu doesn't create an HTML video by its own
const subscriber = mySession.subscribe(event.stream, undefined);
var subscribers = this.state.subscribers;
const subscriber = await mySession.subscribeAsync(event.stream, undefined);
var subscribers = Array.from(this.state.subscribers);
subscribers.push(subscriber);
// Update the state with the new subscribers
this.setState({
@ -131,7 +125,7 @@ export default class App extends Component<Props> {
mySession.on('streamDestroyed', (event) => {
event.preventDefault();
// Remove the stream from 'subscribers' array
this.deleteSubscriber(event.stream.streamManager);
this.deleteSubscriber(event.stream);
});
// --- 4) Connect to the session with a valid user token ---
@ -190,17 +184,15 @@ export default class App extends Component<Props> {
return '';
}
deleteSubscriber(streamManager) {
setTimeout(() => {
let subscribers = this.state.subscribers;
const index = subscribers.indexOf(streamManager, 0);
if (index > -1) {
subscribers.splice(index, 1);
this.setState({
subscribers: subscribers,
});
}
});
deleteSubscriber(stream) {
var subscribers = Array.from(this.state.subscribers);
const index = subscribers.indexOf(stream.streamManager, 0);
if (index > -1) {
subscribers.splice(index, 1);
this.setState({
subscribers: subscribers,
});
}
}
leaveSession() {
@ -367,23 +359,17 @@ export default class App extends Component<Props> {
<View style={[styles.container, { flexDirection: 'row', flexWrap: 'wrap' }]}>
{this.state.subscribers.map((item, index) => {
if (!!item) {
return (
<View key={index}>
<Text>{this.getNicknameTag(item.stream)}</Text>
<RTCView
zOrder={0}
objectFit="cover"
style={styles.remoteView}
ref={(rtcVideo) => {
if (!!rtcVideo) {
item.addVideoElement(rtcVideo);
}
}}
/>
</View>
);
}
return(
<View key={index}>
<Text>{this.getNicknameTag(item.stream)}</Text>
<RTCView
zOrder={0}
objectFit="cover"
style={styles.remoteView}
streamURL={item.stream.getMediaStream().toURL()}
/>
</View>
);
})}
</View>
</ScrollView>

13
openvidu-react-native/android/app/build.gradle
View File

@ -178,12 +178,10 @@ android {
}
packagingOptions {
pickFirst '**/armeabi-v7a/libc++_shared.so'
pickFirst '**/x86/libc++_shared.so'
pickFirst '**/arm64-v8a/libc++_shared.so'
pickFirst '**/x86_64/libc++_shared.so'
pickFirst '**/x86/libjsc.so'
pickFirst '**/armeabi-v7a/libjsc.so'
pickFirst "lib/armeabi-v7a/libc++_shared.so"
pickFirst "lib/arm64-v8a/libc++_shared.so"
pickFirst "lib/x86/libc++_shared.so"
pickFirst "lib/x86_64/libc++_shared.so"
}
}
@ -191,9 +189,10 @@ dependencies {
implementation project(':WebRTCModule')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
if (enableHermes) {
def hermesPath = "../../node_modules/hermesvm/android/";
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {

3
openvidu-react-native/android/app/src/main/AndroidManifest.xml
View File

@ -22,7 +22,8 @@
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

4
openvidu-react-native/android/app/src/main/java/com/openvidu_react_native/MainApplication.java
View File

@ -1,11 +1,9 @@
package com.openvidu_react_native;
import android.app.Application;
import android.util.Log;
import com.facebook.react.PackageList;
import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
import com.facebook.react.bridge.JavaScriptExecutorFactory;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;

6
openvidu-react-native/android/build.gradle
View File

@ -3,17 +3,16 @@
buildscript {
ext {
buildToolsVersion = "28.0.3"
minSdkVersion = 16
minSdkVersion = 24
compileSdkVersion = 28
targetSdkVersion = 28
supportLibVersion = "28.0.0"
}
repositories {
google()
jcenter()
}
dependencies {
classpath("com.android.tools.build:gradle:3.4.1")
classpath("com.android.tools.build:gradle:3.5.2")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
@ -34,5 +33,6 @@ allprojects {
google()
jcenter()
maven { url 'https://www.jitpack.io' }
}
}

4
openvidu-react-native/android/gradle.properties
View File

@ -17,5 +17,9 @@
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true
# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true

2
openvidu-react-native/android/gradle/wrapper/gradle-wrapper.properties vendored
View File

@ -1,5 +1,5 @@
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-6.0.1-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

2
openvidu-react-native/android/gradlew vendored
View File

@ -126,7 +126,7 @@ if $darwin; then
fi
# For Cygwin, switch paths to Windows format before running java
if $cygwin ; then
if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
APP_HOME=`cygpath --path --mixed "$APP_HOME"`
CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
JAVACMD=`cygpath --unix "$JAVACMD"`

4
openvidu-react-native/android/gradlew.bat vendored
View File

@ -5,7 +5,7 @@
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem http://www.apache.org/licenses/LICENSE-2.0
@rem https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@ -97,4 +97,4 @@ exit /b 1
:mainEnd
if "%OS%"=="Windows_NT" endlocal
:omega
:omega

2
openvidu-react-native/android/settings.gradle
View File

@ -1,4 +1,4 @@
rootProject.name = 'openvidu_react_native'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':WebRTCModule', ':app'
project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/openvidu-browser/node_modules/react-native-webrtc/android')
project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')

2
openvidu-react-native/package.json
View File

@ -10,7 +10,7 @@
},
"dependencies": {
"axios": "0.19.2",
"openvidu-browser": "2.14.0",
"openvidu-react-native-adapter": "file:openvidu-react-native-adapter-2.14.0.tgz",
"react": "16.13.1",
"react-native": "0.62.2"
},