App de Videollamada con React Native y ZegoCloud

En este tutorial vamos a crear un proyecto de React Native que permite hacer videollamadas usando el SDK de ZegoCloud, el cual es una plataforma que permite integrar el Streaming de datos de una forma sencillacd

Que es ZegoCloud

• En su version gratuita ofrece 10000 Minutos de forma gratuita

Aplicacion de React Native

npx react-native@latest init videocallreactnative

Si estas en Windows puede que a veces la terminal se quede congelada, simplemente presiona Enter para que continue

npx react-native run-android

o tambien puedes ejecutar:

npm start

Creación de Proyecto en ZegoCloud

Primero vamos a ir a ZegoCloud, Luego nos registramos y creamos un proyecto nuevo.

Hay muchas opciones pero la que mas nos interesa de momento es la que tiene Voice & Video Call, lo seleccionamos y luego damos click en Next.

Colocamos un Nombre a nuestro proyecto, por ejemplo en mi caso FirstVideoCallApp

Luego podemos decidir si integrar Zegocloud con UIKits o usando su SDK de nivel bajo, si escogemos la primera opciones es muy facil integrar Zegocloud, pero la segunda opcione es si queremos integrarlo con nuestras propia logica e interfaces.

En nuestro caso le daremos en Start wth UIKits, Esto tomara unos segundos en crearse.

Luego escogeras tu Framework con el que vas a trabajar, en nuestro caso sera React Native.

Luego podremos escoger algunas caracteristicas como:

• Call Invitation
• Standard Face Beautification
• Premium Face Beautification
• Screen sharing
• Virtual Avatar

De momento no vamos a escoger ninguna, asi que solo vamos a dejarlo en una app de videollamada por defecto.

Luego le daremos en Save & Start Integrate.

Con esto obtendras un AppId y un AppSign.

Instalación de la biblioteca

yarn add @zegocloud/zego-uikit-prebuilt-call-rn

yarn add @zegocloud/zego-uikit-rn react-delegate-component zego-express-engine-reactnative@3.2.0 react-native-sound @notifee/react-native@5.3.0 react-native-keep-awake@4.0.0

Luego crearemos un archivo en src/VideoCallScreen.jsx

import {Component} from 'react';
import {View} from 'react-native';
import {
  ZegoUIKitPrebuiltCall,
  ONE_ON_ONE_VIDEO_CALL_CONFIG,
} from '@zegocloud/zego-uikit-prebuilt-call-rn';

export default function VoiceCallPage(props) {
  return (
    <View style={styles.container}>
      <ZegoUIKitPrebuiltCall
        appID={2134280100}
        appSign={
          '59faf3f3ac0b5541239603fa34f560373feacac007e8f403a986147554b6127x'
        }
        userID={'test'}
        userName={'test'}
        callID={'test'}
        config={{
          ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
          onOnlySelfInRoom: () => {
            props.navigation.navigate('HomeScreen');
          },
          onHangUp: () => {
            props.navigation.navigate('HomeScreen');
          },
        }}
      />
    </View>
  );
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
};

Si tienes problemas con Prettier puedes añadir esto al eslintrc.js:

  'prettier/prettier': [
    'error',
    {
      endOfLine: 'auto',
    },
  ],

Añadiendo React Navigation

Primero crearemos otro Screen llamado HomeScreen en src/HomeScreen.jsx

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

npm install @react-navigation/native-stack

Luego actualiza el archivo App.tsx de esta forma:

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import VideoCallScreen from './screens/VideoCallScreen';

const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomeScreen">
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="VideoScreen" component={VideoCallScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Es proabable que tambien necesites añadir esta dependencia react-native-encrypted-storage como una dependencia extra, sino puedes obtener un error

Más Recursos

• Instalación de React native
• Ejemplo con React native