Package Exports

streamoji-sdk-react
streamoji-sdk-react/dist/index.esm.js
streamoji-sdk-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (streamoji-sdk-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Streamoji SDK

A React SDK for avatar-based video meetings with real-time face tracking and peer-to-peer communication using MediaPipe face landmarks.

Installation

npm install streamoji-sdk

Quick Start

1. Wrap your app with StreamojiProvider

import { StreamojiProvider } from 'streamoji-sdk';

function App() {
  return (
    <StreamojiProvider>
      <YourApp />
    </StreamojiProvider>
  );
}

2. Authentication

const { isAuthenticated, streamojiSignIn } = useStreamoji();

useEffect(() => {
   // STEP 1: Sign in with your app's credentials
  await streamojiSignIn(
    userId, // your app's userID
    clientName, // your app's client name
    clientSecret, // your app's client secret 
    userProfile?.avatar // optional: avatar data if you have it
  );
})

if(!isAuthenticated) return null; // only render when isAuthencated is true

3. Creating Meeting

const meetingId = await createMeeting();

4.Rendering Avatars

    <StreamojiView
        meetingId={meetingId}
        userProfile={{
            userId: userProfile?.userId || "",
            avatar: userProfile?.avatar || undefined, // you will have to store the avatar data on your end
        }}
        videoSize={videoSize}
    />

(all in one component example)

Before rendering your app, you must authenticate the user using the streamojiSignIn method. Do not render your main app/UI until authentication is complete.

Example:

import { useStreamoji } from 'streamoji-sdk';

function AppWrapper() {
  const { isAuthenticated, streamojiSignIn } = useStreamoji();
  const [meetingId, setMeetingId] = useState();

  React.useEffect(() => {
    const authenticateUser = async () => {
      try {
        // STEP 1: Sign in with your app's credentials
        await streamojiSignIn(
          userId, // your app's userID
          clientName, // your app's client name
          clientSecret, // your app's client secret
          userProfile?.avatar // optional: avatar data if you have it
        );

        // STEP 2: Create or join a meeting
        const meetingId = await createMeeting();
        setMeetingId(meetingId);
      } catch (error) {
        console.error('Authentication failed:', error);
      }
    };

    authenticateUser();
  }, [streamojiSignIn]);

  if (!isAuthenticated || !meetingId) {
    return <div>Loading...</div>; // Or your loading/auth UI
  }

  return <div>
            <StreamojiView
                meetingId={meetingId}
                userProfile={{
                    userId: userProfile?.userId || "",
                    avatar: userProfile?.avatar || undefined, // you will have to store the avatar data on your end
                }}
                videoSize={videoSize}
            />
        </div>;
}

Important Note on Data Storage: Streamoji does not store any user information or avatar data. All user data, including avatar configurations, must be stored and managed by your application. We only facilitate the real-time avatar meetings. You are responsible for:

Storing and managing user profiles

Persisting avatar configurations

Managing authentication tokens

Handling user sessions

When joining meetings, you'll need to provide the avatar data that you've stored on your end. This gives you complete control over your users' data and ensures compliance with your data handling policies.

Core Components

StreamojiView

The main component for avatar-based meetings with face tracking.

CameraAvatarCreator

Component for creating avatars using camera input and face landmarks.

useStreamoji() Hook

StreamojiProvider and useStreamoji

The StreamojiProvider context and useStreamoji hook provide access to core Streamoji functionality:

const {
  userProfile,
    remoteUsers,
    currentMeetingId,
    createMeeting,
    joinMeeting,
    leaveMeeting,
    endMeeting,
    onPeerJoined,
    onPeerLeft,
    onMeetingEnded,
    removeOnPeerJoined,
    removeOnPeerLeft,
    removeOnMeetingEnded,
    clearAllOnPeerJoinedCallbacks,
    clearAllOnPeerLeftCallbacks,
    clearAllOnMeetingEndedCallbacks,
    clearAllOnMeetingCreatedCallbacks,
    clearMeetingSubscriptions,
    isAuthenticated,
    streamojiSignIn,
    onAvatarChanged,
    removeOnAvatarChanged,
    clearAllOnAvatarChangedCallbacks,
} = useStreamoji()

Types

StreamojiUserProfile: User profile interface
MeetingParticipant: Meeting participant interface
StreamojiMeeting: Meeting interface
StreamojiAvatar: Avatar data type