診断を始める
カメラ診断かデモ体験を選びます。
開始方法を選択01
顔の動きから診断結果を表示する
体験型Webアプリケーション
本制作では、Webカメラの映像から顔の特徴点と表情をリアルタイムに取得し、笑顔を検出した後に診断結果を表示するシステムを開発しました。
顔追跡や表情認識の処理だけでなく、シャッター、ワイヤーフレーム、解析アニメーションを加え、利用者が処理の流れを理解しながら体験できる構成を目指しています。
制作西村（学部3年）
実行環境Webブラウザ
想定用途展示・大学紹介
顔の動きから診断結果を表示する
02
利用者の操作と内部処理
診断開始から結果表示まで、画面上の動作とブラウザ内部の処理を時系列で対応させています。
利用者が見る・触る画面
時間軸
裏側で動いている仕組み
-
01
顔を読み取る準備
カメラを起動し、顔認識機能を読み込みます。
- Webカメラ映像
- MediaPipe
-
顔を枠に合わせる
画面の枠に顔が入るよう位置を調整します。
顔の位置を調整02顔の位置を読み取る
目・口・輪郭を478点で捉え、顔の向きも確認します。
- 顔ランドマーク
- 座標 X・Y・Z
-
笑顔を見せる
笑顔メーターが基準を超えると自動で撮影します。
笑顔を自動判定03笑顔かどうかを確認
口角、目の開き、顔の向きから笑顔を判定します。
- 口角
- 目の開き
- 顔の正面度
-
顔を線で表示する
撮影した瞬間の顔をワイヤーフレームで表示します。
撮影・画面停止04顔の点を画像に変換
顔の点を線で結び、PNG画像として診断直後の画面に表示します。
- Canvas描画
- PNG Data URL
-
解析画面を見る
スキャンラインと進捗表示で解析の流れを示します。
解析状況を表示05診断結果を作る
最適コース、6項目の数値、コメントを生成します。
- コース適性
- 6項目パラメータ
-
結果を見る
顔画像、大学適性、最適コースをまとめて確認します。
診断結果を表示06結果をこの端末に保存
診断結果だけを端末内に保存します。顔写真やワイヤーフレームは保存・送信しません。
- 診断結果のみ端末内
- 顔形状は保存しない
- 外部送信なし
03
システムの動作紹介
診断開始から結果表示までの動作を、短い映像で紹介する予定です。
▶
紹介映像の掲載エリア
16:9・YouTube埋め込み対応
04
主な画面と表示内容
実際の動作画面を、読み取り・解析・結果表示の3場面に分けて掲載します。
画像 01フェイストラッキング画面推奨 1600 × 900
読み取り画面
顔の位置、表情、笑顔率をリアルタイムに表示します。
画像 02AI解析演出推奨 1200 × 1200
解析画面
取得した顔形状と解析の進行状況を表示します。
画像 03診断結果画面推奨 1200 × 1200
結果画面
ワイヤーフレーム、コース適性、診断コメントをまとめて表示します。
05
システムを構成する
六つの技術
HTML・CSS・JavaScriptを中心に、追加のアプリをインストールせずWebブラウザだけで動作する構成にしました。
顔の認識
MediaPipe Face Landmarker
顔の478点と表情係数を端末上でリアルタイムに取得します。
478点の顔座標表情判定
トリガー
笑顔率、口角、目の開き、顔の向きを統合して撮影を開始します。
リアルタイム処理Canvas
ワイヤーフレーム
撮影時の本人の座標からワイヤーフレームPNGを生成します。
2D描画サイバーHUD
モーション
スキャンライン、発光、グリッチ、段階表示をCSSとCanvasで構成します。
毎秒60フレーム目標衝突回避
レーダーチャート
150%の突出値と正式名称を両立する衝突回避レイアウトです。
6項目ローカルデータ
設計
診断結果だけをブラウザ内へ保存し、顔写真やワイヤーフレームは保持しません。
端末内のみ06
入力から結果表示までの処理構成
01カメラ映像
解析は利用者の端末内で実行します。
02顔写真
公開版では顔写真そのものを保存しません。
03外部送信
診断データを外部サービスへ送信しません。
04外部送信
顔写真、カメラ映像、ワイヤーフレームを外部へ送りません。
展示内容を変更する
編集モード
プロジェクト名やテーマカラーに加え、笑顔のしきい値、診断のランダム度、適性スコア、4コース、六角形パラメータ、診断コメントまでブラウザ上で変更できます。データは利用している端末内にだけ保存されます。
- 1画面右下の「編集モード」を開く
- 2笑顔判定や適性パラメータを調整
- 3保存して診断へ反映、またはJSONで書き出す
● 変更はこのブラウザ内だけに保存されます
07
ワイヤーフレーム画像の表示方法
Canvasから生成したPNGをData URLという文字列形式へ変換し、診断直後の画面に一時表示します。ブラウザ内には保存しません。
ワイヤーフレーム表示の概念端末内処理
const pngDataUrl = canvas.toDataURL("image/png");
resultImage.src = pngDataUrl;
// 診断直後の画面だけに表示し、
// localStorageには保存しない。PNGを文字列へ変換し、診断直後の画面にだけ表示します。
本人の顔写真だけでなく、ランドマークから描いたワイヤーフレームも保存しません。
クラウド連携の検討コードは、実行されない研究資料として残しています。