Sceenic - WatchTogether
  • Watch Together and Synchronization SDKs
  • Watch together SDK
    • Watch Together SDK overview
    • Authentication overview
    • Tutorials
      • Android
        • Android - Java/Kotlin
      • iOS
        • iOS Swift/Objective-c adapter
      • Web
        • Authentication
        • Create a New Project
        • Adding WT SDK library to the project
        • Installing the NPM package
        • Sample application
          • The conference skeleton
          • Connecting to a Session
          • How to turn on and off video and audio
          • How to change video quality
          • Errors handling
          • Leave the call
        • Support
    • API references
      • Android reference
        • Session
        • SessionListener
        • SessionReconnectListener
        • SessionConnectionListener
        • Participant
          • ParticipantType
        • SessionError
      • iOS Swift reference
        • Session
        • SessionDelegate
        • Participant
        • ParticipantActiveSpeakerDelegate
        • ParticipantDelegate
        • LocalParticipant
        • WTError
        • DataTypes
      • iOS Objective-c adapter reference
        • SessionAdapter
        • SessionAdapterDelegate
        • ParticipantAdapter
        • LocalParticipantAdapter
        • ParticipantAdpaterDelegate
        • ParticipantAdapterActiveSpeakerDelegate
        • NSError
        • DataTypes
      • Web reference
        • WT Session
          • WTSession.connect(sToken, pName, uC, m)
          • WTSession.connectAsAViewer(sToken, pName)
          • WTSession.connectWithSharingScreen(sToken, pName)
          • WTSession.disconnect()
          • WTSession.enableStats()
          • WTSession.sendMessage(msg)
          • WTSession.sendPlayerData(time)
          • async WTSession.getSessionState()
        • SessionListeners
          • WTSessionListeners.onConnected(fn)
          • WTSessionListeners.onDisconnected(fn)
          • WTSessionListeners.onStreamCreated(fn)
          • WTSessionListeners.onLocalStreamCreated(fn)
          • WTSessionListeners.onMosReport(fn)
          • WTSessionListeners.offMosReport(fn)
          • WTSessionListeners.onMessageReceived(fn)
          • WTSessionListeners.onSyncData(fn)
          • WTSessionListeners.onIceDisconnected(fn)
        • Participant
          • setMediaQuality
        • ParticipantListeners
        • ErrorsListeners
        • ReconnectListeners
        • MediaDevices
      • Cluster authentication service reference (CAS)
  • Synchronization SDK
    • Synchronization SDK overview
    • Tutorials
      • Android
        • Android - Java/Kotlin
      • iOS
        • iOS - Swift/Objective-c
      • Web
        • Installing the NPM package
        • Web - TypeScript/React
        • v2.0 Migration Guide
    • API references
      • Android reference
        • SynchSDK
        • SynchListener
      • iOS reference
        • SynchSDK
        • SynchListener
      • Web reference
  • Celebrity SDK
    • Celebrity SDK overview
    • Tutorials
      • Web
        • Installing the NPM package
        • Web - TypeScript/React
    • API References
      • Web reference
  • Chat SDK
    • Chat SDK overview
    • Tutorials
      • Web
        • Installing the NPM package
        • Web - TypeScript/React
    • API Refences
      • Web reference
  • Public Chat SDK
    • Public Chat SDK overview
    • Tutorials
      • Web
        • Installing the NPM package
        • Web - TypeScript/React
    • API Refences
      • Web reference
  • Celebrity Watch Party
    • Web application
    • Android
    • iOS
    • Celebrity View & Fan View
Powered by GitBook
On this page
  • Requirements
  • Create a project
  • Add Celebrity SDK library to your project
  • Basic usage
  • Participant
  • Celebrity
  • Support

Was this helpful?

  1. Celebrity SDK
  2. Tutorials
  3. Web

Web - TypeScript/React

PreviousInstalling the NPM packageNextAPI References

Last updated 3 years ago

Was this helpful?

Follow this step-by-step tutorial on how to use CelebritySDK.

Requirements

  • A Sceenic account

  • Code Editor( , )

  • NPM token for Celebrity SDK

Create a project

To create a project we recommended using the following stack: React + TypeScript.

  • Create an empty React + Typescript project

npx create-react-app my-app --template typescript  

Add Celebrity SDK library to your project

  • Create .npmrc file. In the project’s root folder

  • Put your Access Token inside //registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN.

  • Install Celebrity SDK via npm i @sscale/celebritysdk.

Basic usage

Participant

  • Add the following import:

 import { ParticipantAPI } from '@sscale/celebritysdk';
  • Create participant API instance:

const participantAPI = new ParticipantAPI();
participantAPI.setToken(WT_TOKEN);
  • Invite/check/uninvite celebrity to/from your live Watch Together session created using WT_TOKEN:

participantAPI.inviteCelebrity({})           
              .then(() => {})           
              .catch(e => {});
              
participantAPI.isCelebrityInvited()           
              .then((isInvited) => {})           
              .catch(e => {});

participantAPI.uninviteCelebrity()
              .then(() => {})           
              .catch(e => {});

Celebrity

  • Add the following import:

import { CelebrityAPI } from '@sscale/celebritysdk';
  • Create celebrity API instance:

const celebrityAPI = new CelebrityAPI();
  • Login with username/password provided by Sceenic:

celebrityAPI.login(username, password)            
            .then(() => {})            
            .catch(e => {});
  • Subscribe to the list of available video/audio chat sessions:

celebrityAPI.subscribe(    
    ({total, sessions}) => {},    
    (e) => {}
);
  • Unsubscribe/logout:

celebrityAPI.unsubscribe();

celebrityAPI.logout();

Support

For more information on NPM installation look .

Pass Watch Together access token () to participant API instance:

Have a look at the API Documentation .

Need technical support? Contact us at .

API Documentation
WebStorm
VS Code
Node >= 8.10 and npm >= 5.6
here
reference
here
Support@sceenic.co