https://github.com/xtravision-ai/xtravision-react

A React SDK for XtraVision API
https://github.com/xtravision-ai/xtravision-react

reactjs websocket

Last synced: 2 days ago
JSON representation

A React SDK for XtraVision API

• Host: GitHub
• URL: https://github.com/xtravision-ai/xtravision-react
• Owner: xtravision-ai
• License: mit
• Created: 2022-02-22T23:07:28.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-21T05:11:40.000Z (12 months ago)
• Last Synced: 2025-01-31T18:37:08.964Z (13 days ago)
• Topics: reactjs, websocket
• Language: TypeScript
• Size: 3.52 MB
• Stars: 3
• Watchers: 0
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# xtravision-react

A React SDK for XtraVision API

# What is xtraVision-react?

It is an sdk for fitness related data assessments like calories, rep-count, yoga pose-matching etc

# How to install

``npm install @xtravision/xtravision-react``  

or  

``yarn add @xtravision/xtravision-react``

# Example

[Demo](https://github.com/xtravision-ai/xtravision-react/tree/main/demo)

# API Reference

- import the relevant features you want:

```javascript

import {

    ClassCategory,

    Features,

    Assessment,

    XtraVisionOnDemandProvider,

    useXtraVisionOnDemandContext,

    useXtraVisionAssessmentContext,

    XtraVisionAssessmentProvider,

    XtraVisionEventEmitter, // optional

} from "@xtravision/xtravision-react";

```

- use the context to get the values:

```javascript

const { lastJsonMessage, isCamOn, setIsCamOn } = useXtraVisionAssessmentContext();

  const videoElementRef = useRef(null);

  // use for draw skeleton

  const canvasRef = useRef(null);

  const isEduScreen = false;

  // assessment name you want

  const assessment_name = 'SQUATS';

  const auth_token ="__AUTH_TOKEN__";

  const connectionData = {

    assessment_name,

    auth_token,

  }

  const requestData = {

    isPreJoin

  }

```

- wrap the component in the context provider and pass the results from the previous context:

```javascript

    

      {children}

    

```

- `{children}` elements must have below code and need to connected media input devices using `navigator.mediaDevices`. Please take further reference from demo app. 

```javascript

        

        

  ```

  - If you need live user key-points then you can use `XtraVisionEventEmitter`

  ```javascript

      XtraVisionEventEmitter.on('onUserKeyPoints', (data: any) => {console.log('data.toString()');})

  ```

**NOTE:** For the full detailed code refer demo app