Git Product home page Git Product logo

web-sdks's Introduction

Web SDKs

This monorepo contains all the packages required to integrate 100ms on the web.

What is included?

The packages folder contains all the SDK's of 100ms. Here is a brief overview of them:

Directory Package Description Link
hms-video-store @100mslive/hms-video-store This package contains the core SDK and the reactive store parts. README
react-icons @100mslive/react-icons This contains all the icons used in the 100ms prebuilt. README
react-sdk @100mslive/react-sdk This contains the base React Hooks and some commonly used functionalities as React Hooks. README
roomkit-react @100mslive/roomkit-react This contains the React components used in the Prebuilt and the Prebuilt component itself. README
roomkit-web @100mslive/roomkit-web This is a web component port of the HMSPrebuilt component from the roomkit-react. If you are not using React,this can be used as a web component. README

For full documentation, visit 100ms.live/docs


How to integrate?

The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences.

There are two ways you can add 100ms to your apps:

  1. Custom UI

    • 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI.
    • Related packages include: @100mslive/react-sdk, @100mslive/hms-video-store and @100mslive/react-icons.
    • Get started with integrating the SDK using the How to Guide.

Navigate to react-sdk for the base React Hooks and some commonly used functionalities by clicking here.

  1. 100ms Prebuilt

    • 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code.
    • Related packages include: roomkit-react and roomkit-web.
    • Get started with 100ms Prebuilt using the Prebuilt Quickstart for Web.

Navigate to roomkit-react for the React components used in Prebuilt and the Prebuilt component itself by clicking here.


Banner

100ms Prebuilt Cross Platform Support

Client Repository Docs Example
Web web-sdks Link prebuilt-react-integration
Android 100ms-android Link AndroidPrebuiltDemo
iOS 100ms-roomkit-ios Link 100ms-roomkit-example
Flutter 100ms-flutter Link hms_room_kit/example
React Native 100ms-react-native Link react-native-room-kit/example


Setup

Local Setup

Node version 18.0.0 or later

if you are using a different version in other projects, use nvm to manage node versions.

git clone https://github.com/100mslive/web-sdks.git
cd web-sdks
yarn install
yarn build

Running Sample Prebuilt

cd examples/prebuilt-react-integration
yarn dev

http://locahost:<port>/<room-code>

Once you run yarn dev, the localhost link with the port will be generated automatically. Just get the roomCode from 100ms dashboard and append at the end

Testing Changes Locally

Run yarn start by navigating to the package you are making changes to, the changes should reflect in the above sample app.

For example, if you are making changes in roomkit-react(prebuilt), run yarn start in that package. The sample app should auto reload.

Note: Make sure yarn build is run atleast once before using yarn start


Contributing

We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our contribution guide, and get started exploring the codebase.

Please join us on Discord to discuss any new ideas and/or PRs.


Community & Support

  • GitHub Issues - Submit any bugs or errors you encounter using the Web SDKs.
  • Discord - Hang out with the community members, share your projects or ask questions to get help from the 100ms team.
  • Contact - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.