okathira / scoobie-doobie-effector Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 0.0 3.62 MB

It's a scoobie oobie doobie, scoobie doobie webcam effector. https://youtu.be/Hy8kmNEo1i8?t=170

Home Page: https://okathira.github.io/scoobie-doobie-effector/

HTML 10.04% TypeScript 89.96%

webcam-viewer video-processing webapp

scoobie-doobie-effector's Introduction

This project was bootstrapped with Create React App.

スクービーウービードゥービーなウェブカメラエフェクター

https://okathira.github.io/scoobie-doobie-effector/

ウェブカメラを使います。映像やカメラ情報などの外部への送信は一切してないです。

React.App.-.Google.Chrome.2021-07-13.06-55-43.mp4

使用ライブラリ

react-konva

react-webcam

他はソースコード内

scoobie-doobie-effector's People

Contributors

Stargazers

Watchers

scoobie-doobie-effector's Issues

クリッピングボックスを反転

作成したクリッピングボックスを上下左右反転できるようにしたい

範囲外でクリックし始めた・し終えたときの挙動

scoobie-doobie-effector/src/InputArea.tsx

Lines 71 to 80 in dc2f0e7

    
           onMouseDown={() => { 
        
             setMouseDownPos( 
        
               getRelativePointerPosition(inputAreaRef) ?? { x: 0, y: 0 } 
        
             ); 
        
             setDragging(true); 
        
           }} 
        
           onMouseUp={() => { 
        
             addBoxProps(); 
        
             setDragging(false); 
        
           }}

範囲外でクリックし始めて範囲内でクリックし終えたときと、
範囲外でクリックし終えて範囲内でクリックし始めたときの
挙動を直す。

モバイル端末に対応

カメラの設定を変更可能にする #31
タッチ・タップイベントにも対応させる #32

グレースケールの処理を軽くする

scoobie-doobie-effector/src/canvasFunctions.ts

Lines 10 to 24 in dc2f0e7

    
           export const makeGrayscale = (image: ImageData) => { 
        
             const l = image.data.length / 4; // RGBA 
        
             for (let i = 0; i < l; i++) { 
        
               const grayscale = 
        
                 image.data[i * 4 + 0] * 0.299 + 
        
                 image.data[i * 4 + 1] * 0.587 + 
        
                 image.data[i * 4 + 2] * 0.114; 
        
               const s = (grayscale * grayscale) / 255 / 255; 
        
               image.data[i * 4 + 0] = (s + 0.008) * 255; 
        
               image.data[i * 4 + 1] = (s + 0.014) * 255 + 1.9; 
        
               image.data[i * 4 + 2] = (s + 0.004) * 255; 
        
             } 
        
           };

ピクセルごと毎回計算しているため遅い
grayscale を 256 段階と考えれば、そこから求められる RGB 値の組み合わせも 256 個しかないためテーブル化やメモ化でどうにかできそう？

画像処理したcanvasを適切に管理する

baseCanvasの更新方法を適切なものにする。

クリッピングボックスをリサイズ

作成したクリッピングボックスのクリップ範囲はそのまま，ボックスをリサイズできるようにしたい

react-konva のコンポーネントに Context を渡せない

scoobie-doobie-effector/src/ClippingBoxes.tsx

Line 6 in 057ba42

    
           boxesProps: BoxProps[]; // TODO: コンテキストにするとレンダリングされないのを治す

scoobie-doobie-effector/src/OutputArea.tsx

Lines 6 to 25 in 057ba42

    
           const OutputArea: React.FC<{ 
        
             layoutSize: RectSize; 
        
             baseCanvas: CanvasImageSource; 
        
           }> = ({ layoutSize, baseCanvas }) => { 
        
             // TODO: 子に渡しているだけのため消したい 
        
             const boxesProps = useBoxesProps(); 
        
             return ( 
        
               <Stage 
        
                 className="output-area" 
        
                 width={layoutSize.width} 
        
                 height={layoutSize.height} 
        
               > 
        
                 <Layer> 
        
                   <Image image={baseCanvas} /> 
        
                   <ClippingBoxes currentFrame={baseCanvas} boxesProps={boxesProps} /> 
        
                 </Layer> 
        
               </Stage> 
        
             ); 
        
           };

Context が常に初期値になってた

Context は <canvas> を通らない
facebook/react#13336
facebook/react#13332 (comment)
Context は <Layer> 以下のような dom に属さないコンポーネントまでたどり着かない

ブリッジさせるしかないらしい
konvajs/react-konva#188 (comment)
facebook/react#17275 (comment)

クリッピングボックスの重なり順を変更

選択範囲をポインターの動きにリアルタイムで追従させる

scoobie-doobie-effector/src/InputArea.tsx

Lines 75 to 79 in d69abf6

    
           <SelectionRect 
        
             beginPos={mouseDownPos} 
        
             endPos={getRelativePointerPosition(inputAreaRef) || { x: 0, y: 0 }} 
        
             // FIXME: endPosの更新タイミングで描画されず、baseCanvasの更新により描画されている。 
        
           />

<SelectionRect> の描画更新タイミングを、ドラッグ中のマウスポインターに動きがあったときとしたい。

クリッピングボックスを削除

クリッピングボックスの選択を解除

タッチ・タップイベントにも対応させる

https://konvajs.org/docs/events/Mobile_Events.html

クリッピングボックスを複製

ドラッグ範囲をわかりやすくする

クリッピングボックスを生成する際にドラッグしている範囲をわかりやすくしたい

リサイズ中に枠線の大きさが変わる

scoobie-doobie-effector/src/ClippingBox.tsx

Lines 37 to 59 in dc2f0e7

    
           onTransformEnd={() => { 
        
             // FIXME: 変形中は表示倍率を変更しているため枠線にも影響が出るのに対し、 
        
             // 変形後は枠線の幅が戻るため、結果を確認しながら操作ができなくなっている。 
        
             // transformerはnodeのscaleを変更し、widthとheightはそのまま。 
        
             // しかし、データの管理を容易にするため、変形終了時にスケールをリセットする。 
        
             const node = shapeRef.current!; 
        
             const scaleX = node.scaleX(); 
        
             const scaleY = node.scaleY(); 
        
             // もとに戻す 
        
             node.scaleX(1); 
        
             node.scaleY(1); 
        
             onChange({ 
        
               ...boxProps, 
        
               x: node.x(), 
        
               y: node.y(), 
        
               // 最小値を指定する 
        
               width: Math.max(minimumBoxSize, node.width() * scaleX), 
        
               height: Math.max(minimumBoxSize, node.height() * scaleY), 
        
             }); 
        
           }}

カメラの設定を変更可能にする

カメラの Props と videoConstraints を管理する

クリッピングボックスの作成位置をドラッグした位置に合わせる

クリッピングボックスの作成される位置を，ドラッグした位置と相対的に同じになるようにする．

グレイスケールの処理をCSSで置き換える

scoobie-doobie-effector/src/canvasFunctions.ts

Lines 9 to 22 in d69abf6

    
           // グレイスケールならCSSでもできる。その場合はcanvasごとにフィルターがかかるため構造を変える必要がありそう。 
        
           export const makeGrayscale = (image: ImageData) => { 
        
             const l = image.data.length / 4; 
        
             for (let i = 0; i < l; i++) { 
        
               const grayscale = 
        
                 image.data[i * 4 + 0] * 0.299 + 
        
                 image.data[i * 4 + 1] * 0.587 + 
        
                 image.data[i * 4 + 2] * 0.114; 
        
               image.data[i * 4 + 0] = grayscale; 
        
               image.data[i * 4 + 1] = grayscale; 
        
               image.data[i * 4 + 2] = grayscale; 
        
             } 
        
           };

scoobie-doobie-effector/src/App.tsx

Lines 26 to 28 in d69abf6

    
           const image = ctx.getImageData(0, 0, canvasSize.width, canvasSize.height); 
        
           makeGrayscale(image); 
        
           ctx.putImageData(image, 0, 0);

グレイスケールだけなら CSS の filter で高速に処理できる。
CSS は、 <canvas> となる <Konva.Stage> ごとにしかかけられないため、構造を考える必要がありそう。

グレースケールの処理においてガンマ値などを考慮する

https://imagingsolution.net/imaging/imageprocessingalgorithm/gammacorrection/

リフレッシュレートの変更に対応する

カメラ映像のリフレッシュレートを state で保持する

	onMouseDown={() => {
	setMouseDownPos(
	getRelativePointerPosition(inputAreaRef) ?? { x: 0, y: 0 }
	);
	setDragging(true);
	}}
	onMouseUp={() => {
	addBoxProps();
	setDragging(false);
	}}

	export const makeGrayscale = (image: ImageData) => {
	const l = image.data.length / 4; // RGBA
	for (let i = 0; i < l; i++) {
	const grayscale =
	image.data[i * 4 + 0] * 0.299 +
	image.data[i * 4 + 1] * 0.587 +
	image.data[i * 4 + 2] * 0.114;

	const s = (grayscale * grayscale) / 255 / 255;

	image.data[i * 4 + 0] = (s + 0.008) * 255;
	image.data[i * 4 + 1] = (s + 0.014) * 255 + 1.9;
	image.data[i * 4 + 2] = (s + 0.004) * 255;
	}
	};

	const OutputArea: React.FC<{
	layoutSize: RectSize;
	baseCanvas: CanvasImageSource;
	}> = ({ layoutSize, baseCanvas }) => {
	// TODO: 子に渡しているだけのため消したい
	const boxesProps = useBoxesProps();

	return (
	<Stage
	className="output-area"
	width={layoutSize.width}
	height={layoutSize.height}
	>
	<Layer>
	<Image image={baseCanvas} />
	<ClippingBoxes currentFrame={baseCanvas} boxesProps={boxesProps} />
	</Layer>
	</Stage>
	);
	};

	<SelectionRect
	beginPos={mouseDownPos}
	endPos={getRelativePointerPosition(inputAreaRef) \|\| { x: 0, y: 0 }}
	// FIXME: endPosの更新タイミングで描画されず、baseCanvasの更新により描画されている。
	/>

	onTransformEnd={() => {
	// FIXME: 変形中は表示倍率を変更しているため枠線にも影響が出るのに対し、
	// 変形後は枠線の幅が戻るため、結果を確認しながら操作ができなくなっている。

	// transformerはnodeのscaleを変更し、widthとheightはそのまま。
	// しかし、データの管理を容易にするため、変形終了時にスケールをリセットする。
	const node = shapeRef.current!;
	const scaleX = node.scaleX();
	const scaleY = node.scaleY();

	// もとに戻す
	node.scaleX(1);
	node.scaleY(1);

	onChange({
	...boxProps,
	x: node.x(),
	y: node.y(),
	// 最小値を指定する
	width: Math.max(minimumBoxSize, node.width() * scaleX),
	height: Math.max(minimumBoxSize, node.height() * scaleY),
	});
	}}

	// グレイスケールならCSSでもできる。その場合はcanvasごとにフィルターがかかるため構造を変える必要がありそう。
	export const makeGrayscale = (image: ImageData) => {
	const l = image.data.length / 4;
	for (let i = 0; i < l; i++) {
	const grayscale =
	image.data[i * 4 + 0] * 0.299 +
	image.data[i * 4 + 1] * 0.587 +
	image.data[i * 4 + 2] * 0.114;

	image.data[i * 4 + 0] = grayscale;
	image.data[i * 4 + 1] = grayscale;
	image.data[i * 4 + 2] = grayscale;
	}
	};

	const image = ctx.getImageData(0, 0, canvasSize.width, canvasSize.height);
	makeGrayscale(image);
	ctx.putImageData(image, 0, 0);