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/[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

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