2.1.3 • Published 1 year ago

use-cv v2.1.3

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

Use Open CV (use-cv)

React + Typescript Hooks API for OpenCV.js

Why

  1. Lazy loading
  2. Type defs -> awesome linting

Why Not

Many OpenCV operations will block the main thread for too long. Consider using web workers instead (see below for details)

Usage

// provider
import { OpenCvProvider } from 'use-cv';
function App() {
    return (
        <OpenCvProvider>
            <Component />
        </OpenCvProvider>
    )
}

// context hook
import { useOpenCv } from 'use-cv';
function Component() {
    const { cv } = useOpenCv(); // Cv | null
}

// type defs
import { Cv, Mat } from 'use-cv';

Web Workers

The specifics apply to Vite React x Typescript apps only (other set-ups are untested). Still concepts apply.

Goals

  • Get typing support for OpenCV inside web workers
  • Use the same copy for the main thread and any web workers (for caching)

How to

Basically copy and paste this:

// worker.ts
/// <reference lib="WebWorker" />
import type { Cv } from "use-cv";
importScripts('https://docs.opencv.org/4.5.0/opencv.js') // use the same source as in <OpenCvProvider>
declare global {
  const  cv: Cv
}

const loaded = new Promise(resolve => {
    cv.onRuntimeInitialized = () => resolve
})

onmessage = async e => {
    await loaded
    // use `cv`
}

For some tools to simplify interaction with web workers (including (de)serialization), you may check out the package opencv-tools

Credits

Type defs from opencv-ts

2.1.3

1 year ago

2.1.2

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

2.0.15

1 year ago

2.0.3

1 year ago

2.1.1

1 year ago

2.0.16

1 year ago

2.0.2

1 year ago

2.0.13

1 year ago

2.0.5

1 year ago

2.0.14

1 year ago

2.0.4

1 year ago

2.0.11

1 year ago

2.0.7

1 year ago

2.0.12

1 year ago

2.0.6

1 year ago

2.0.9

1 year ago

2.0.10

1 year ago

2.0.8

1 year ago

2.1.0

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

2.0.19

1 year ago

2.0.17

1 year ago

2.0.18

1 year ago

2.0.20

1 year ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago