ウェブカメラエフェクト

カメラを起動を押すと、ブラウザが許可を求めたうえでgetUserMedia APIによりビデオストリームを開きます。すべてのフレームはこのページのキャンバスに描画され、JavaScriptでピクセル単位に変換されます。サーマルパレット、VHSの色にじみ、カレイドスコープのミラーリングなど、どれも目の前のピクセルに対する純粋な計算であり、サーバーからダウンロードしたフィルターではありません。

エフェクトはローカルで計算されるため、Chrome、Firefox、Safari、Edgeのどれでも同じ見た目になり、ページを一度読み込めばオフラインでも動作し続けます。ライブプレビューは滑らかさを保つために縮小サイズで動作し、撮影時には現在のエフェクトをカメラが出力するフル解像度で再レンダリングします。

3秒タイマーを使えば、一歩後ろに下がったり、友人をフレームに入れたりする時間ができます。完成した写真には隅に小さなweb.cameraマークが入り、PNGとして端末に直接ダウンロードされます。スマートフォンではブラウザによって、ダウンロードフォルダか写真アプリに保存されます。

動画を録画は、ブラウザ内蔵のMediaRecorderを使ってエフェクトのプレビューを最長60秒の動画クリップとして記録します。押すとブラウザが一度だけマイクの許可を求め、クリップに音声が入ります。拒否した場合はクリップが無音になるだけです。録画中もエフェクトを切り替えられます。Chrome、Edge、FirefoxはWebM、SafariはMP4で保存します。

残像、無限トンネル、タイムワープ、デジタルレイン、油絵、炎のオーラ、パーティーの7つのエフェクトは前のフレームを重ねて作られるため、動くプレビューとしてのみ存在します。これらの撮影は再レンダリングではなく、ライブ映像からそのまま切り出されます。

アップロード、録画、共有は一切行われません。ブース稼働中、このページは画像データを含むネットワークリクエストを発行しません。ブラウザの開発者ツールで確認できます。

写真はどこかにアップロードや保存されますか?

いいえ。カメラのストリーム、エフェクトのレンダリング、保存された写真はすべてブラウザのタブの中にとどまります。ファイルは端末上で生成され、そのまま端末にダウンロードされます。当サイトのサーバーは1フレームも見ることがありません。

Zoom、Teams、Google Meetでもエフェクトを使えますか?

直接には使えません。このページはフォトブースであり、仮想カメラドライバーではないため、カメラと他のアプリの間に入ることはできません。通話中のライブエフェクトには、OBSの仮想カメラなどのソフトウェア、または会議アプリ内蔵のフィルターが必要です。

プレビューが左右反転しているのはなぜですか?

鏡を見ているように感じられる反転プレビューは自然で、構図を決めやすくなります。保存される写真は見たままの向きです。文字を読める向きにしたい場合など、実際の向きにしたいときはツールバーのミラーを切り替えてください。

対応しているブラウザと端末は?

カメラにアクセスできる最新のブラウザならどれでも動作します。デスクトップではChrome、Edge、Firefox、Safari、モバイルではAndroidのChromeとiOSのSafariです。スマートフォンでは前面カメラがデフォルトで使われ、複数のカメラがある場合はピッカーで切り替えられます。

エフェクト付きで動画を録画できますか?

はい。動画を録画を押してパフォーマンスし、停止を押します（60秒で自動的に停止もします）。クリップはブラウザ内でエンコードされ、エフェクトが焼き込まれた状態でWebM（Chrome、Edge、Firefox）またはMP4（Safari）としてダウンロードされます。求められたときにマイクを許可すれば音声も含まれます。