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 🙏

© 2024 – Pkg Stats / Ryan Hefner

video-stream-ascii

v1.6.2

Published

Convert video stream to ascii art

Downloads

53

Readme

video-stream-ascii

Description

This is a simple web package that converts a video stream into ASCII art for React.

🚀🚀🚀 The package is published on npm 🚀🚀

It works on desktop and mobile as well, there is two demos, one for the camera and one for video files input. You can check them at those links:

🚀🚀 Video Ascii Webcam 🚀🚀

🚀🚀 Video Ascii Player 🚀🚀

The source code of the examples is available on GitHub:

Image to ASCII art version

I also made a version for images, you can check it at this link:
https://github.com/Im-Rises/image-ascii-art

You can check the demo at this link:
https://im-rises.github.io/image-ascii-art-website

Screenshots

Install packages

You can install it by typing the following command in your terminal:

npm install video-stream-ascii

or

yarn add video-stream-ascii

Usage

To use the package, you need to import it into your project:

import {VideoStreamAscii} from "video-stream-ascii";

Then you can create use the Component like this in Typescript/JavaScript:

<VideoAscii
    videoStreaming={videoRef.current!.video!}
    parentRef={parentRef}
    artType={ArtTypeEnum.ASCII_COLOR_BG_IMAGE}
    charsPerLine={charsPerLine}
    charsPerColumn={charsPerColumn}
    fontColor={'white'}
    backgroundColor={'black'}
/>

You can also pass a pre tag reference to the component, so it can be used to get the ASCII text:

<VideoAscii
    videoStreaming={videoRef.current!.video!}
    parentRef={parentRef}
    artType={ArtTypeEnum.ASCII_COLOR_BG_IMAGE}
    charsPerLine={charsPerLine}
    charsPerColumn={charsPerColumn}
    fontColor={'white'}
    backgroundColor={'black'}
    flipY={true}
    preTagRef={preTagRef}
/>

To use the component, you need to pass the following props:

  • videoStreaming - The video stream from the camera.
  • parentRef - The reference of the parent element, to fit the ascii art in it.
  • artType - The type of the ascii art, you can choose between ASCII, ASCII_COLOR and ASCII_COLOR_BG_IMAGE.
  • charsPerLine - The number of characters per line.
  • charsPerColumn - The number of characters per column.
  • fontColor - The color of the font.
  • backgroundColor - The color of the background.
  • flipY - Flip the ascii art vertically.
  • preTagRef - The reference of the pre tag, to get the ascii art text.

The parentRef is used to fit the ascii art in the parent element, so you need to pass the reference of the parent element like a div, you can check the example to see how to use it.

Warning
Be careful when using this package, the camera must be working before enabling the video stream. If you want to set the ascii art with a correct aspect ratio, follow the examples (webcam or video player).

The artType is used to choose the type of the ascii art, you can choose between ASCII, ASCII_COLOR and ASCII_COLOR_BG_IMAGE.

  • ASCII - The ascii art will be defined only by two colors the font color and the background color. (which you can set with the props fontColor and backgroundColor).
  • ASCII_COLOR - The ascii art will be printed with each character having the color of the pixel it represents (it is an extensive mode, you should use the ASCII_COLOR_BG_IMAGE mode instead).
  • ASCII_COLOR_BG_IMAGE - The ascii art will be printed with color using the original image as background for the color of the characters, you should use this mode if you want good performance instead of the ASCII_COLOR mode.

Note Be sure to import the enum ArtTypeEnum from the package, to use it in your code.

Code style

The code style used in this project is XO. You can find some changes in the .eslintrc.js file. The project is also set up to use ESLint.

GitHub Actions

Node.js CI ESLint CodeQL Node.js Package

The project is set up to run the following actions:

  • node.js.yml : Runs the tests for the Node.js project.
  • eslint.yml : Runs the ESLint linter on the project.
  • codeql.yml : Runs the CodeQL linter on the project.
  • npm-publish.yml : Publishes the package to the npm registry.

Documentations

Xo:
https://github.com/xojs/xo

ESLint:
https://eslint.org/docs/latest/user-guide/getting-started

GitHub gh-pages:
https://github.com/gitname/react-gh-pages

react-webcam:
https://www.npmjs.com/package/react-webcam

Links

Check the source code on github

Check the package on npm

Contributors

Quentin MOREL :

GitHub contributors