quickstartJS.mdx

title	description
Deployment - JavaScript/TypeScript	Deploy your Kinetix ML pipeline to JavaScript or TypeScript in less than 5 minutes.

Install the Library

Kinetix ML should be installed as a node module using the command below.

yarn add kml-pipe-ts

There is a known issue with Tensorflow JS dependencies when installing using the npm command so please use yarn. They are for the most part interoperable.

Initialization

First start by importing the module.

import { KMLPipeline } from 'kml-pipe-ts';

Create the pipeline object using your API Key and project name.

var pipeline = new KMLPipeline("[Your Project Name]", "[Your API Key]");

Initialize the pipeline.

await pipeline.initialize();

Execution

To execute the pipeline you need to run the execute method with the required input data.

await pipeline.execute([]) // the [] should be replaced with your list of inputs

Webcam Inference

The pipeline will need a data source for each of its inputs. A common input is image data for nodes such as PoseDetection2D. For these nodes you should first create a video source element.

<video id="webcam" autoplay />

Now we need to make a function that we can call for every frame

let outputs = []
let processing = false
async function runInference() {
  if (!processing) {
      processing = true;
      outputs = await pipe.execute([videoSource]);
      processing = false;
    }
  document.getElementById("webcam").requestVideoFrameCallback(runInference); // run inference on every frame
};

Then, to use your webcam, run the following function which will ask the user for webcam permission, start playing the video, and start inference.

async function startWebcam() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    document.getElementById("webcam").srcObject = stream;
    await document.getElementById("webcam").play();
    document.getElementById("webcam").requestVideoFrameCallback(runInference);
};