SDK React Native (Expo)
Le même hook que sur le web, sur iOS et Android. lunion_react-native s'appuie sur react-native-webrtc et le même protocole que le SDK web.
Le flux
Votre serveur émet un jeton avec@lunionlab/meet-server-sdk(voir « Jetons d'accès »). Votre app mobile reçoit url, room et token, puis rejoint avec useLunionRoom.1. Installer
terminal
npx expo install @lunionlab/meet-react-native react-native-webrtc mediasoup-clientDevelopment build requis
react-native-webrtc contient du code natif : utilisez un development build (npx expo prebuild puis npx expo run:ios / run:android). Il ne fonctionne pas dans Expo Go.Permissions (app.json)
app.json
{ "expo": { "plugins": [ ["react-native-webrtc", { "cameraPermission": "Pour les appels vidéo", "microphonePermission": "Pour les appels audio" }] ] }}2. Récupérer un jeton (côté serveur)
Le jeton est émis par votre backend. Ne mettez jamais votre clé d'API dans l'app.
server.ts
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 mobile3. Rejoindre la salle
Le hook useLunionRoom gère la connexion, la caméra/micro et les participants. Affichez chaque flux avec le composant VideoTrack.
CallScreen.tsx
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, room, name: "Awa", 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> );}Contrôles
toggleMic()/toggleCamera()— couper/activer.switchCamera()— basculer entre caméra avant et arrière.status—idle·connecting·connected·error.leave()— quitter et libérer la caméra/micro.
Même protocole que le web et Flutter
Le SDK React Native réutilise@lunionlab/meet-client-js : web et mobile se rejoignent dans la même salle.