Quick start: live streaming

flutter pub add gravix_rtc

npm install gravix-rtc

yarn add gravix-rtc

pnpm add gravix-rtc

<!-- android/app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <!-- Bluetooth headsets: Android 12+ needs BLUETOOTH_CONNECT -->
  <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
  <uses-permission android:name="android.permission.BLUETOOTH" android:maxSdkVersion="30" />
  <!-- ... your <application> ... -->
</manifest>

<!-- ios/Runner/Info.plist -->
<key>NSMicrophoneUsageDescription</key>
<string>Talk in calls</string>
<key>NSCameraUsageDescription</key>
<string>Video in calls</string>
<!-- Keep call audio playing with the screen locked or the app in the background -->
<key>UIBackgroundModes</key>
<array>
  <string>audio</string>
</array>

import 'package:gravix_rtc/gravix_rtc.dart';

// One token provider per signed-in user. It posts { room, identity, name, can_publish }
// to YOUR endpoint and caches each token until shortly before it expires.
final tokens = GravixTokenProvider.endpoint(
  Uri.parse('https://YOUR-BACKEND/rtc/token'),
  headers: {'Authorization': 'Bearer $sessionJwt'}, // your app's own login session
);

// One room service per live screen.
final room = GravixRoomService();

import { Room, GravixTokenProvider } from 'gravix-rtc';

// One token provider for the app. It posts { room, identity, name, can_publish }
// to YOUR endpoint with the user's session cookie, and caches each token.
const tokens = GravixTokenProvider.endpoint('https://YOUR-BACKEND/rtc/token', {
  credentials: 'include',
});

// One Room per live screen.
const room = new Room();

// Host: join, then publish the camera and the microphone.
final ok = await room.connectWithTokenProvider(
  tokenProvider: tokens,
  request: GravixTokenRequest(
    room: streamId,
    identity: userId,
    name: userName,
    canPublish: true, // a request; your server decides
  ),
  publishMic: true,
  enableVideo: true,
);
if (!ok) {
  // room.lastTokenError?.message says why, when your token endpoint failed
}

// Your own preview. isCameraEnabled turns true once the camera is published.
ValueListenableBuilder<bool>(
  valueListenable: room.isCameraEnabled,
  builder: (context, on, _) {
    final track = room.localVideoTrack;
    return on && track != null
        ? VideoTrackRenderer(track, fit: VideoViewFit.cover)
        : const Center(child: Text('Starting camera…'));
  },
);

import { connectWithTokenProvider } from 'gravix-rtc';

// Host: join, then publish the camera and the microphone.
await connectWithTokenProvider(room, {
  tokenProvider: tokens,
  request: { room: streamId, identity: userId, name: userName, canPublish: true },
});
const camera = await room.localParticipant.setCameraEnabled(true);
await room.localParticipant.setMicrophoneEnabled(true);

// Your own preview: attach() returns a <video> element.
const preview = camera?.videoTrack?.attach();
if (preview) document.getElementById('stage')!.appendChild(preview);

// Audience: join without publishing and show the host's camera.
VideoTrack? hostVideo;

room.onRemoteVideoTrack = (uid, track) => setState(() => hostVideo = track);
room.onRemoteVideoTrackRemoved = (uid) => setState(() => hostVideo = null);

await room.connectWithTokenProvider(
  tokenProvider: tokens,
  request: GravixTokenRequest(room: streamId, identity: userId, name: userName),
  publishMic: false,
  enableVideo: false,
);

// The host's audio plays on its own. Show the video with:
// hostVideo == null ? const Text('Waiting for the host…') : VideoTrackRenderer(hostVideo!, fit: VideoViewFit.cover)

import { RoomEvent, connectWithTokenProvider } from 'gravix-rtc';

const stage = document.getElementById('stage')!;

// Audience: the host's camera and mic arrive as subscribed tracks.
room
  .on(RoomEvent.TrackSubscribed, (track) => {
    stage.appendChild(track.attach()); // a <video> or <audio> element
  })
  .on(RoomEvent.TrackUnsubscribed, (track) => {
    track.detach().forEach((el) => el.remove());
  })
  // Browsers can block sound until the user clicks. Show a button, then call room.startAudio().
  .on(RoomEvent.AudioPlaybackStatusChanged, () => {
    showUnmuteButton(!room.canPlaybackAudio);
  });

await connectWithTokenProvider(room, {
  tokenProvider: tokens,
  request: { room: streamId, identity: userId, name: userName }, // canPublish defaults to false
});

// Leave the stream. A host leaving also stops the camera and mic.
await room.disconnect();

// When the screen goes away for good.
await room.dispose();

// Leave the stream. This also stops the host's camera and mic.
await room.disconnect();

import 'package:flutter/material.dart';
import 'package:gravix_rtc/gravix_rtc.dart';

/// One screen for both roles. isHost comes from your app;
/// the token from your server decides whether this user may really publish.
class LivePage extends StatefulWidget {
  const LivePage({
    super.key,
    required this.tokens,
    required this.streamId,
    required this.userId,
    required this.userName,
    required this.isHost,
  });

  final GravixTokenProvider tokens;
  final String streamId;
  final String userId;
  final String userName;
  final bool isHost;

  @override
  State<LivePage> createState() => _LivePageState();
}

class _LivePageState extends State<LivePage> {
  final room = GravixRoomService();
  VideoTrack? hostVideo; // what the audience watches
  String? error;

  @override
  void initState() {
    super.initState();
    room.onRemoteVideoTrack = (uid, track) {
      if (mounted) setState(() => hostVideo = track);
    };
    room.onRemoteVideoTrackRemoved = (uid) {
      if (mounted) setState(() => hostVideo = null);
    };
    _join();
  }

  Future<void> _join() async {
    final ok = await room.connectWithTokenProvider(
      tokenProvider: widget.tokens,
      request: GravixTokenRequest(
        room: widget.streamId,
        identity: widget.userId,
        name: widget.userName,
        canPublish: widget.isHost,
      ),
      publishMic: widget.isHost,
      enableVideo: widget.isHost,
    );
    if (!ok && mounted) {
      setState(() => error = room.lastTokenError?.message ?? 'Could not join the stream');
    }
  }

  @override
  void dispose() {
    room.disconnect().whenComplete(room.dispose);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (error != null) return Center(child: Text(error!));
    return Stack(
      children: [
        Positioned.fill(child: widget.isHost ? _preview() : _hostVideo()),
        if (widget.isHost)
          Positioned(left: 0, right: 0, bottom: 32, child: _hostControls()),
      ],
    );
  }

  // Host: your own camera.
  Widget _preview() => ValueListenableBuilder<bool>(
        valueListenable: room.isCameraEnabled,
        builder: (context, on, _) {
          final track = room.localVideoTrack;
          if (!on || track == null) return const Center(child: Text('Starting camera…'));
          return VideoTrackRenderer(track, fit: VideoViewFit.cover);
        },
      );

  // Audience: the host's camera. The host's audio plays on its own.
  Widget _hostVideo() {
    final track = hostVideo;
    if (track == null) return const Center(child: Text('Waiting for the host…'));
    return VideoTrackRenderer(track, fit: VideoViewFit.cover);
  }

  Widget _hostControls() => Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ValueListenableBuilder<bool>(
            valueListenable: room.isMicMuted,
            builder: (context, muted, _) => IconButton.filled(
              tooltip: muted ? 'Unmute' : 'Mute',
              icon: Icon(muted ? Icons.mic_off : Icons.mic),
              onPressed: () => room.setMicEnabled(muted),
            ),
          ),
          const SizedBox(width: 16),
          IconButton.filled(
            tooltip: 'Flip camera',
            icon: const Icon(Icons.cameraswitch),
            onPressed: room.switchCamera,
          ),
          const SizedBox(width: 16),
          IconButton.filled(
            tooltip: 'End live',
            icon: const Icon(Icons.call_end),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      );
}

import { useEffect, useRef, useState } from 'react';
import { Room, RoomEvent, GravixTokenProvider, connectWithTokenProvider } from 'gravix-rtc';

// One provider for the whole app. It sends the user's session cookie to YOUR backend
// and caches each token until shortly before it expires.
const tokens = GravixTokenProvider.endpoint('https://YOUR-BACKEND/rtc/token', {
  credentials: 'include',
});

type Props = { streamId: string; userId: string; userName: string; isHost: boolean };
type Status = 'joining' | 'live' | 'ended' | 'error';

export function LiveStream({ streamId, userId, userName, isHost }: Props) {
  const stageRef = useRef<HTMLDivElement>(null);
  const roomRef = useRef<Room | null>(null);
  const [status, setStatus] = useState<Status>('joining');
  const [audioBlocked, setAudioBlocked] = useState(false);

  useEffect(() => {
    const stage = stageRef.current!;
    const room = new Room();
    roomRef.current = room;
    let cancelled = false;

    room
      // Audience: the host's camera and mic arrive as subscribed tracks.
      .on(RoomEvent.TrackSubscribed, (track) => {
        stage.appendChild(track.attach()); // a <video> or <audio> element
      })
      .on(RoomEvent.TrackUnsubscribed, (track) => {
        track.detach().forEach((el) => el.remove());
      })
      // Browsers can block sound until the user clicks something.
      .on(RoomEvent.AudioPlaybackStatusChanged, () => {
        setAudioBlocked(!room.canPlaybackAudio);
      })
      .on(RoomEvent.Disconnected, () => {
        if (!cancelled) setStatus('ended');
      });

    (async () => {
      try {
        await connectWithTokenProvider(room, {
          tokenProvider: tokens,
          request: { room: streamId, identity: userId, name: userName, canPublish: isHost },
        });
        if (cancelled) return;
        if (isHost) {
          // Host: publish camera and mic, and show your own preview.
          const camera = await room.localParticipant.setCameraEnabled(true);
          await room.localParticipant.setMicrophoneEnabled(true);
          const preview = camera?.videoTrack?.attach();
          if (preview) stage.appendChild(preview);
        }
        if (!cancelled) setStatus('live');
      } catch {
        if (!cancelled) setStatus('error');
      }
    })();

    return () => {
      cancelled = true;
      roomRef.current = null;
      void room.disconnect(); // also stops the host's camera and mic
      stage.replaceChildren();
    };
  }, [streamId, userId, userName, isHost]);

  const label = {
    joining: 'Joining…',
    live: isHost ? 'You are live' : 'Watching',
    ended: 'The stream has ended',
    error: 'Could not join the stream',
  }[status];

  return (
    <section>
      <p role="status">{label}</p>
      {audioBlocked && (
        <button type="button" onClick={() => roomRef.current?.startAudio()}>
          Tap to hear the stream
        </button>
      )}
      <div ref={stageRef} className="stage" />
    </section>
  );
}