@xtravision/js-sdk

2.6.0 • Public • Published

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 )

  1. 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/xtravision-js-SDK@2.1.0/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
  2. 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
  3. 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') 
     );
  4. 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.

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

Package Sidebar

Install

npm i @xtravision/js-sdk

Weekly Downloads

0

Version

2.6.0

License

MIT

Unpacked Size

3.84 MB

Total Files

4

Last publish

Collaborators

  • xtra_jestinjois
  • xtra_manishtrivedi
  • ajayxtra