react-nativeexporeact-native-webviewvideocallreact-native-webrtc

Video Calling in Expo React Native Application

I am building a React Native Application using Expo and I want to integrate a 1:1 video calling functionality in the app.

From what I have researched so far on the topic is that I can use SDKs of various libraries like Twilio, Videosdk, VoxImplant etc to implement that feature or I have to use WebRtc in native project alongwith some mechanism to create rooms using socket.io and node and then join users in that room (not completely sure about it but something like this)

But both of these solutions require me to make changes in native files which are not present in expo app by default for which I think I have to run expo run:android and then make require changes in files (correct me if I am wrong)

Although on web I think its relatively easy to implement video calling using vanilla js or react js.

My question is if I implement a webpage that has video calling function and try to open it in webview in my expo react native app will the functionality work on app or not? has someone tried this before.

As I was exploring options I came BigBlueButton APIs and another question on Stackoverflow that is using Webview to connect to BigBlueButton APIs. Can I use this logic to implement something in expo app without ejecting or using any sdks? Will it work

What would be the best way to implement video calling in my expo app

Thanks

Solution

  • Utilizing Expo, you are essentially using 'React Native for Web', and with the new functionality of Expo config-plugins, almost all packages for React Native with auto-linking can be made to work with your Expo app, or more-or-less can have Config Plugins created for them.

    For your case, good news for you, you can make it all work on Expo managed workflow, just utilize expo-dev-client and the following library: react-native-webrtc

    There's an Expo config plugin for this package. So now all you have to do is just utilize the Web-based functionality of WebRTC, such as calling:

    navigator.mediaDevices.getUserMedia()..
navigator.mediaDevices.enumerateDevices()..
navigator.*

    And ensure it works properly on Web. Then, just make a platform hook at your App.js / First loaded module / before having these WebRTC based functionalities calling the aforementioned library's initializer. e.g:

    import React, { useEffect } from "react";
import { Platform } from "react-native";
import { registerGlobals } from "react-native-webrtc";

...

Platform.OS !== "web" && useEffect(() => {
    registerGlobals();
}, []);
...

    One more thing you'd have to do is that for Web, have the <video> element and for native apps, resolve it to <RTCView>, so essentially you could also make a platform specific component/module that resolves to either the web-only <video> tag or the native <RTCView> based on platform, like the example above. Perhaps even have the imports be resolved based on dependencies if you face any errors importing 'registerGlobals' at Web, for example.