wangrongding/frontend-park

What it solves

このプロジェクトは、ブラウザで面白い機能を実装したいフロントエンド開発者が、すぐに使えるリファレンスが不足しているという問題を解決します。作者が普段試している様々な楽しいフロントエンドの事例を集約し、他の人がオンラインデモを直接確認したり、コードを修正して遊んだりできるようにしています。

How it works

このプロジェクトは事例集であり、各事例はブラウザのネイティブ技術で実装されています。例えば、TensorFlow.jsを使用してカメラからリアルタイムで人体姿勢を推定したり、WebRTCを使用して写真撮影、画面録画、バーチャル背景、1対1のビデオ通話（シグナリングあり/なしの両方）を実現したりしています。Three.jsセクションではコントローラーや太陽系のサンプルを提供し、ステガノグラフィーセクションではテキストや画像を別のテキストや画像に隠蔽します。フォトモザイク機能は、選択した複数の画像を組み合わせてターゲットのモザイク画像を作成します。プロジェクトは pnpm で依存関係を管理し、ローカル実行には pnpm dev、ビルドには pnpm build を使用します。

Who it’s for

フロントエンド技術に興味があり、ブラウザの高度なAPI（WebRTC、TensorFlow.js、Three.jsなど）を探求したい開発者、特に面白いプロジェクトを自分で作るのが好きな人に最適です。また、これらの技術の具体的な実装を学びたい学生や愛好家にも適しています。

Highlights

• 姿勢推定、オーディオ・ビデオ連携、3Dサンプル、ステガノグラフィーなど、すぐに実行可能な楽しいフロントエンド事例を多数提供
• カメラを通じたリアルタイムの姿勢推定をサポートし、ジム、ヨガスタジオ、ダンススタジオなどのシナリオで活用可能
• WebRTCセクションには、異なるネットワーク環境に対応したシグナリングあり/なしの1対1通話実装が含まれる
• ステガノグラフィーはテキストと画像の双方に対応し、情報暗号化や著作権保護に利用可能
• フォトモザイク機能により、複数の画像を組み合わせて指定のモザイク画像を作成可能（基本機能は完了済み、さらなる最適化は開発予定）