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 SfuClient 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-reactReact
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.
JavaScript (sans framework)
Pour un contrôle bas niveau, @lunionlab/meet-client-js expose SfuClient : connexion, publication et abonnement aux pistes. @lunionlab/meet-react est bâti dessus.
call.ts
import { SfuClient } from "@lunionlab/meet-client-js"; const client = new SfuClient( { onNewProducer: ({ producerId }) => client.consume(producerId), onPeerLeft: ({ peerId }) => {/* retirer le flux */}, }, access.url,); const welcome = await client.connect({ room: access.room, name: "Awa", token: access.token });await client.loadDevice(welcome.rtpCapabilities);await client.createSendTransport();await client.createRecvTransport(); const media = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });await client.produce(media.getVideoTracks()[0], "camera");await client.produce(media.getAudioTracks()[0], "mic");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.