@zimjs/cam
v1.2.3
Published
Cam module for ZIM JavaScript Canvas Framework
Downloads
13
Maintainers
Readme
Cam is a helper module for the ZIM JavaScript Canvas Framework at https://zimjs.com. With the module you can show a Webcam, and place objects at where there is motion.
A cursor can follow your finger. Or you can set interactive regions that capture motion.
Multiple CamCursor objects can be used for instance to play a game of pong with paddles on each side.
// CAM
// A cam motion cursor
// This will follow motion - read carefully the docs
// https://zimjs.com/docs.html?items=CamMotion,CamCursor
// as there are a lot of options!
// Apple still makes us interact with the canvas before showing video (sigh)
// so use CamAsk widget that has a callback on show() which is true for yes and false for no
const ask = new CamAsk().show(yes => {
// if the user answers yes to the CamAsk
if (yes) {
const camCursor = new CamCursor(new Emoji("🐙",50));
camCursor.on("ready", () => {
new CamAlpha(camCursor).pos(50,50,RIGHT,TOP);
new CamControls(camCursor.camMotion).pos(30,150,RIGHT,TOP);
});
// // Here is a manual way:
// const camMotion = new CamMotion().center();
// camMotion.on("ready", () => {
// new CamAlpha(camMotion).pos(50,50,RIGHT,TOP);
// const camControls = new CamControls(camMotion).pos(30,150,RIGHT,TOP);
// });
//
// const cursor = new Emoji("🐙",50).centerReg();
// camMotion.on("cursor", () => {
// cursor.loc(camMotion.motionX, camMotion.motionY);
// });
}
});
import zim from "https://zimjs.org/cdn/016/zim_cam";
import zim from "zimjs"
import { CamAsk, CamCursor, CamAlpha, CamControls } from "@zimjs/cam"
- https://zimjs.com/nft/bubbling/cam.html - two motion regions
- https://zimjs.com/nft/bubbling/cam2.html - the cam cursor above
- https://zimjs.com/nft/bubbling/cam3.html - pong paddles
- https://zimjs.com/nft/bubbling/cam4.html - cam motion
- https://zimjs.com/nft/bubbling/cam5.html - hold and drag