npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

kl-camera-frontend

v1.0.6

Published

前端相机订阅

Readme

考拉悠然前端公共相机订阅模块

此库封装了相机开始采集、停止采集、切换采集模式、开始订阅、停止订阅、订阅参数更新、设置曝光、获取曝光、设置畸变参数等相机实时画面预览相关业务的接口,但对应SDK的调用需要通过配置回调函数传入

安装

Install with npm:

npm install kl-camera-frontend

设置采集等配置项

setConfig({
  // 开始采集
  grabStart?: (camera: Camera) => Promise<boolean>,
  // 停止采集
  grabStop?: (camera: Camera) => Promise<boolean>,
  // 设置曝光
  setExposureTime?: (camera: Camera, expTime: number) => Promise<void>,
  // 获取曝光
  getExposureTime?: (camera: Camera) => Promise<number>,
  // 设置畸变参数
  undistort?: (camera: Camera, undistortParam: number[] | null) => Promise<void>,
  // 开始订阅
  startSubscribe?: (subscribe: Subscribe, cb: (imageData: ImageData) => void) => Promise<void>,
  // 停止订阅
  stopSubscribe?: (subscribe: Subscribe) => Promise<void>,
  // 更新订阅参数
  updateSubscribe?: (subscribe: Subscribe) => Promise<void>,
  // 销毁订阅
  destorySubscribe?: (subscribe: Subscribe) => Promise<void>,
  // 采集一帧图像
  grabImage<T>(subscribe: Subscribe, save?: boolean): Promise<T | undefined>,
});

相机

1. 构造

new Camera(param: {
  // 相机id
  id: number,
  // 相机名称
  name: string,
  // 相机型号
  model: string,
  // 相机SN
  sn: string,
  // 相机输出图像宽
  width: number,
  // 相机输出图像高
  height: number,
  // 相机输出图像通道
  channel: number,
}) => Camera

2. 关键数据结构

{
  // 相机id
  id: number,
  // 相机名称
  name: string,
  // 相机型号
  model: string,
  // 相机SN
  sn: string,
  // 相机输出图像宽
  width: number,
  // 相机输出图像高
  height: number,
  // 相机输出图像通道
  channel: number,
  // 描述:name + sn
  desc: string,
  // 订阅列表
  subscribes: Subscribe[],
  // 是否正在采集图像
  isGrabing: boolean;
  // 触发方式;grabInternal|grabExternal|grabOnce
  grabType: string;
  // 第一个正在订阅的Subscribe
  firstWorkSubscribe: Subscribe | undefined;
}

3. API

  • 创建订阅对象
/**
 * @param name 订阅名;默认为时间戳
 */
createSubscribe(listener: (imageData: ImageData, sub: Subscribe) => void, name?: string) => Subscribe
  • 开始采集
grabStart() => Promise<void>
  • 停止采集
grabStop() => Promise<void>
  • 切换采集模式
/**
 * 若相机正在采集图像(且采集模式不一致),会先停止采集再切换
 */
swicthGrabType(type: 'grabInternal' | 'grabExternal' | 'grabOnce') => void
  • 采集图像
/**
 * @param save 是否存储
 * @param subscribe 非空时为第一个正在订阅的Subscribe
 */
grabImage<T>(save?: boolean, subscribe?: Subscribe) => Promise<T | undefined>
  • 设置曝光
setExposureTime(expTime: number) => Promise<void>
  • 获取曝光
getExposureTime() => Promise<number>
  • 设置畸变参数
undistort(undistortParam: number[] | null) => Promise<void>
  • 移除相机名称
removeName() => void
  • 添加相机名称
addName(name: string) => void

订阅

1. 关键数据结构

{
  // 订阅的相机
  camera: Camera;
  // 订阅名称
  name: string;
  // 订阅的回调函数
  listener: (imageData: ImageData, sub: Subscribe) => void;
  // 订阅的宽
  width: number;
  // 订阅的高
  height: number;
  // 订阅的缩放比例
  scale: number;
  // 订阅的dx
  dx: number;
  // 订阅的dy
  dy: number;
  // 是否已订阅
  isSubscribed: boolean;
}

2. API

  • 开始订阅
/**
 * @param silent 对应相机是否静默,否则开始采集图像
 */
startSubscribe(silent?: boolean) => Promise<void>
  • 取消订阅
/**
 * @param silent 对应相机是否静默,否则停止采集图像
 */
stopSubscribe(silent?: boolean) => Promise<void>
  • 更新订阅参数
/**
 * @param param 订阅参数:[width, height, scale, dx, dy]
 */
updateParam(param: number[]) => void
  • 销毁订阅;若正在订阅则先停止订阅
/**
 * 组件卸载时若有资源需要释放可以调用此接口
 */
destorySubscribe() => Promise<void>
  • 采集图像
/**
 * @param save 是否存储图像
 */
grabImage<T>(save?: boolean) => Promise<T | undefined>

使用

import { Camera, setConfig } from 'kl-camera-frontend';

// 创建相机
const camera = new Camera({
  id: 1,
  name: 'test',
  model: 'MODEL',
  sn: 'SN-TEST',
  width: 5120,
  height: 5120,
  channel: 3,
})
// 创建订阅
const sub = camera.createSubscribe((imageData) => {
  console.log(imageData.width, imageData.height);
});

// 设置全局参数
setConfig({
  async grabStart(camera: Camera) {
    console.log(`${camera.desc}: ${camera.grabType} grabStart...`);
    return true;
  },
  async grabStop(camera: Camera) {
    console.log(`${camera.desc}: grabStop...`);
    return false;
  },
  async startSubscribe(subscribe: Subscribe, cb: (imageData: ImageData) => void) {
    console.log(`${subscribe.camera.desc}/${subscribe.name}: startSubscribe...`);
    cb(new ImageData(subscribe.width, subscribe.height));
  },
  async stopSubscribe(subscribe: Subscribe) {
    console.log(`${subscribe.camera.desc}/${subscribe.name}: stopSubscribe...`);
  },
  async updateSubscribe(subscribe: Subscribe) {
    console.log(`${subscribe.name}/${subscribe.camera.desc}: updateSubscribe...`);
  }
})

// 开始订阅
sub.startSubscribe();
setTimeout(() => {
  // 停止订阅
  sub.stopSubscribe();
}, 10000)

若使用已定义好的c+=库方法,使用方式如下:

import { Camera, setConfig } from 'kl-camera-frontend';
import { useLibrary } from 'kl-camera-frontend/useLibrary';
const { Callback, Library } = require("ffi-napi") as typeof import("ffi-napi");

// 创建相机
const camera = new Camera({
  id: 1,
  name: 'test',
  model: 'MODEL',
  sn: 'SN-TEST',
  width: 5120,
  height: 5120,
  channel: 3,
})
// 创建订阅
const sub = camera.createSubscribe((imageData) => {
  console.log(imageData.width, imageData.height);
});

// dll库路径与图像存储地址
useLibrary({
  Callback,
  Library,
  dllPath: 'c.dll',
  generationImagePath: () => {
    `D:/img/${Date.now().png}`;
  }
})

// 开始订阅
sub.startSubscribe();
setTimeout(() => {
  // 停止订阅
  sub.stopSubscribe();
}, 10000)