|
2 | 2 |
|
3 | 3 | Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here. |
4 | 4 |
|
| 5 | +## About This Project |
| 6 | + |
5 | 7 | OpenCV-JS is a TypeScript NPM package that provides OpenCV.js (JavaScript/WebAssembly version of OpenCV) for both Node.js and browser environments. The package wraps a pre-built 11MB OpenCV.js WASM binary with TypeScript type definitions. |
6 | 8 |
|
| 9 | +**Repository:** https://github.com/TechStark/opencv-js |
| 10 | +**NPM Package:** [@techstark/opencv-js](https://www.npmjs.com/package/@techstark/opencv-js) |
| 11 | +**Version:** 4.12.0-release.1 |
| 12 | + |
| 13 | +## Technology Stack |
| 14 | + |
| 15 | +- **Language:** TypeScript |
| 16 | +- **Runtime:** Node.js 20.x (also supports browser environments) |
| 17 | +- **Build Tool:** TypeScript Compiler (tsc) |
| 18 | +- **Testing:** Jest with ts-jest |
| 19 | +- **Package Manager:** npm |
| 20 | +- **OpenCV Version:** 4.12.0 (WebAssembly/JavaScript build) |
| 21 | +- **Key Dependencies:** Jimp (for image loading in tests) |
| 22 | + |
| 23 | +## Table of Contents |
| 24 | + |
| 25 | +- [Working Effectively](#working-effectively) |
| 26 | +- [Package Usage Patterns](#package-usage-patterns) |
| 27 | +- [Testing and Validation](#testing-and-validation) |
| 28 | +- [File Structure and Navigation](#file-structure-and-navigation) |
| 29 | +- [CI/CD and Publishing](#cicd-and-publishing) |
| 30 | +- [Common Development Tasks](#common-development-tasks) |
| 31 | +- [Browser vs Node.js Differences](#browser-vs-nodejs-differences) |
| 32 | +- [Performance and Timing Expectations](#performance-and-timing-expectations) |
| 33 | +- [Troubleshooting](#troubleshooting) |
| 34 | +- [Security Considerations](#security-considerations) |
| 35 | +- [External Documentation](#external-documentation) |
| 36 | +- [Contributing Guidelines](#contributing-guidelines) |
| 37 | + |
7 | 38 | ## Working Effectively |
8 | 39 |
|
9 | 40 | ### Initial Setup and Build |
@@ -176,4 +207,78 @@ After making changes, ALWAYS test these scenarios: |
176 | 207 | - `npm audit` - Check for security vulnerabilities |
177 | 208 | - `npm pack && tar -tzf *.tgz | head -20` - Inspect package contents |
178 | 209 |
|
| 210 | +## Security Considerations |
| 211 | + |
| 212 | +### Dependency Security |
| 213 | +- ALWAYS run `npm audit` before committing changes |
| 214 | +- Use `npm audit fix` to automatically fix security vulnerabilities |
| 215 | +- Review security advisories for OpenCV.js and WebAssembly-related issues |
| 216 | +- Keep TypeScript and build dependencies up to date |
| 217 | + |
| 218 | +### WASM Binary Safety |
| 219 | +- The `dist/opencv.js` file is a pre-built WebAssembly binary from OpenCV.org |
| 220 | +- Verify the source when updating: https://docs.opencv.org/4.12.0/opencv.js |
| 221 | +- Do NOT accept modified opencv.js files from untrusted sources |
| 222 | + |
| 223 | +### Memory Safety |
| 224 | +- Always call `.delete()` on OpenCV objects to prevent memory leaks |
| 225 | +- Memory leaks in WASM can cause browser crashes or performance degradation |
| 226 | +- Use try/finally blocks to ensure cleanup even when errors occur |
| 227 | + |
| 228 | +### Input Validation |
| 229 | +- Validate image dimensions and formats before processing |
| 230 | +- Handle invalid inputs gracefully to prevent crashes |
| 231 | +- Be cautious with user-provided images in browser environments |
| 232 | + |
| 233 | +## External Documentation |
| 234 | + |
| 235 | +### OpenCV Resources |
| 236 | +- [OpenCV.js Documentation](https://docs.opencv.org/4.12.0/d5/d10/tutorial_js_root.html) |
| 237 | +- [OpenCV.js Tutorials](https://docs.opencv.org/4.12.0/#:~:text=OpenCV%2DPython%20Tutorials-,OpenCV.js%20Tutorials,-Tutorials%20for%20contrib) |
| 238 | +- [OpenCV.js API Reference](https://docs.opencv.org/4.12.0/d0/de1/group__js.html) |
| 239 | +- [OpenCV Build Information](https://docs.opencv.org/4.12.0/opencv.js) |
| 240 | + |
| 241 | +### Package Resources |
| 242 | +- [NPM Package Page](https://www.npmjs.com/package/@techstark/opencv-js) |
| 243 | +- [GitHub Repository](https://github.com/TechStark/opencv-js) |
| 244 | +- [Code Examples Repository](https://github.com/TechStark/opencv-js-examples) |
| 245 | +- [Live Demo (React)](https://codesandbox.io/s/techstarkopencv-js-demo-page-f7gvk) |
| 246 | +- [Live Demo (Angular)](https://codesandbox.io/s/techstark-opencv-js-angular-demo-hkmc1n) |
| 247 | +- [Face Detection Demo](https://codesandbox.io/s/opencv-js-face-detection-i1i3u) |
| 248 | + |
| 249 | +### TypeScript Resources |
| 250 | +- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) |
| 251 | +- [Jest Testing Framework](https://jestjs.io/docs/getting-started) |
| 252 | +- [ts-jest Configuration](https://kulshekhar.github.io/ts-jest/) |
| 253 | + |
| 254 | +## Contributing Guidelines |
| 255 | + |
| 256 | +### Before Making Changes |
| 257 | +1. Search existing issues and PRs to avoid duplicates |
| 258 | +2. For significant changes, open an issue first to discuss |
| 259 | +3. Fork the repository and create a feature branch |
| 260 | +4. Ensure you understand the codebase by running: `npm install && npm run build && npm test` |
| 261 | + |
| 262 | +### Making Changes |
| 263 | +1. Follow existing code style and patterns |
| 264 | +2. Add TypeScript type definitions for new OpenCV features |
| 265 | +3. Include tests for new functionality in the `test/` directory |
| 266 | +4. Update documentation if adding new features or changing behavior |
| 267 | +5. Ensure all tests pass: `npm test` |
| 268 | +6. Format code: `npm run format` |
| 269 | +7. Check for security issues: `npm audit` |
| 270 | + |
| 271 | +### Submitting Changes |
| 272 | +1. Write clear, descriptive commit messages |
| 273 | +2. Reference related issues in commit messages (e.g., "Fixes #123") |
| 274 | +3. Ensure CI/CD workflows pass (unit tests, build) |
| 275 | +4. Provide clear PR description explaining the changes |
| 276 | +5. Be responsive to review feedback |
| 277 | + |
| 278 | +### Code Review Process |
| 279 | +- PRs require passing CI checks before merge |
| 280 | +- Maintainer review is required |
| 281 | +- Keep PRs focused and reasonably sized |
| 282 | +- Update type definitions when adding new OpenCV methods |
| 283 | + |
179 | 284 | ALWAYS follow these patterns for reliable OpenCV-JS development and avoid common pitfalls with async initialization and memory management. |
0 commit comments