Integración · App móvil

La sala dentro de tu app móvil #

Con @confirio/react-native-sdk la videollamada se abre dentro de tu app de React Native, con la espera y las pantallas de cierre de Confirio. Tu backend crea la sala igual que en Primeros pasos y le pasa a la app sólo el joinUrl.

Probalo con la app de ejemplo #

En github.com/confirio/ejemplo-react-native hay una app lista para compilar: pegás el link de participante de una sala y entrás. La sala la creás desde “Probar API” en el Panel o con el script del ejemplo, que usa tu API key como lo haría tu backend.

git clone https://github.com/confirio/ejemplo-react-native.git
cd ejemplo-react-native
npm install
npx react-native run-android

Instalalo en tu app #

El SDK usa módulos nativos que se instalan en tu app junto con él. Instalá las versiones con las que está probado:

npm install --legacy-peer-deps @confirio/react-native-sdk@0.1.2 \
    @amplitude/analytics-react-native@1.4.13 \
    @giphy/react-native-sdk@4.1.0 \
    @react-native-async-storage/async-storage@1.23.1 \
    @react-native-clipboard/clipboard@1.14.3 \
    @react-native-community/netinfo@11.1.0 \
    @react-native-community/slider@4.5.6 \
    @react-native-google-signin/google-signin@10.1.0 \
    @sayem314/react-native-keep-awake@1.3.1 \
    react-native-background-timer@2.4.1 \
    react-native-calendar-events@2.2.0 \
    react-native-default-preference@1.4.4 \
    react-native-device-info@12.1.0 \
    react-native-gesture-handler@2.24.0 \
    react-native-get-random-values@1.11.0 \
    react-native-immersive-mode@2.0.2 \
    react-native-orientation-locker@1.5.0 \
    react-native-pager-view@6.8.1 \
    react-native-performance@5.1.2 \
    react-native-safe-area-context@5.5.2 \
    react-native-screens@4.11.1 \
    react-native-sound@0.11.2 \
    react-native-splash-view@0.0.18 \
    react-native-svg@15.11.2 \
    react-native-video@6.13.0 \
    react-native-watch-connectivity@1.1.0 \
    react-native-webrtc@124.0.4 \
    react-native-webview@13.13.5 \
    react-native-worklets-core@1.6.2

Abrí la sala #

La pantalla recibe el joinUrl que devolvió tu backend y se lo pasa al componente sin modificarlo. Para que ocupe toda la pantalla, dale flex: 1.

import { ConfirioRoom } from '@confirio/react-native-sdk';

// joinUrl llega de tu backend, que creó la sala con la API key.
export function VideollamadaScreen({ joinUrl, navigation }) {
  return (
    <ConfirioRoom
      joinUrl={joinUrl}
      participantName="Ana"
      participantRef="turno_4821"
      onJoined={() => console.log('Entró a la sala')}
      onEnd={(reason) => navigation.goBack()}
      style={{ flex: 1 }}
    />
  );
}

No pongas la API key en la app. Cualquiera puede sacarla del paquete instalado. La app sólo necesita el joinUrl.

Qué recibe el componente #

• joinUrl: el link de participante, tal como lo devuelve la API. Los links de moderación no se aceptan: quien modera entra desde el navegador.
• participantName: el nombre con el que la ven los demás. Es obligatorio y la sala no lo vuelve a pedir: con el link y el nombre, entra directo. Si la sala todavía no abrió, espera; si tiene sala de espera, pide entrar sola.
• participantRef (opcional): un código de tu sistema para asociar la conexión, de 1 a 64 letras, números, guiones o guiones bajos. Mirá participantRef.
• onJoined (opcional): se llama cuando la persona entra a la sala.
• onEnd (opcional): se llama al salir de la sala, con left (salió), ended (la reunión terminó), unavailable (la sala ya no está disponible) o not_found (la sala no existe).

Permisos #

El SDK declara los permisos de cámara y micrófono y los pide al abrir la sala. Tu app no tiene que hacer nada más.

R8 #

Si tu app compila con minifyEnabled true, no hace falta agregar reglas: el paquete trae las suyas y R8 las aplica solo.