# @zimjs/cam

> Cam module for ZIM JavaScript Canvas Framework

Latest version **1.3.3** (published 2026-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zimjs/cam
pnpm add @zimjs/cam
yarn add @zimjs/cam
bun add @zimjs/cam
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.3.3 |
| Published | 2026-08-09 |
| First published | 2024-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 52.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Dr Abstract |
| Maintainers | danzen |
| Keywords | cam, camera, webcam, cam, motion, motion, capture, zim, zimjs, ML5, Hand Tracking, Pinch Tracking |

## Links

- npm: https://www.npmjs.com/package/@zimjs/cam
- Repository: https://github.com/danzen/zim-cam
- Homepage: https://github.com/danzen/zim-cam#readme
- Issues: https://github.com/danzen/zim-cam/issues
- npm.io page: https://npm.io/package/@zimjs/cam

## Alternatives

- [@mce/gif](https://npm.io/package/@mce/gif.md) — 2.6K weekly downloads
- [cleanse](https://npm.io/package/cleanse.md) — 173 weekly downloads
- [str](https://npm.io/package/str.md) — 127 weekly downloads
- [naming](https://npm.io/package/naming.md) — 95 weekly downloads
- [tap-telco-api](https://npm.io/package/tap-telco-api.md) — 19 weekly downloads

## Recent versions

- 1.3.3 (latest) — 2026-08-09
- 1.3.0 — 2025-06-01
- 1.2.4 — 2025-03-10
- 1.2.3 — 2024-08-16
- 1.2.1 — 2024-02-23
- 1.2.0 — 2024-02-23

## README

![cam_library](https://github.com/user-attachments/assets/75d08fb4-628e-45a1-91af-3a3dba7bc3c0)

Cam is a helper module for the ZIM JavaScript Canvas Framework at https://zimjs.com. We have integrated [hand&nbsp;and&nbsp;pinch&nbsp;tracking](https://zimjs.com/018/handtrack.html) with the <a href="https://ml5js.org/" target="ml5">ML5 Library</a> (must be added as a script tag).  See the main example:

[![handtrack](https://github.com/user-attachments/assets/7b248901-5b75-4c39-a531-968d091942bb)](https://zimjs.com/018/handtrack.html)

Here is a [mini-site](https://zimjs.com/ml5/skeleton.html) of ZIM and ML5 examples as we experimented on afternoon.

[![cam](https://github.com/user-attachments/assets/a2d48ec2-92c0-4f01-a73f-ac10670e5899)](https://zimjs.com/ml5/skeleton.html)

To simply use the Webcam for pictures, this type of code will do:

<h2>CODE SAMPLE</h2>

```JavaScript
// CAM - capture web cam 

// on a Mac, the canvas must be interacted with first
// so would recommend always using CamAsk first:
const ask = new CamAsk().show(yes=>{
   // if the user answers yes to the CamAsk
   if (yes) {
      // use scaleTo() to FILL the cam in the Frame
      // new Cam() will trigger the Browser asking for permission
      // unless already have given permission in this session
      let cam = new Cam().scaleTo().center();      
      cam.on("ready", ()=>{
         // code here
         
		 // could let user add things to cam image 
		 // then save as a meme, etc.
         const loader = new Loader();
         const save = new Button({label:"SAVE"})
            .pos(50,50,RIGHT,BOTTOM)
            .tap(()=>{
                save.vis(false);
                loader.save(S,"cam");
                save.vis(true);
            });
      });            
      // if the user does not accept the browser asking about cam
      cam.on("error", ()=>{
         new Pane("CAM not accepted",yellow).show();
      });      
   } else { // answered no to CamAsk dialog
      new Pane("CAM not accepted",yellow).show();
   }   
});
```

<h2>CDN</h2>
<p>Usually we use ES Modules to bring in ZIM and if we want Cam then we the code below - see the starting template at the top of the https://zimjs.com/code page.  
</p>

```JavaScript
import zim from "https://zimjs.org/cdn/019/zim_cam";
```

<h2>NPM</h2>
<p>This repository holds the NPM package so you can install from <a href=https://www.npmjs.com/package/@zimjs/cam target=node>@zimjs/cam</a> on NPM.  The <a href=https://www.npmjs.com/package/zimjs target=node>ZIM&nbsp;package</a> must be installed to work.</p>

```JavaScript
import zim from "zimjs"
import { CamAsk, CamCursor, CamAlpha, CamControls } from "@zimjs/cam"
```

<h2>EXAMPLES</h2>
<p>Here are a few examples that were made for the ZIM NFT Launch featuring CAM:</p>

<ul>
<li><a href="https://www.youtube.com/watch?v=5szkMk297Io" target="vid">Fully Integrated Hand Tracking with ML5 and ZIM on the Canvas</a> </li>
<li><a href="https://www.youtube.com/watch?v=2bgrh70RxxI" target="vid">ZIM Bubbling 217. Integrated Hand and Pinch Tracking for all ZIM!</a> </li>
<li><a href="https://www.youtube.com/watch?v=0zwN3XYZE" target="vid">ZIM Explore! 100. ML5 with ZIM!</a> </li>
<li><a href="https://www.youtube.com/watch?v=UNiCsOdyyfA" target="vid">ZIM Explore! 104. ML5 Hand Tracking with Adobe Animate</a> </li>
</ul>


<h2>ZIM</h2>
<p>See the ZIM repository at https://github.com/danzen/zimjs for information on ZIM and open source license, etc.</p>

---
_Source: https://npm.io/package/@zimjs/cam · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._