React 原生 firebase+webrtc 进行视频通话
Posted
技术标签:
【中文标题】React 原生 firebase+webrtc 进行视频通话【英文标题】：React native firebase+webrtc for video call 【发布时间】：2021-10-19 01:58:18 【问题描述】：我无法使用 RNFirebase 实现视频通话。每当我点击通话按钮时。我会遇到以下问题。
错误
请查找以下文件的代码。
MainApplication.java
package com.videocall;
import android.app.Application;
import android.content.Context;
import android.net.Uri;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.videocall.generated.BasePackageList;
import org.unimodules.adapters.react.ReactAdapterPackage;
import org.unimodules.adapters.react.ModuleRegistryAdapter;
import org.unimodules.adapters.react.ReactModuleRegistryProvider;
import org.unimodules.core.interfaces.Package;
import org.unimodules.core.interfaces.SingletonModule;
import expo.modules.updates.UpdatesController;
import com.facebook.react.bridge.JSIModulePackage;
import com.swmansion.reanimated.ReanimatedJSIModulePackage;
import java.lang.reflect.InvocationTargetException;
import java.util.Arrays;
import java.util.List;
import javax.annotation.Nullable;
import com.twiliorn.library.TwilioPackage;
import io.invertase.firebase.app.ReactNativeFirebaseAppPackage;
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.auth.RNFirebaseAuthPackage;
import io.invertase.firebase.firestore.RNFirebaseFirestorePackage;
public class MainApplication extends Application implements ReactApplication
private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(
new BasePackageList().getPackageList()
);
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this)
@Override
public boolean getUseDeveloperSupport()
return BuildConfig.DEBUG;
@Override
protected List<ReactPackage> getPackages()
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
packages.add(new ReactNativeFirebaseAppPackage())
packages.add(new RNFirebaseFirestorePackage());
return packages;
@Override
protected String getJSMainModuleName()
return "index";
@Override
protected JSIModulePackage getJSIModulePackage()
return new ReanimatedJSIModulePackage();
@Override
protected @Nullable String getJSBundleFile()
if (BuildConfig.DEBUG)
return super.getJSBundleFile();
else
return UpdatesController.getInstance().getLaunchAssetFile();
@Override
protected @Nullable String getBundleAssetName()
if (BuildConfig.DEBUG)
return super.getBundleAssetName();
else
return UpdatesController.getInstance().getBundleAssetName();
;
@Override
public ReactNativeHost getReactNativeHost()
return mReactNativeHost;
@Override
public void onCreate()
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
if (!BuildConfig.DEBUG)
UpdatesController.initialize(this);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
@Override
protected List getPackages()
@SuppressWarnings("UnnecessaryLocalVariable")
List packages = new PackageList(this).getPackages();
// add the following code
//packages.add(new TwilioPackage());
return packages;
/**
* Loads Flipper in React Native templates. Call this in the onCreate method with something like
* initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
*
* @param context
* @param reactInstanceManager
*/
private static void initializeFlipper(
Context context, ReactInstanceManager reactInstanceManager)
if (BuildConfig.DEBUG)
try
/*
We use reflection here to pick up the class that initializes Flipper,
since Flipper library is not available in release mode
*/
Class<?> aClass = Class.forName("com.videocall.ReactNativeFlipper");
aClass
.getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
.invoke(null, context, reactInstanceManager);
catch (ClassNotFoundException e)
e.printStackTrace();
catch (NoSuchMethodException e)
e.printStackTrace();
catch (IllegalAccessException e)
e.printStackTrace();
catch (InvocationTargetException e)
e.printStackTrace();
App.tsx
import React, useState, useRef,useEffect from "react";
import StatusBar from "expo-status-bar";
import StyleSheet, Text, View from "react-native";
import Button from "./components/Button";
import GettingCall from "./components/GettingCall";
import Video from "./components/Video";
import
EventOnAddStream,
MediaStream,
RTCPeerConnection,
RTCIceCandidate,
RTCSessionDescription,
RTCSessionDescriptionType,
from "react-native-webrtc";
import Utils from "./Utils";
import firestore,
FirebaseFirestoreTypes,
from "@react-native-firebase/firestore";
const configuration = iceServers: [ url: "stun:stun.l.google.com:19302" ] ;
export default function App()
const [localStream, setLocalStream] = useState<MediaStream | null>();
const [remoteStream, setRemoteStream] = useState<MediaStream | null>();
const [gettingCall, setGettingCall] = useState(false);
const pc = useRef<RTCPeerConnection>();
const connecting = useRef(false);
useEffect(() =>
const cRef = firestore().collection("meet").doc("chatId");
const subscribe = cRef.onSnapshot((snapshot) =>
const data = snapshot.data();
//On answer start the call
if (pc.current && !pc.current.remoteDescription && data && data.answer)
pc.current.setRemoteDescription(new RTCSessionDescription(data.answer));
//if there is offer for chatId set the getting call flag
if (data && data.offer && !connecting.current)
setGettingCall(true);
);
//On delete of collection call hangup
//The other side has clicked on hangup
const subscribeDelete = cRef.collection("callee").onSnapshot((snapshot) =>
snapshot.docChanges().forEach((change) =>
if (change.type == "removed")
hangup();
);
);
return () =>
subscribe()
subscribeDelete()
, []);
const setupWebrtc = async () =>
try
pc.current = new RTCPeerConnection(configuration);
//Get the audio and video stream for the call
const stream = await Utils.getStream();
if (stream)
setLocalStream(stream);
pc.current.addStream(stream);
//Get teh remote stream once it is available
pc.current.onaddstream = (event: EventOnAddStream) =>
setRemoteStream(event.stream);
;
catch (err)
console.log("Error", err);
;
const create = async () =>
try
console.log("Calling");
connecting.current = true;
//setUp webrtc
await setupWebrtc();
//Document for the call
const cRef = firestore().collection("meet").doc("chatId");
//Exchange the ICE candidates between the caller and callee
collectIceCandidates(cRef, "caller", "callee");
if (pc.current)
//Create offer for the call
//Store the offer under the document
const offer = await pc.current.createOffer();
pc.current.setLocalDescription(offer);
const cWithOffer =
offer:
type: offer.type,
sdp: offer.sdp,
,
;
cRef.set(cWithOffer);
catch (err)
console.log("Error", err);
;
const join = async () =>
console.log("Joining the call");
connecting.current = true;
setGettingCall(false);
const cRef = firestore().collection("meet").doc("chatId");
const offer = await (await cRef.get()).data()?.offer;
if (offer)
//setup webstrc
await setupWebrtc();
//Exchange the ICE candidates
//Check the parameters.Its reversed.Since the joining part is callee
collectIceCandidates(cRef, "callee", "caller");
if (pc.current)
pc.current.setRemoteDescription(new RTCSessionDescription(offer));
//Create the answer for the call
//Update the document with answer
const answer = await pc.current.createAnswer();
pc.current.setLocalDescription(answer);
const cWithAnswer =
answer:
type: answer.type,
sdp: answer.sdp,
,
;
cRef.update(cWithAnswer);
;
/*
* For disconnecting the call,close the connection,release the stream.
* Delete the document for the call
*/
const hangup = async () =>
setGettingCall(false);
connecting.current = false;
streamCleanUp();
firestoreCleanUp();
if (pc.current)
pc.current.close();
;
//Helper function
const streamCleanUp = async () =>
if (localStream)
localStream.getTracks().forEach((t) => t.stop());
localStream.release();
setLocalStream(null);
setRemoteStream(null);
;
const firestoreCleanUp = async () =>
const cRef = firestore().collection("meet").doc("chatId");
if (cRef)
const calleeCandidate = await cRef.collection("callee").get();
calleeCandidate.forEach(async (candidate) =>
await candidate.ref.delete();
);
const callerCandidate = await cRef.collection("caller").get();
callerCandidate.forEach(async (candidate) =>
await candidate.ref.delete();
);
cRef.delete();
;
const collectIceCandidates = async (
cRef: FirebaseFirestoreTypes.DocumentReference<FirebaseFirestoreTypes.DocumentData>,
localName: string,
remoteName: string
) =>
const candidateCollection = cRef.collection(localName);
if (pc.current)
//On new ICE candidate add it to firestore
pc.current.onicecandidate = (event) =>
if (event.candidate)
candidateCollection.add(event.candidate);
;
//Get the ICE candidate added to firestore and update the local PC
cRef.collection(remoteName).onSnapshot((snapshot) =>
snapshot.docChanges().forEach((change: any) =>
if (change.type == "added")
const candidate = new RTCIceCandidate(change.doc.data());
pc.current?.addIceCandidate(candidate);
);
);
;
//Displays the getting call component
if (gettingCall)
return <GettingCall hangup=hangup join=join />;
//Displays local stream on calling
//Displays both local and remote stream once call is connected
if (localStream)
return (
<Video
hangup=hangup
localStream=localStream
remoteStream=remoteStream
/>
);
//Displays the call button
return (
<View style=styles.container>
/* <Button iconName='video'backgroundColor='grey'></Button> */
<Button iconName="video" backgroundColor="grey" onPress=create />
</View>
);
const styles = StyleSheet.create(
container:
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
,
);
android>build.gradle
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript
ext
buildToolsVersion = "29.0.3"
minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30
repositories
google()
jcenter()
dependencies
classpath("com.android.tools.build:gradle:4.1.0")
classpath 'com.google.gms:google-services:4.3.10'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
allprojects
repositories
mavenLocal()
maven
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
maven
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
google()
jcenter()
maven url 'https://www.jitpack.io'
android>app>build.gradle
apply plugin: "com.android.application"
apply plugin: 'com.google.gms.google-services'
import com.android.build.OutputFile
/**
* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
* and bundleReleaseJsAndAssets).
* These basically call `react-native bundle` with the correct arguments during the Android build
* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
* bundle directly from the development server. Below you can see all the possible configurations
* and their defaults. If you decide to add a configuration block, make sure to add it before the
* `apply from: "../../node_modules/react-native/react.gradle"` line.
*
* project.ext.react = [
* // the name of the generated asset file containing your JS bundle
* bundleAssetName: "index.android.bundle",
*
* // the entry file for bundle generation. If none specified and
* // "index.android.js" exists, it will be used. Otherwise "index.js" is
* // default. Can be overridden with ENTRY_FILE environment variable.
* entryFile: "index.android.js",
*
* // https://reactnative.dev/docs/performance#enable-the-ram-format
* bundleCommand: "ram-bundle",
*
* // whether to bundle JS and assets in debug mode
* bundleInDebug: false,
*
* // whether to bundle JS and assets in release mode
* bundleInRelease: true,
*
* // whether to bundle JS and assets in another build variant (if configured).
* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
* // The configuration property can be in the following formats
* // 'bundleIn$productFlavor$buildType'
* // 'bundleIn$buildType'
* // bundleInFreeDebug: true,
* // bundleInPaidRelease: true,
* // bundleInBeta: true,
*
* // whether to disable dev mode in custom build variants (by default only disabled in release)
* // for example: to disable dev mode in the staging build type (if configured)
* devDisabledInStaging: true,
* // The configuration property can be in the following formats
* // 'devDisabledIn$productFlavor$buildType'
* // 'devDisabledIn$buildType'
*
* // the root of your project, i.e. where "package.json" lives
* root: "../../",
*
* // where to put the JS bundle asset in debug mode
* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
*
* // where to put the JS bundle asset in release mode
* jsBundleDirRelease: "$buildDir/intermediates/assets/release",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in debug mode
* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
*
* // where to put drawable resources / React Native assets, e.g. the ones you use via
* // require('./image.png')), in release mode
* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
*
* // by default the gradle tasks are skipped if none of the JS files or assets change; this means
* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
* // date; if you have any other folders that you want to ignore for performance reasons (gradle
* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
* // for example, you might want to remove it from here.
* inputExcludes: ["android/**", "ios/**"],
*
* // override which node gets called and with what additional arguments
* nodeExecutableAndArgs: ["node"],
*
* // supply additional arguments to the packager
* extraPackagerArgs: []
* ]
*/
project.ext.react = [
enableHermes: (findProperty('expo.jsEngine') ?: "jsc") == "hermes",
]
apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/expo-constants/scripts/get-app-config-android.gradle"
apply from: "../../node_modules/expo-updates/scripts/create-manifest-android.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
/**
* The preferred build flavor of javascriptCore.
*
* For example, to use the international variant, you can use:
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
*
* The international variant includes ICU i18n library and necessary data
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
* give correct results when using with locales other than en-US. Note that
* this variant is about 6MiB larger per architecture than default.
*/
def jscFlavor = 'org.webkit:android-jsc:+'
/**
* Whether to enable the Hermes VM.
*
* This should be set on project.ext.react and mirrored here. If it is not set
* on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
* and the benefits of using Hermes will therefore be sharply reduced.
*/
def enableHermes = project.ext.react.get("enableHermes", false);
android
compileSdkVersion rootProject.ext.compileSdkVersion
compileOptions
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
defaultConfig
applicationId "com.videocall"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
multiDexEnabled true
splits
abi
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
signingConfigs
debug
storeFile file('debug.keystore')
storePassword 'android'
keyAlias 'androiddebugkey'
keyPassword 'android'
buildTypes
debug
signingConfig signingConfigs.debug
release
// Caution! In production, you need to generate your own keystore file.
// see https://reactnative.dev/docs/signed-apk-android.
signingConfig signingConfigs.debug
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
// applicationVariants are e.g. debug, release
applicationVariants.all variant ->
variant.outputs.each output ->
// For each separate APK per architecture, set a unique version code as described here:
// https://developer.android.com/studio/build/configure-apk-splits.html
def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
dependencies
implementation project(':react-native-twilio-video-webrtc')
implementation project(path: ":@react-native-firebase_app")
implementation "com.google.firebase:firebase-firestore: android.firebase.firestore "
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDynamicVersion
implementation "com.facebook.react:react-native:+" // From node_modules
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
debugImplementation("com.facebook.flipper:flipper:$FLIPPER_VERSION")
exclude group:'com.facebook.fbjni'
debugImplementation("com.facebook.flipper:flipper-network-plugin:$FLIPPER_VERSION")
exclude group:'com.facebook.flipper'
exclude group:'com.squareup.okhttp3', module:'okhttp'
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:$FLIPPER_VERSION")
exclude group:'com.facebook.flipper'
addUnimodulesDependencies()
if (enableHermes)
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
else
implementation jscFlavor
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy)
from configurations.compile
into 'libs'
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.videocall">
<uses-permission android:name="android.permission.INTERNET"/>
<!-- OPTIONAL PERMISSIONS, REMOVE WHATEVER YOU DO NOT NEED -->
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<!-- These require runtime permissions on M -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<!-- END OPTIONAL PERMISSIONS -->
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
<meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="YOUR-APP-URL-HERE"/>
<meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="YOUR-APP-SDK-VERSION-HERE"/>
<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
</application>
</manifest>
请告知如何进行。我在 android>app 根文件夹中也有 google-services.json
【问题讨论】：
【参考方案1】：由于某种原因，您的评论已被删除。请检查您是否将 google-service.json 放置在正确的位置。文件的命名很重要。确保最后没有添加数字。它应该与您下载的一样。
【讨论】：
不，没有添加数字。 你的世博版本是什么。 "expo": "~42.0.1"，是 世博会cli。尝试将其更新为最新版本。并再次创建项目。以上是关于React 原生 firebase+webrtc 进行视频通话的主要内容，如果未能解决你的问题，请参考以下文章