Granite Periodic Image Capture

A Lit web component that captures images from a video stream at regular intervals using HTML5 Canvas.

Note: This component replaces the older granite-app-media-periodic-image-capture with a modern Lit-based implementation.

Features

• Frequency Control: Set capture rate from 0.001 to 100 images per second
• Start/Stop Controls: Toggle periodic capture with a simple button
• Debug Mode: Optional logging for troubleshooting
• Automatic Timeout Management: Uses setTimeout to handle the periodic capture loop
• Real-time Statistics: Shows capture count, target/actual rates, and elapsed time
• Custom Events: Dispatches image-captured events with blob data
• Responsive UI: Modern, clean interface with visual status indicators

Installation

npm i granite-periodic-image-capture

Usage

Basic Usage

<script type="module">
  import 'granite-periodic-image-capture/granite-periodic-image-capture.js';
</script>

<granite-periodic-image-capture></granite-periodic-image-capture>

With Properties

<granite-periodic-image-capture 
  frequency="2" 
  capture="false" 
  debug="true"
  videoWidth="1280"
  videoHeight="720">
</granite-periodic-image-capture>

Listening for Captured Images

const captureComponent = document.querySelector('granite-periodic-image-capture');

captureComponent.addEventListener('image-captured', (event) => {
  const { blob, timestamp, captureNumber } = event.detail;
  
  // Create image URL
  const imageUrl = URL.createObjectURL(blob);
  
  // Display or process the captured image
  console.log(`Captured image #${captureNumber} at ${new Date(timestamp)}`);
});

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | frequency | Number | 1 | Images per second to capture (0.001 - 100) | | capture | Boolean | false | Start/stop periodic capture | | debug | Boolean | false | Enable debug logging | | videoWidth | Number | 640 | Video stream width in pixels | | videoHeight | Number | 480 | Video stream height in pixels |

Events

image-captured

Dispatched when an image is successfully captured.

Detail Object:

• blob (Blob): The captured image as a blob
• timestamp (Number): Timestamp when the image was captured
• captureNumber (Number): Sequential number of the captured image

Demo

To see the component in action, run:

npm start

Then open http://localhost:8001/demo.html in your browser.

API

Methods

The component doesn't expose public methods. Control it through properties:

const component = document.querySelector('granite-periodic-image-capture');

// Start capture at 0.5 images per second
component.frequency = 0.5;
component.capture = true;

// Change video dimensions to HD
component.videoWidth = 1280;
component.videoHeight = 720;

// Stop capture
component.capture = false;

// Enable debug mode
component.debug = true;

Browser Compatibility

• Requires modern browsers with WebRTC support
• Uses navigator.mediaDevices.getUserMedia() for camera access
• Requires user permission for camera access

Dependencies

• Lit - Web component framework
• HTML5 Canvas API - For capturing video frames
• WebRTC getUserMedia API - For camera access

Development

Linting and formatting

To scan the project for linting and formatting errors, run

npm run lint

To automatically fix linting and formatting errors, run

npm run format

Testing with Web Test Runner

To execute a single test run:

npm run test

To run the tests in interactive watch mode run:

npm run test:watch

Demoing with Storybook

To run a local instance of Storybook for your component, run

npm run storybook

To build a production version of Storybook, run

npm run storybook:build

Tooling configs

For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

Local Demo with web-dev-server

npm start

To run a local development server that serves the basic demo located in demo/index.html