xtravision-js-sdk

Using browserify module, we have converted @xtravision/xtravision-react module to a browser friendly version of the CommonJS module.

How to Setup and Configure JS-SDK in your web-page?

(See examples/demo-app for reference )

Load JS-SDK with absolute path. (Download xtravision-js-sdk..min.js file)
```
<script src="xtravision-js-sdk..min.js"> </script>
```
OR use jsdelivr CDN Service:
```
<script src="https://cdn.jsdelivr.net/gh/xtravision-ai/[email protected]/xtravision-js-sdk.min.js"> </script>
```
if you are using any JS framework or bundling your web-app and want to use npm repo then kindly use below command to install JS-SDK.
```
npm install @xtravision/js-sdk
OR
yarn add  @xtravision/js-sdk
```

All required things are available under the XtraVision namespace which is available globally after adding JS SDK.

const ReactDOM = XtraVision.ReactDOM;
const React = XtraVision.React;
const XtraVisionAssessmentPage = XtraVision.AssessmentPage

Configure all required variable

 // enter your assessment name here
 const assessment_name = "SQUATS"; 
 // Get Auth Token from Your Server
 const auth_token =  "__AUTH-TOKEN__"; 

 // Put assessment specific configuration. Check documentation for further details
 let assessment_config = {} 
 let user_config = {} 

 // adjust these as per time based assessment requirement 
 assessment_config = {
     reps_threshold: 5,
     grace_time_threshold: 20,
     sets_threshold: -1, // -1 is default value & indicates disabled. 
 }
 
 // IMP: handle Xtra-Vision response here
 const onServerResponse = function(response) {
     // Handle server response here. It will call in every second in ideal situation.
     console.log("response", response);
 }
 
 // CSS: which will be applied on video element
 // Write CSS which is compatible for ReactJS
 const videoElementCSS = {
     position: "fixed",
     right: 0,
     bottom: 0,
     minWidth: "100vw",
     minHeight: "100vh"
 }

 // IMP: modify canvas CSS which fit your video element for proper alignment
 const canvasElementCSS = {
   height: "99%",
   width: "65%", 
   transform: "rotateY(180deg)",
   position: "absolute",
   padding:'0 17%'
 };


 // prepare required data object
 const connectionData = {
     assessment_name,
     auth_token,
     assessment_config,
     user_config,
     session_id: null
 }
 const requestData = {
     isPreJoin: false   // if you need to configure education screen then use this, else set to False
 }

 const libData = {
     onServerResponse, 
     videoElementCSS,
     canvasElementCSS,
     isSkeletonEnabled: true // if you need to draw skeleton, else false
 }

 const props = {
     connectionData, 
     requestData,
     libData
 }

 // Render XtraVision React Component
 ReactDOM.render(
     React.createElement(XtraVisionAssessmentPage, props),
     // XtraVisionAssessmentID => id of element
     document.getElementById('XtraVisionAssessmentID') 
 );

Add element to show XtraVision Video
```
<div id="XtraVisionAssessmentID"></div>
```

IMP: Once you load script file and do above steps, video automatically start after loading.

Note: You can get XtraVision server response into callback method onServerResponse. Kindly configure it as per your demand

Get User's body Key-points:

The Xtravision SDK provides an internal API that allows you to access live user body keypoints through the XtraVisionEventEmitter event emitter. The code below shows how to access keypoints. The data that is emitted by the event emitter has two values: timestamp keyPoints:

    {
        timestamp, 
        keyPoints: {
                _TS_: { // landmarks capture time
                    landmarks: [
                        {x,y,z,visibility}
                        ... 
                        //33 length
                        ]
                    }
                }
    }

How to use `XtraVisionEventEmitter`

 const XtraVisionEventEmitter = XtraVision.XtraVisionEventEmitter
 XtraVisionEventEmitter.on('onUserKeyPoints', (data) => {console.log(data);})

For MarkoJs Support:

We have created a wrapper to support MarKoJS framework. Please refer exmaples/demo-amrko-app for details.

Wrapper Component location: examples/demo-marko-app/src/components/xtravision-assessment.marko
Use in Page: examples/demo-marko-app/src/routes/_index/+page.marko

(For Developer) How to convert xtravision-react module to CommonJs/VanillaJS module.

Clone this repo and install all required dependencies using yarn install.
Build SDK and run demo app using yarn start:demo.
New updatedSDK will be created at root folder with name xtravision-js-sdk.min.js

Error: onServerResponse is not defined

Using the xtravision-js-sdk.min.js, I'm getting this error:

Uncaught ReferenceError: onServerResponse is not defined
    at s (xtravision-js-sdk.min.js:115:13594)
    at nv (xtravision-js-sdk.min.js:52:113163)
    at xtravision-js-sdk.min.js:52:148605
    at Xm (xtravision-js-sdk.min.js:52:149496)
    at HTMLUnknownElement.e (xtravision-js-sdk.min.js:39:2523)
    at Object.f (xtravision-js-sdk.min.js:39:2568)
    at b (xtravision-js-sdk.min.js:39:3469)
    at pb (xtravision-js-sdk.min.js:52:186136)
    at Qg (xtravision-js-sdk.min.js:52:179830)
    at Gg (xtravision-js-sdk.min.js:52:179673)
    at Dg (xtravision-js-sdk.min.js:52:178062)
    at Pg (xtravision-js-sdk.min.js:52:173957)
    at ow (xtravision-js-sdk.min.js:52:198180)
    at xtravision-js-sdk.min.js:52:202141
    at Lg (xtravision-js-sdk.min.js:52:178542)
    at Tw (xtravision-js-sdk.min.js:52:202126)
    at n.render (xtravision-js-sdk.min.js:52:208006)
    at __WEBPACK_DEFAULT_EXPORT__ (init.js:55:1)

Even though i set it in the libData configuration object. Am I missing something?
Here is my code:

const props = {
    connectionData: {
	assessment_name: 'SQUATS',
	auth_token: 'auth_token',
	assessmentConfig: {
            reps_threshold: 5,
            grace_time_threshold: 20
	},
	userConfig: {},
	session_id: '12345'
    },
    requestData: {
	isPreJoin: false // if you need to configure education screen then use this, else set to False
    },
    libData: {
	onServerResponse: response => console.log('Server: response', response ),
	videoElementCSS: {}
    }
}

// Render XtraVision React Component
const elem = document.getElementById('xtravision')
ReactDOM.render( React.createElement( AssessmentPage, props ), elem )

xtravision-ai / xtravision-js-sdk Goto Github PK