@lunionlab/meet-react-native

SDK React Native (Expo) de lunion.meet : ajoutez des appels audio et vidéo temps réel à votre app mobile. Même hook que sur le web (useLunionRoom), mais construit sur react-native-webrtc.

Comme partout, le jeton est émis côté serveur (@lunionlab/meet-server-sdk) ; l'app mobile rejoint la salle avec access.url + access.token.

Installation

npx expo install @lunionlab/meet-react-native react-native-webrtc

1.2.0 : le SDK repose sur react-native-webrtc en RTCPeerConnection standard (l'API du hook useLunionRoom est inchangée).

react-native-webrtc contient du code natif : utilisez un development build Expo (npx expo prebuild puis npx expo run:ios / run:android). Il ne fonctionne pas dans Expo Go.

Permissions

Avec le plugin config dans app.json :

{
  "expo": {
    "plugins": [
      ["react-native-webrtc", {
        "cameraPermission": "Pour les appels vidéo",
        "microphonePermission": "Pour les appels audio"
      }]
    ]
  }
}

Partage d'écran (shareScreen)

shareScreen() / stopScreenShare() sont exposés par le hook (+ screenStream pour un aperçu local), mais le partage d'écran exige une configuration native de l'app hôte : MediaProjection + service au premier plan (Android), Broadcast Upload Extension + App Group (iOS). Sans cela, shareScreen() échoue au runtime. Guide complet : docs/SCREEN-SHARE-NATIVE.md — et des fichiers prêts à copier (manifeste, extension iOS) dans docs/screen-share-native/.

Depuis la 1.3.0, le partage survit à une coupure réseau : la capture est ré-attachée et ré-étiquetée automatiquement, sans repasser par la boîte de consentement système.

Utilisation

import { View } from "react-native";
import { useLunionRoom, VideoTrack } from "@lunionlab/meet-react-native";

export function CallScreen({ url, room, token }: { url: string; room: string; token: string }) {
  const { localStream, participants, toggleMic, toggleCamera, leave } = useLunionRoom({
    sfuUrl: url, // access.url
    room,        // access.room
    name: "Awa",
    token,       // access.token
  });

  return (
    <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}>
      <VideoTrack stream={localStream} mirror style={{ width: "50%", aspectRatio: 3 / 4 }} />
      {participants.map((p) => (
        <VideoTrack key={p.id} stream={p.stream} style={{ width: "50%", aspectRatio: 3 / 4 }} />
      ))}
    </View>
  );
}

Récupérer un jeton (côté serveur, Node)

import { RoomServiceClient } from "@lunionlab/meet-server-sdk";

const rooms = new RoomServiceClient("https://meet.lunion-lab.com/api/v1", process.env.LUNION_API_KEY!);
const room = await rooms.createRoom("Réunion produit");
const access = await rooms.createToken(room.slug, "user-42", { name: "Awa" });
// → renvoyez access.url, access.room, access.token à votre app mobile

API

| Élément | Rôle | |---|---| | useLunionRoom(options) | Connexion, caméra/micro, participants. Retourne localStream, participants, status, toggleMic, toggleCamera, switchCamera, leave. | | VideoTrack | Affiche un MediaStream (basé sur RTCView). | | ensureWebrtcGlobals() | Enregistre les globals WebRTC (appelé automatiquement par le hook). |

Nouveautés 1.2

• screenStream exposé (aperçu local du partage, à passer à un RTCView).
• Arrêt du partage depuis l’OS (notification Android / fin de broadcast iOS) reflété dans isScreenSharing/screenStream ; leave() et le démontage libèrent la capture.
• Guide de configuration native du partage d’écran (voir la section ci-dessus).

Nouveautés 1.1

• Reconnexion réseau automatique (option reconnect) — bascule 4G↔wifi / arrière-plan.
• Réception de la modération appliquée localement (autoApplyModeration, onModerated).
• Locuteur actif (activeSpeaker), enregistrement (startRecording/stopRecording, onRecordingStatus), salle pleine / nœud saturé (onRoomFull/onServerBusy).
• Mode récepteur pur (receiveOnly), partage d'écran (shareScreen/stopScreenShare), qualité par couche (setVideoLayerPolicy).

Détails dans le CHANGELOG.

Chiffrement de bout en bout (E2EE)

L'E2EE média par frame (chiffrement après l'encodeur, invisible du SFU) n'est pas disponible sur react-native-webrtc standard : cette version n'expose ni insertable streams / RTCRtpScriptTransform, ni FrameCryptor natif. Le SDK Flutter, lui, propose l'E2EE (FrameCryptor natif).

Pour l'E2EE sur React Native, il faut aujourd'hui un WebRTC natif doté d'un frame cryptor (ex. @livekit/react-native-webrtc) ou un module natif dédié — hors périmètre de ce paquet, qui cible react-native-webrtc standard. Suivi prévu si l'API arrive en amont.

Notes

• Repose sur react-native-webrtc en RTCPeerConnection standard (offer/answer sur /ws) : même protocole que le web et Flutter.
• À compiler dans un projet Expo/React Native réel (modules natifs requis).