lunion.meetdocs

SDK Web (React & JavaScript)

Rejoignez une salle depuis le navigateur. Avec React, un seul hook gère la connexion, la caméra/micro et les autres participants ; en JavaScript pur, le LunionMeetClient vous donne le contrôle bas niveau.

Le flux

Votre serveur émet un jeton avec @lunionlab/meet-server-sdk(voir « Jetons d'accès »). Votre app web reçoit access.url et access.token, puis rejoint la salle.

Installer

terminal
npm i @lunionlab/meet-react

React

Passez access.url et access.token au hook useLunionRoom. Caméra, micro et abonnement aux autres participants sont automatiques.

Call.tsx
"use client";import { useLunionRoom, VideoTrack } from "@lunionlab/meet-react"; export function Call({ url, room, token }: { url: string; room: string; token: string }) {  const { localStream, participants, micEnabled, toggleMic, leave } = useLunionRoom({    sfuUrl: url,    room,    name: "Awa",    token,  });   return (    <div className="grid grid-cols-2 gap-2">      <VideoTrack stream={localStream} muted />      {participants.map((p) => (        <VideoTrack key={p.id} stream={p.stream} />      ))}      <button onClick={toggleMic}>{micEnabled ? "Couper" : "Activer"} le micro</button>      <button onClick={leave}>Quitter</button>    </div>  );}

Ce que renvoie le hook

  • localStream, participants : vos flux à afficher.
  • status : idle · connecting · connected · error.
  • toggleMic(), toggleCamera(), leave() : les contrôles courants.

Lecture de l'audio (web) : un élément média par pair

Sur le web, l'audio d'un pair n'est joué que par l'élément qui porte son flux (un VideoTrack ou un <video>/<audio>), tant qu'il n'est pas muted. Dans l'exemple ci-dessus, <VideoTrack stream={p.stream} /> joue déjà le son des pairs (seul votreflux est muted, pour éviter l'écho). Si vous construisez une interface audio seule (avatars, sans vidéo), montez tout de même un élément caché par pair, sinon on ne les entend pas :
AudioOnly.tsx
// UI audio (avatars) : le son passe par un <audio> caché. Jamais pour SOI (écho).{participants.map((p) => (  <audio key={p.id} autoPlay ref={(el) => { if (el) el.srcObject = p.stream; }} />))}

Sur mobile natif, rien à faire

En React Native et Flutter, l'audio distant est joué automatiquement par la couche WebRTC native. Cette précaution ne concerne que le web (où le son doit passer par un élément du DOM).

JavaScript (sans framework)

Pour un contrôle bas niveau, @lunionlab/meet-client-js expose LunionMeetClient : connexion, publication et abonnement aux pistes. @lunionlab/meet-react est bâti dessus.

call.ts
import { LunionMeetClient } from "@lunionlab/meet-client-js"; const client = new LunionMeetClient(  { url: access.url },  {    // Piste distante : streams[0].id = id du pair source (abonnement automatique).    onTrack: (track, streams) => attach(streams[0], track),    onPeerLeft: ({ peerId }) => {/* retirer le flux */},  },); const welcome = await client.connect(access.room, "Awa", undefined, access.token); // Publier caméra (simulcast auto) + microawait client.publishCamera();await client.publishMic();

Fonctionnalités avancées

Le hook useLunionRoom couvre tout le plan de contrôle (options et valeurs de retour, toutes optionnelles et rétro-compatibles).

  • Reconnexion réseau automatique (option reconnect, activée par défaut) : sur coupure d'une session établie, le WS est ré-ouvert, la connexion reconstruite et les pistes re-publiées. Statut reconnecting pendant la reprise.
  • Chat, réactions, présence : envoi (sendChat, sendReaction, updateState) et réception (callbacks onChat, onReaction, onPeerState).
  • Modération & hôte : isHost, admit/deny/moderate/setRole/transferHost, réception via onModerated (appliquée localement, autoApplyModeration) et onJoinRequest.
  • Locuteur actif (activeSpeaker, onActiveSpeaker) et enregistrement (startRecording/stopRecording, onRecordingStatus).
  • Partage d'écran (shareScreen/stopScreenShare, screenStream) — avec shareScreen({ audio: true }) pour publier aussi le son système/onglet, et un partage qui survit à la reconnexion réseau. En client bas niveau : publishScreen() de @lunionlab/meet-client-js. Le mode récepteur pur reste disponible (receiveOnly).
  • Scalabilité : setSubscribed(n'abonner que les tuiles visibles → virtualisation de grille) et setVideoLayerPolicy (qualité par couche).

Chiffrement de bout en bout (E2EE)

Sur le web, l'E2EE média (AES-GCM par frame, via les insertable streams) est prise en charge par l'application lunion.meet et exposée comme brique (E2eeTransformer de @lunionlab/meet-client-js). Elle dépend du navigateur (Chrome/Edge/Safari récents). Le SDK Flutter propose aussi l'E2EE nativement ; React Native non (voir sa page).

Un seul protocole

Web, React Native et Flutter parlent exactement le même protocole. Vos utilisateurs se retrouvent dans la même salle, quel que soit leur appareil.
PrécédentWebhooksSuivantReact Native (Expo)