JavaScript Webカメラ録画アプリ リアルタイム色補正/拡大回転 アプリDIY

録画するときに色調整、画像の拡大回転をリアルタイム処理する録画アプリが欲しかったので自分で作りました。JavaScriptではリアルタイム処理が難しいため、webGL(GPU)を利用しています。

使用例

YouTubeにアップするためのピアノ演奏動画作成に利用しています。一応30fpsで録画できているようです。カメラ解像度が1920で処理落ちしているのか時々コマ落ちしてます。PCの性能によっては、解像度を落とす、他のアプリを終了させるなどの対策が必要になります。

下手です、曲練習の区切り＆メントレのために動画を公開しています。

アプリの機能

録画アプリ画面

• Webカメラ（USBカメラ）の録画

• 録音（マイク入力）

• ファイル出力（wemb形式 ブラウザのダウンロード<a>）

• 映像の回転/拡大/縮小/移動

• 色補正 輝度/彩度/色相（x' =ax + b の式で変換）

• 録画時間/サイズ/数制限（メモリに記録するため）

• 録画した動画のプレビュー（下の映像）

• MIDI入力での録画開始停止（おまけ 自分用）

• 使いにくいUI（DIYで）

動作環境

スマホ、タブレットには不要のアプリなので、Windows : Edge/Chromeでのみ動作確認しています。
実行はローカルのHTTPサーバで、htmlとjsがあるフォルダをルートにしてブラウザのアドレスにlocalhost (127.0.0.1)。
映像音声関係の利用はhttpsのセキュア通信限定ですが、localhost接続は例外的にhttp通信でも可能なブラウザあり（Edge / Chromeなど）。

開発環境

TypeScriptを使用しています。バンドルツールは使っていません。
ソースコードはすべて白紙からの自作、外部のライブラリやオープンソース、AIによるコード生成は不使用です。

利用API

• MediaDevices.getUserMedia（カメラとマイクアクセス）

• Canvas/webGL

• MediaRecorder ( webmファイル codec= "vp9, opus" )

• WebMIDI（おまけ）

画像処理の例

微妙に傾いた映像を回転、隙間ができるので拡大

モノクロ

アプリDIY

面倒で難しい処理は用意していますので、UIなど自由にカスタマイズして利用してください。
解像度、フレームレートなどソースコードに直書きです
（プログラマなので？こっちのほうが楽）

    // ！サイズ制限注意！　越えると削除
    const limitTotalSize = 1024*1024*512;//合計512MBまで
    const limitRecNum =  8;// 8ファイルまで
    const limitRecSec = 60*6;//6分まで 越えたら停止

    // カメラ解像度
    const cameraWidth = 1600;
    const cameraHeight = 900;
    const cameraFrameRate = 30;

    // 録画設定
    const videoWidth = 1280;
    const videoHeight = 720;
    const frameRate = 30;
    const videoBitsPerSecond = 6_000_000;
    const audioBitsPerSecond = 500_000;
    const mimeType = 'video/webm;codecs="vp9,opus"';
    const fileExt = "webm";
    //！ 画像処理を行うため、映像が音声より少し遅れる
    // カメラ解像度 > 録画解像度
    //  オーバーサンプリングによる画質向上
    //  回転拡縮での画像劣化軽減

    // 色補正
    let modColor = new ModColor;
    modColor.scaleV = 1.05;     // 輝度x
    modColor.offsetV = -0.05;   // 輝度+
    modColor.scaleS = 0.8;      // 彩度x
    modColor.offsetS = 0.0;     // 彩度+
    modColor.offsetH = 4;       // 色相 -180 ～ 180
    modColor.rot = 0;           // 回転deg -180 ～ 180
    modColor.scale = 1;         // 拡大縮小
    modColor.x = 0;             // 移動X
    modColor.y = 0;             // 移動Y
    
    // MIDI操作
    const midiInputEnable = true;
    const inputKey = "input-0";// 入力デバイス選択
    const keyRecNote = 21;// ピアノ鍵盤左端の白鍵
    const keyRecCC = 66; // ソフトテヌートペダル

ソースコード

すぐに利用できるjsファイルとTypeScriptのプロジェクトをまとめたzipファイルです。