web-core

Web Core SDK

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Samples
• Structure

About The Project

This SDK provides low-level APIs for building live video, audio & livestream experiences in web apps using Dyte. Clients can integrate this SDK in their apps and build their own, fully custom experiences on top of it, as per their requirement.

This project is written in vanilla Typescript so that it is compatible with all popular Javascript/Typescript frameworks. There is a react wrapper which provides helper methods for using web-core with React. The build system uses vite, which internally uses esbuild.

Built With

• Typescript
• vite

Getting Started

Prerequisites

• npm

Installation

1. Clone the git repository

   git clone git@github.com:dyte-in/web-core.git
   

2. Install the dependencies

   Note: Since some dependencies may be on a private npm registry on GitHub, there is a .npmrc file which has the configuration for installing these dependencies. However, you need to set the NPM_TOKEN for it to work correct. The NPM_TOKEN can be set to a GitHub Personal Access Token which has read:packages and read:repository permissions.

   npm install
   

3. Run the development build, with hot reload functionality

   npm run dev
   

4. Now, you can open http://localhost:5173 which runs the index.html file. You can access the meeting object in the browser console on this web page.

Samples

web-core is used extensively in ui-kit, which can serve as a great example on how to use the APIs exposed by this library. You can check out ui-kit here.

Structure

web-core is build with Typescript (4.5.0+), using an object-oriented approach (therefore, there should be minimal (if any) stand-alone functions outside of a class). It is designed to be used as a library, and is not intended to be used as a standalone application.

For generating the SDK and demo, we use vite. The demo application is located in index.html. The following npm commands can be used for local development and generating production builds:

• npm run dev: Run the demo application in development mode.
• npm run build: Generate a production build for the library.
• npm run build:demo: Generate a production build for the demo application.

This repository has been set up with ESLint for linting, and semantic-release for versioning and releases.

The repository has been broken down into the following modules (inside the src/ folder):

• client: This consists of the classes that a user of the library would have to interact directly with. This also consists of the DyteClient class which is the primary export of the library. Other classes in this module include DyteSelf, DyteParticipant, DytePlugin, etc.

• api: REST API based communication with the server is handled in this module.

• browser: This module contains code related to browser identification, and recognizing the capabilities of the browser on which web-core is running.

• controllers: This module consists of classes that are responsible for populating the data into all the client module classes. Any data-manipulation logic should be placed in this module. All other modules consist of helper classes which are invoked inside this module.

• media: All local media-related classes are located in this module. This is responsible for getting local audio and video streams from the user’s device, and preparing them for being sent to the room-node. Any abstractions (such as WebRTC related handling of local streams) should be abstracted inside this module.

• roomNode: This module consists of classes that are responsible for handling the communication between the client and the room-node. Methods in this module use the socket layer to create producers, consumers, and receive other socket events from room-node. room-node is a proxy term for referring to the hive and cloudflare media systems. The roomNode unit handles the WebRTC transport, including creation of a RTCPeerConnection, managing the creation of producers and consumers while updating the SDP, and also message passing over the WebRTC data channels.

• sockets: Creation and initialization of sockets is handled in this module. Once the socket service is created, it’s handed over to the room-node for usage.

• store: The store module contains of an internal event emitter. This is responsible for event-based communication within the entire SDK.

• utils: Miscellaneous helper methods that do not fit into any other module are located here. This includes logging, configuration, etc.