{"id":19951046,"url":"https://github.com/xtravision-ai/xtravision-js-sdk","last_synced_at":"2026-06-10T17:31:23.655Z","repository":{"id":148966565,"uuid":"613229664","full_name":"xtravision-ai/xtravision-js-sdk","owner":"xtravision-ai","description":"JS SDK","archived":false,"fork":false,"pushed_at":"2023-08-01T06:28:05.000Z","size":8499,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-01T14:43:19.571Z","etag":null,"topics":["javsascript","websockets-client"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xtravision-ai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-13T06:54:53.000Z","updated_at":"2023-06-29T18:43:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"d65a5637-86c3-4539-8f5a-801c7895acb7","html_url":"https://github.com/xtravision-ai/xtravision-js-sdk","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/xtravision-ai/xtravision-js-sdk","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtravision-ai%2Fxtravision-js-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtravision-ai%2Fxtravision-js-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtravision-ai%2Fxtravision-js-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtravision-ai%2Fxtravision-js-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xtravision-ai","download_url":"https://codeload.github.com/xtravision-ai/xtravision-js-sdk/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xtravision-ai%2Fxtravision-js-sdk/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34163253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javsascript","websockets-client"],"created_at":"2024-11-13T01:06:36.267Z","updated_at":"2026-06-10T17:31:23.650Z","avatar_url":"https://github.com/xtravision-ai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# xtravision-js-sdk\n\n\nUsing browserify module, we have converted `@xtravision/xtravision-react` module to a browser friendly version of the CommonJS module.\n\n---\n\n### How to Setup and Configure JS-SDK in your web-page?  \n (See `examples/demo-app` for reference )  \n\n 1. Load JS-SDK with absolute path. (Download `xtravision-js-sdk..min.js` file)\n    ```javascript\n    \u003cscript src=\"xtravision-js-sdk..min.js\"\u003e \u003c/script\u003e\n    ```\n    OR use `jsdelivr` CDN Service:\n    \n    ```javascript\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/xtravision-ai/xtravision-js-SDK@2.1.0/xtravision-js-sdk.min.js\"\u003e \u003c/script\u003e\n    ```\n    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.\n    ```bash\n    npm install @xtravision/js-sdk\n    OR\n    yarn add  @xtravision/js-sdk\n    ```\n   \n 2. All required things are available under the `XtraVision` namespace which is available globally after adding JS SDK. \n\n    ```javascript\n    const ReactDOM = XtraVision.ReactDOM;\n    const React = XtraVision.React;\n    const XtraVisionAssessmentPage = XtraVision.AssessmentPage\n    ```\n3. Configure all required variable\n\n   ```javascript\n    // enter your assessment name here\n    const assessment_name = \"SQUATS\"; \n    // Get Auth Token from Your Server\n    const auth_token =  \"__AUTH-TOKEN__\"; \n\n    // Put assessment specific configuration. Check documentation for further details\n    let assessment_config = {} \n    let user_config = {} \n\n    // adjust these as per time based assessment requirement \n    assessment_config = {\n        reps_threshold: 5,\n        grace_time_threshold: 20,\n        sets_threshold: -1, // -1 is default value \u0026 indicates disabled. \n    }\n    \n    // IMP: handle Xtra-Vision response here\n    const onServerResponse = function(response) {\n        // Handle server response here. It will call in every second in ideal situation.\n        console.log(\"response\", response);\n    }\n    \n    // CSS: which will be applied on video element\n    // Write CSS which is compatible for ReactJS\n    const videoElementCSS = {\n        position: \"fixed\",\n        right: 0,\n        bottom: 0,\n        minWidth: \"100vw\",\n        minHeight: \"100vh\"\n    }\n\n    // IMP: modify canvas CSS which fit your video element for proper alignment\n    const canvasElementCSS = {\n      height: \"99%\",\n      width: \"65%\", \n      transform: \"rotateY(180deg)\",\n      position: \"absolute\",\n      padding:'0 17%'\n    };\n\n\n    // prepare required data object\n    const connectionData = {\n        assessment_name,\n        auth_token,\n        assessment_config,\n        user_config,\n        session_id: null\n    }\n    const requestData = {\n        isPreJoin: false   // if you need to configure education screen then use this, else set to False\n    }\n\n    const libData = {\n        onServerResponse, \n        videoElementCSS,\n        canvasElementCSS,\n        isSkeletonEnabled: true // if you need to draw skeleton, else false\n    }\n\n    const props = {\n        connectionData, \n        requestData,\n        libData\n    }\n\n    // Render XtraVision React Component\n    ReactDOM.render(\n        React.createElement(XtraVisionAssessmentPage, props),\n        // XtraVisionAssessmentID =\u003e id of element\n        document.getElementById('XtraVisionAssessmentID') \n    );\n   ```\n\n4. Add element to show XtraVision Video\n\n   ```html\n   \u003cdiv id=\"XtraVisionAssessmentID\"\u003e\u003c/div\u003e\n   ```\n\n**IMP**: Once you load script file and do above steps, video automatically start after loading. \n\n\nNote: You can get XtraVision server response into callback method `onServerResponse`. Kindly configure it as per your demand\n\n\n### Get User's body Key-points:\nThe 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: \n```javascript\n    {\n        timestamp, \n        keyPoints: {\n                _TS_: { // landmarks capture time\n                    landmarks: [\n                        {x,y,z,visibility}\n                        ... \n                        //33 length\n                        ]\n                    }\n                }\n    }\n```\n## How to use `XtraVisionEventEmitter`\n   ```javascript\n    const XtraVisionEventEmitter = XtraVision.XtraVisionEventEmitter\n    XtraVisionEventEmitter.on('onUserKeyPoints', (data) =\u003e {console.log(data);})\n   ```\n\n\n----\n\n\n### For MarkoJs Support:\n\nWe have created a wrapper to support MarKoJS framework. Please refer `exmaples/demo-amrko-app` for details.  \n-  Wrapper Component location: `examples/demo-marko-app/src/components/xtravision-assessment.marko`\n- Use in Page: `examples/demo-marko-app/src/routes/_index/+page.marko`\n\n\n----\n\n### (For Developer) How to convert xtravision-react module to CommonJs/VanillaJS module. \n\n   1. Clone this repo and install all required dependencies using `yarn install`.  \n   2. Build SDK and run demo app using `yarn start:demo`.  \n   3. New updatedSDK will be created at root folder with name `xtravision-js-sdk.min.js`   \n\n----","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxtravision-ai%2Fxtravision-js-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxtravision-ai%2Fxtravision-js-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxtravision-ai%2Fxtravision-js-sdk/lists"}