@dannadori/handpose-worker-js
v1.0.28
Published
This is webworker module for [HandPose](https://github.com/tensorflow/tfjs-models/tree/master/handpose).
Downloads
10
Maintainers
Readme
This is webworker module for HandPose.
HandPose
Install
$ npm install \@dannadori/handpose-worker-js
$ cp node_modules/\@tensorflow/tfjs-backend-wasm/dist/tfjs-backend-wasm.wasm public/
API
generateHandPoseDefaultConfig: () => HandPoseConfig;
generateDefaultHandPoseParams: () => HandPoseOperationParams;
drawHandSkelton: (srcCanvas: HTMLCanvasElement, prediction: any, params: HandPoseOperationParams) => ImageData;
HandPoseWorkerManager {
init: (config: HandPoseConfig | null) => Promise<unknown>;
predict: (targetCanvas: HTMLCanvasElement, params: HandPoseOperationParams) => Promise<any>;
Configuration and Parameter
export interface HandPoseConfig {
browserType : BrowserType;
model : ModelConfig;
useTFWasmBackend : boolean;
wasmPath : string;
processOnLocal : boolean;
modelReloadInterval : number;
}
export enum HandPoseFunctionType{
EstimateHands,
}
export interface HandPoseOperationParams{
type : HandPoseFunctionType
estimateHands : EstimateHandsParams
processWidth : number
processHeight : number
}
export interface EstimateHandsParams{
flipHorizontal: boolean
}
Step by step
Create environment and install package
$ npx create-react-app demo --template typescript
$ cd demo/
$ npm install
$ npm install @dannadori/handpose-worker-js
$ cp node_modules/\@tensorflow/tfjs-backend-wasm/dist/tfjs-backend-wasm.wasm public/
Add source image to public.
In this time, the name is "srcImage.jpg"
Edit src/App.tsx
Sample code is here.
import React from 'react';
import './App.css';
import { HandPoseWorkerManager, generateDefaultHandPoseParams, generateHandPoseDefaultConfig, drawHandSkelton } from '@dannadori/handpose-worker-js'
class App extends React.Component{
manager = new HandPoseWorkerManager()
config = generateHandPoseDefaultConfig()
params = generateDefaultHandPoseParams()
srcCanvas = document.createElement("canvas")
dstCanvas = document.createElement("canvas")
componentDidMount = () =>{
document.getRootNode().lastChild!.appendChild(this.srcCanvas)
document.getRootNode().lastChild!.appendChild(this.dstCanvas)
const srcImage = document.createElement("img")
srcImage.onload = () =>{
this.manager.init(this.config).then(()=>{
this.srcCanvas.getContext("2d")!.drawImage(
srcImage, 0, 0, this.srcCanvas.width, this.dstCanvas.height)
return this.manager.predict(this.srcCanvas, this.params)
}).then((res)=>{
const imageData = drawHandSkelton(this.srcCanvas, res, this.params)
console.log(res)
this.dstCanvas.getContext("2d")!.putImageData(imageData, 0, 0)
})
}
srcImage.src = "./srcImage.jpg"
}
render = ()=>{
return (
<div className="App">
</div>
);
}
}
export default App;
build and start
$ npm run start