From febf2fc5e228e4143def845ea489e42e414cccbd Mon Sep 17 00:00:00 2001 From: Im-Rises Date: Mon, 15 May 2023 16:13:32 -0400 Subject: [PATCH 1/3] Corrected bugs --- src/components/VideoAscii.tsx | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/VideoAscii.tsx b/src/components/VideoAscii.tsx index 14e7d39..8e1f055 100644 --- a/src/components/VideoAscii.tsx +++ b/src/components/VideoAscii.tsx @@ -58,8 +58,8 @@ export const VideoAscii = (props: Props) => { const canvas = canvasVideoBufferRef.current!; const context = canvas.getContext('2d', {willReadFrequently: true})!; - // // Animation frame id - // let animationFrameId: number; + // Animation frame id + let animationFrameId: number; // Refresh the ascii art text every frame const updateAscii = () => { @@ -85,25 +85,25 @@ export const VideoAscii = (props: Props) => { break; } - // // Schedule the next frame - // animationFrameId = requestAnimationFrame(updateAscii); + // Schedule the next frame + animationFrameId = requestAnimationFrame(updateAscii); }; - const intervalId = setInterval(() => { - updateAscii(); - }, 1000 / frameRate); + // const intervalId = setInterval(() => { + // updateAscii(); + // }, 1000 / frameRate); - // // Start the animation loop when the component mounts - // updateAscii(); - // - // // Stop the animation loop when the component unmounts - // return () => { - // cancelAnimationFrame(animationFrameId); - // }; + // Start the animation loop when the component mounts + updateAscii(); + // Stop the animation loop when the component unmounts return () => { - clearInterval(intervalId); + cancelAnimationFrame(animationFrameId); }; + + // return () => { + // clearInterval(intervalId); + // }; }, [props.videoStreaming, props.artType]); return ( From bd2354666c561bf6a569b2bca668c9763820a60d Mon Sep 17 00:00:00 2001 From: Im-Rises Date: Mon, 15 May 2023 16:16:21 -0400 Subject: [PATCH 2/3] wip --- src/components/CameraAsciiPanel.tsx | 2 +- src/components/VideoAscii.tsx | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/CameraAsciiPanel.tsx b/src/components/CameraAsciiPanel.tsx index 5be996b..91edf26 100644 --- a/src/components/CameraAsciiPanel.tsx +++ b/src/components/CameraAsciiPanel.tsx @@ -94,7 +94,7 @@ const CameraAsciiPanel = () => { fontColor={'white'} backgroundColor={'black'} flipY={true} - frameRate={30} + // frameRate={30} preTagRef={preTagRef} /> ) : ( diff --git a/src/components/VideoAscii.tsx b/src/components/VideoAscii.tsx index 8e1f055..c55b5b6 100644 --- a/src/components/VideoAscii.tsx +++ b/src/components/VideoAscii.tsx @@ -23,14 +23,14 @@ type Props = { artType: ArtTypeEnum; flipY?: boolean; preTagRef?: React.RefObject; - frameRate?: number; + // frameRate?: number; }; export const VideoAscii = (props: Props) => { const canvasVideoBufferRef = useRef(null); const preTagRef = props.preTagRef ?? useRef(null); const flipY = props.flipY ?? false; - const frameRate = props.frameRate ?? 30; + // const frameRate = props.frameRate ?? 30; const [asciiText, setAsciiText] = useState(''); @@ -93,6 +93,10 @@ export const VideoAscii = (props: Props) => { // updateAscii(); // }, 1000 / frameRate); + // return () => { + // clearInterval(intervalId); + // }; + // Start the animation loop when the component mounts updateAscii(); @@ -100,10 +104,6 @@ export const VideoAscii = (props: Props) => { return () => { cancelAnimationFrame(animationFrameId); }; - - // return () => { - // clearInterval(intervalId); - // }; }, [props.videoStreaming, props.artType]); return ( From 629390e063111247f2a305492328ddb62e6cdc9d Mon Sep 17 00:00:00 2001 From: Im-Rises Date: Mon, 15 May 2023 16:22:17 -0400 Subject: [PATCH 3/3] New version --- README.md | 2 -- package.json | 2 +- src/components/CameraAsciiPanel.tsx | 1 - src/components/VideoAscii.tsx | 47 ++++++++++++++--------------- 4 files changed, 23 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 236cba5..d190f9c 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,6 @@ You can also pass a pre tag reference to the component, so it can be used to get fontColor={'white'} backgroundColor={'black'} flipY={true} - frameRate={frameRate} preTagRef={preTagRef} /> ``` @@ -101,7 +100,6 @@ To use the component, you need to pass the following props: - `fontColor` - The color of the font. - `backgroundColor` - The color of the background. - `flipY` - Flip the ascii art vertically. -- `frameRate` - The frame rate of the video stream. - `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 diff --git a/package.json b/package.json index 611bcf1..f3463af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "video-stream-ascii", - "version": "1.5.0", + "version": "1.6.0", "description": "Convert video stream to ascii art", "homepage": "https://im-rises.github.io/video-stream-ascii-webcam", "repository": "https://github.com/Im-Rises/video-stream-ascii", diff --git a/src/components/CameraAsciiPanel.tsx b/src/components/CameraAsciiPanel.tsx index 91edf26..660e688 100644 --- a/src/components/CameraAsciiPanel.tsx +++ b/src/components/CameraAsciiPanel.tsx @@ -94,7 +94,6 @@ const CameraAsciiPanel = () => { fontColor={'white'} backgroundColor={'black'} flipY={true} - // frameRate={30} preTagRef={preTagRef} /> ) : ( diff --git a/src/components/VideoAscii.tsx b/src/components/VideoAscii.tsx index c55b5b6..0ac3060 100644 --- a/src/components/VideoAscii.tsx +++ b/src/components/VideoAscii.tsx @@ -1,4 +1,4 @@ -import React, {useRef, useEffect, useState} from 'react'; +import React, {useRef, useEffect, useState, createRef} from 'react'; import {asciiChars} from '../constants/pixel-ascii'; import { calculateAndSetFontSize, canvasImgToUrl, @@ -23,25 +23,29 @@ type Props = { artType: ArtTypeEnum; flipY?: boolean; preTagRef?: React.RefObject; - // frameRate?: number; +}; + +const defaultProps = { + flipY: false, + preTagRef: createRef(), }; export const VideoAscii = (props: Props) => { - const canvasVideoBufferRef = useRef(null); - const preTagRef = props.preTagRef ?? useRef(null); - const flipY = props.flipY ?? false; - // const frameRate = props.frameRate ?? 30; + // Merge the props with the default props + const mergedProps = {...defaultProps, ...props}; + // Set the local variables + const canvasVideoBufferRef = useRef(null); const [asciiText, setAsciiText] = useState(''); // UseEffect to calculate the font size and set the resize observer (to resize the canvas and the font size, when the parent element is resized) useEffect(() => { - calculateAndSetFontSize(preTagRef.current!, props.charsPerLine, props.charsPerColumn, props.parentRef.current!.clientWidth, props.parentRef.current!.clientHeight); + calculateAndSetFontSize(mergedProps.preTagRef.current!, props.charsPerLine, props.charsPerColumn, props.parentRef.current!.clientWidth, props.parentRef.current!.clientHeight); // Set a resize observer to the parent element to resize the canvas and the font size const resizeObserver = new ResizeObserver(entries => { const {width, height} = entries[0].contentRect; - calculateAndSetFontSize(preTagRef.current!, props.charsPerLine, props.charsPerColumn, width, height); + calculateAndSetFontSize(mergedProps.preTagRef.current!, props.charsPerLine, props.charsPerColumn, width, height); }); if (props.parentRef.current) { resizeObserver.observe(props.parentRef.current); @@ -78,8 +82,10 @@ export const VideoAscii = (props: Props) => { break; case ArtTypeEnum.ASCII_COLOR_BG_IMAGE: setAsciiText(getAsciiFromImage(imageData, asciiChars)); - preTagRef.current!.style.backgroundImage = `url(${canvasImgToUrl(canvas).src})`;// Use the resized canvas as background image - // preTagRef.current!.style.backgroundImage = `url(${videoImgToUrl(props.videoStreaming).src})`;// Use the original image as background image + // Set the background image of the pre tag to the resized canvas + mergedProps.preTagRef.current!.style.backgroundImage = `url(${canvasImgToUrl(canvas).src})`; + // // Set the background image of the pre tag to the original dimensions video + // mergedProps.preTagRef.current!.style.backgroundImage = `url(${videoImgToUrl(props.videoStreaming).src})`; break; default: break; @@ -89,14 +95,6 @@ export const VideoAscii = (props: Props) => { animationFrameId = requestAnimationFrame(updateAscii); }; - // const intervalId = setInterval(() => { - // updateAscii(); - // }, 1000 / frameRate); - - // return () => { - // clearInterval(intervalId); - // }; - // Start the animation loop when the component mounts updateAscii(); @@ -119,14 +117,14 @@ export const VideoAscii = (props: Props) => { switch (props.artType) { case ArtTypeEnum.ASCII: return ( - 
 									{asciiText}
@@ -134,7 +132,7 @@ export const VideoAscii = (props: Props) => {
 							);
 						case ArtTypeEnum.ASCII_COLOR:
 							return (
-								
 {
 										margin: 0,
 										letterSpacing: `${lineSpacing}em`,
 										lineHeight: `${lineHeight}em`,
-										transform: `scaleX(${flipY ? -1 : 1})`,
+										transform: `scaleX(${mergedProps.flipY ? -1 : 1})`,
 										overflow: 'hidden',
 									}}
 								>

@@ -158,7 +156,7 @@ export const VideoAscii = (props: Props) => {
                                         might think that the change of pre tag is an update not a replace
                                          */
 									}
-									
 {
 										backgroundClip: 'text',
 										WebkitBackgroundClip: 'text',
 										color: 'transparent',
-										transform: `scaleX(${flipY ? -1 : 1})`,
+										transform: `scaleX(${mergedProps.flipY ? -1 : 1})`,
 										overflow: 'hidden',
-										// backgroundImage: `url(${props.videoStreaming.src})`,
 									}}>
 										{asciiText}