Package Exports

video-stream-ascii
video-stream-ascii/dist/components/VideoAscii.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (video-stream-ascii) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

video-ascii

Description

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

🚀🚀 You can try it out 🚀🚀

It works on desktop and mobile as well, the example use the camera of your device and convert the video stream into ASCII art in real time.

🚀🚀 The package is published on npm 🚀🚀

Screenshots

Project architecture

Click to expand

video-ascii
├── .github
│  ├── workflows
│  │   |── codeql.yml
│  │   |── dependency-review.yml
│  │   |── eslint.yml
│  │   |── greetings.yml
│  │   |── label.yml
│  │   |── node.yml
│  │   |── stale.yml
|  ├── labeler.yml
|  ├── release.yml
├── public
│  ├── face-logo.ico
│  ├── face-logo192.png
│  ├── face-logo512.png
│  ├── index.html
│  ├── manifest.json
│  ├── robots.txt
├── src
|  ├── canvas-handler
│  │   |── canvas-handler.ts
|  ├── components
│  │   |── VideoAscii.scss
│  │   |── VideoAscii.tsx
│  │   |── CameraAsciiPanel.scss
│  │   |── CameraAsciiPanel.tsx
│  │   |── GitHubProjectPanel.scss
│  │   |── GitHubProjectPanel.tsx
|  ├── constants
│  │   |── pixel-ascii.ts
|  ├── settings
│  │   |── react-app-env.d.ts
|  ├── web-vitals
│  │   |── reportWebVitals.ts
|  ├── App.scss
|  ├── App.tsx
|  ├── index.scss
|  ├── index.tsx
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── package.json
├── package-lock.json
├── README.md
├── tsconfig.json
├── yarn.lock

Install packages

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

npm install 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:

<VideoAscii videoStreaming={videoRef.current!.video!} frameRate={1000 / 30} width={cameraWidth}
            height={cameraHeight}
            fontColor={'white'}
            backgroundColor={'black'}/>

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

videoStreaming - The video stream from the camera.
frameRate - The frame rate of the video output.
width - The width of the video output.
height - The height of the video output.
fontColor - The color of the font.
backgroundColor - The color of the background.

Warning
Be careful when using this package, the camera must be working before enable the video stream.

An example in the GitHub repository is available, showing how to use the camera stream to convert it into a real-time ASCII video here: video-ascii-example.

You can also find it below:

Click to expand

import React, {useRef, useState} from 'react';
import VideoAscii from './VideoAscii';
import Webcam from 'react-webcam';
import './CameraAsciiPanel.css';

const CameraAsciiPanel = () => {
    const [isCameraReady, setIsCameraReady] = useState(false);
    const [cameraWidth, cameraHeight] = [260, 200];
    const videoRef = useRef < Webcam > (null);

    const handleUserMedia = (stream: MediaStream) => {
        const video = videoRef.current
        !
    .
        video
        !;
        video.srcObject = stream;
        video.onloadedmetadata = async () => {
            await video.play();
            setIsCameraReady(true);
        };
    };

    return (
        <div className={'Camera-Ascii-Panel'}>
            <Webcam ref={videoRef}
                    style={{width: 0, height: 0}}
                    onUserMedia={handleUserMedia}
            />
            {isCameraReady ? (
                <VideoAscii videoStreaming={videoRef.current!.video!}
                            frameRate={1000 / 30} width={cameraWidth}
                            height={cameraHeight}
                            fontColor={'white'}
                            backgroundColor={'black'}/>
            ) : (
                <p className={'Camera-Ascii-Waiting'}>Camera not ready.<br/>Please wait...
                </p>)}
        </div>
    );
};

export default CameraAsciiPanel;