UI kits

A working call screen in a few lines for React, React Native or Flutter, plus the pieces and hooks to build your own. All three speak the same room protocol, so a Flutter phone, a React Native phone and a web browser can be in the same call.

#React

npm install @appsocom/react @appsocom/client

import { VideoConference } from "@appsocom/react";
import "@appsocom/react/styles.css";

<VideoConference url="https://api.appsocom.dev" token={token} onLeft={(reason) => console.log(reason)} />

VideoConference shows a pre-join screen (camera preview, mic level, device pickers, blur and noise suppression), then the grid, controls and chat, then an "ended" screen with Rejoin. Use prejoin={false} to join straight away, chat={false} to hide chat, and layout="grid" | "focus" to pick a layout.

Build your own screen from the pieces: SfuRoom, VideoGrid, ParticipantTile, ControlBar, DeviceSelect, PreJoin, ChatPanel, ConnectionBanner, VideoTrack.

<SfuRoom url={url} token={token}>
  <MyGrid />
</SfuRoom>

function MyGrid() {
  const participants = useParticipants();
  return participants.map((p) => <ParticipantTile key={p.id} participant={p} />);
}

Hooks: useRoom, useParticipants, useParticipant, useLocalParticipant, usePermissions, useTrack, useConnectionState, useActiveSpeakers, useIsSpeaking, useConnectionQuality, useRoomState, useRoomMetadata, useChat, useRaisedHands, useWaitingList, useRecording, useAgents, useTranscript, useEffects, useMediaDevices, useAudioLevel, useRoomEvent, useJoin.

#React Native

npm install @appsocom/react-native react-native-webrtc

import { VideoConference, requestMediaPermissions } from "@appsocom/react-native";

await requestMediaPermissions(); // Android runtime permissions
<VideoConference url="https://api.appsocom.dev" token={token} onLeft={() => navigation.goBack()} />

The same components and hooks exist as on the web. Long-press a tile for teacher controls.

Setup:

• iOS 13+: add NSCameraUsageDescription and NSMicrophoneUsageDescription to Info.plist, and the audio background mode to keep calls going in the background.
• Android: CAMERA, RECORD_AUDIO, MODIFY_AUDIO_SETTINGS, INTERNET and ACCESS_NETWORK_STATE, with minSdkVersion 24.

#Flutter

dependencies:
  appsocom_flutter: any

import 'package:appsocom_flutter/appsocom_flutter.dart';

VideoConference(url: 'https://api.appsocom.dev', token: token, onLeft: (reason) => Navigator.pop(context));

Or join without the UI:

final room = await Room.join(JoinOptions(url: 'https://api.appsocom.dev', token: token));
room.events.listen((e) {
  if (e is ParticipantJoined) print('${e.participant.name} joined');
});
room.toggleMic();

Room is a ChangeNotifier, so your widgets rebuild when anything changes. Theme the widgets with SfuTheme. Setup is the same as React Native: iOS usage strings and background audio, and Android permissions with minSdk 24.

#Web-only for now

End-to-end encryption, screen sharing from phones, background blur and noise suppression work on the web only for now. A token with e2ee: true is refused by the React Native and Flutter clients, rather than joining without encryption.