カメラテスト
カメラデバイスをテスト、リアルタイムプレビュー、写真撮影、デバイス情報確認
リアルタイムプレビュー
カメラテストとは？
カメラテストは、ブラウザがノートパソコン内蔵カメラ、外付け USB カメラ、その他の映像入力デバイスにアクセスし、ライブプレビューを表示できるか確認するツールです。ビデオ会議、オンライン授業、面接、ライブ配信、録画の前に、誤ったカメラ選択、権限ブロック、黒い画面、低解像度、照明不足などを確認できます。ブラウザのカメラ権限を使い、ページが実際に開ける映像ストリームを表示し、ローカルのスナップショットで画質や構図を確認できます。デバイス選択、解像度、フレームレート、アスペクト比、基本的な画質確認には役立ちますが、ドライバーやハードウェアの故障は修復できません。映像が出ない場合は、システムのプライバシー設定、他アプリの使用、ケーブル、ドライバーを確認してください。
使い方
使い方
- 「テスト開始」をクリックし、ブラウザのカメラへのアクセスを許可してください
- カメラのライブプレビューを確認します
- 「キャプチャ」をクリックして写真を撮影します
- カメラの切り替えや、異なる解像度のテストも行えます
ヒント
- プレビューが表示されない場合は、ブラウザにカメラの使用許可が与えられているかご確認ください
- カメラが他のアプリケーションで使用されていないか
- 正しいカメラデバイスが選択されているか
- システム設定でカメラが無効になっていないか
利用シーン
仕組み
カメラテストツールは W3C Media Capture and Streams 仕様に基づいて構築されており、navigator.mediaDevices.getUserMedia(constraints) を使用してカメラにアクセスする。constraints パラメータは、解像度（幅、高さ）、フレームレート、フェイシングモード、デバイスID に対して ideal、exact、min、max の値を指定する JSON 形風のオブジェクトである。ブラウザの制約ソルバーは、カメラファームウェアが報告する UVC（USB Video Class）ディスクリプタに対してこれらの制約を交渉する。exact 制約を満たせない場合、OverconstrainedError で呼び出しが拒否され、これが解像度対度対応チェック機能の仕組みとなっている。各解像度を { exact } 制約でプローブし、失敗をマークする。 ストリームを取得すると、ビデオトラックは getSettings()（交渉後の実際の適用値）、getCapabilities()（ハードウェアの完全な対応範囲）、getConstraints()（元のリクエスト内容）を公開する。適用された解像度、フレームレート、アスペクト比、フェイシングモードは getSettings() から読み取られて表示される。ライブプレビューは video 要素の srcObject に MediaStream を設定することでレンダリングされ、ブラウザのメディアパイプラインがデコード、色空間変換、GPU アクセラレーションによる描画を JavaScript のピクセル操作なしに行う。 静止画キャプチャでは、CanvasRenderingContext2D.drawImage(videoElement, 0, 0) が現在のデコード済みビデオフレームを隠しキャンバスにスナップショットし、toDataURL('image/png') が PNG データ URL としてシリアライズする。enumerateDevices() は利用可能なすべてのメディア入力デバイスを列挙するが、デバイスラベルはユーザーが少なくとも1回カメラ権限を許可するまで空文字列となり、これはフィンガープリント防止の措置である。track.stop() を呼ぶとカメラハードウェアが解放されインジケーターライトが消灯し、videoElement.srcObject = null でレンダリングパイプラインが切り離される。getUserMedia にはセキュアコンテキスト（HTTPS または localhost）が必要であり、オリジンごとの権限プロンプトが表示される。カメラのインジケーターライトは OS レベルで強制され、ページ側では回避できない。
- 制約交渉: ブラウザのソルバーが ideal/exact/min/max の値を UVC ハードウェアディスクリプタと照合。{ exact } プローブはセンサーが要求された解像度に対応できない場合に OverconstrainedError で失敗し、これにより解像度対応グリッドが構築される
- トラックの内省: getSettings() は交渉後に実際に適用された解像度、フレームレート、アスペクト比、facingMode を返す。USB 帯域幅やセンサー能力の制約により、要求された ideal 値と異なる場合がある
- enumerateDevices のプライバシー: デバイスラベルはオリジンごとに getUserMedia の権限が1回以上許可されるまで空文字列。仕様で定められたフィンガープリント防止措置であり、初回訪問時にデバイスセレクターに一般名が表示される
- キャンバスによる静止画キャプチャ: drawImage() はデコード済みビデオフレームを GPU コンポジターから2D ピクセルバッファに再エンコードなしでコピーし、toDataURL('image/png') がロスレス PNG としてシリアライズ。フレームはブラウザのメモリ外には出ない
- フェイシングモード: VideoFacingModeEnum は track.getSettings().facingMode から読み取られる（'user' が前面、'environment' が背面、'left'/'right' が外部カメラ）。すべてのデスクトップ USB カメラが向きを報告するわけではなく、'unknown' と表示される場合がある
- ストリームのライフサイクル: track.stop() はカメラハードウェアを解放し OS レベルのインジケーターライトを消灯。srcObject = null でレンダリングパイプラインを切り離す。デバイスを完全に解放して他のアプリケーションが取得できるようにするには両方が必要
- セキュリティモデル: getUserMedia はセキュアコンテキスト（HTTPS または localhost）が必要で、オリジンごとの権限ダイアログを表示し、カメラインジケーターは OS/カーネルレベルで強制される。ページはこれら3つのゲートのいずれも回避できない
使用例
基本的なテストの流れ
1. テスト開始をクリックしてカメラの権限を許可
2. プレビュー映像で鮮明さ、フォーカス、フレームレートを確認
3. 撮影ボタンを押してテストフレームをキャプチャ
4. デバイス情報 (解像度、向き、フレームレート) を確認
用途: ビデオ会議、面接、ライブ配信の前のチェックに解像度のテスト
1. 対応解像度パネルを展開
2. 各解像度 (1080p、720p、480p など) の横のテストをクリック
3. ハードウェアが実際に対応している解像度を確認
4. 用途に応じて安定動作する最高解像度を選択複数カメラの切り替え
1. 上部のデバイス選択ドロップダウンを開く
2. 別のカメラ (フロント/リア、外付け Web カメラ) を選択
3. 画質、色味、低照度性能を比較
4. 通話に参加する前に正しいデバイスが選ばれているか確認よくある質問
カメラテストでは何をチェックしますか？
ブラウザがカメラにアクセスできるか、提供される解像度、ライブプレビュー、そして基本的なキャプチャ（画像のスナップショット）を確認します。ビデオ通話の前に、正しいカメラが選択されているか、画像の向きや露出が適切かを確認するのに便利です。
なぜカメラが表示されないのですか？
よくある原因：ブラウザにカメラ権限が必要（アドレスバーの権限アイコンを確認）、別のアプリがカメラを使用中（Zoom、Teams、OBSを閉じる）、OSのプライバシー設定がブラウザのカメラアクセスをブロックしている（WindowsのプライバシーまたはmacOSのカメラ権限を確認）、ハードウェアスイッチがカメラを無効化している、などです。
前面カメラと背面カメラを切り替えられますか？
デバイスに両方搭載されていれば可能です。ページではnavigator.mediaDevices.enumerateDevices()で利用可能なカメラを列挙し、ドロップダウンから選択できます。スマートフォンでは「user」が前面カメラ、「environment」が背面カメラを指します。
どの解像度に対応していますか？
カメラとブラウザが提供するすべての解像度です。一般的な範囲は320×240、640×480、1280×720、1920×1080です。高解像度ほど（ライブ用途では）帯域幅とCPUを多く必要とします。デフォルトでは最高解像度を選択しますが、ネットワークが遅い場合は低い解像度を選んでください。
カメラ映像はアップロードされますか？
いいえ。映像ストリームはローカルで描画され、キャプチャしたフレームもブラウザ内に留まります。ただし、カメラ権限はオリジン単位で付与されるため、権限を取り消すまで同じサイトの開いているタブからアクセスできることに注意してください。使用後はタブを閉じてください。
映像が左右反転しているのはなぜですか？
ブラウザは前面カメラのライブプレビューを、ユーザーが期待する「鏡」表示に合わせるためにミラー反転します。キャプチャしたスナップショットは反転している場合とそうでない場合があるので、両方を確認してください。CSSのtransform: scaleX(-1)でミラー表示を切り替えられます。
カメラ権限が永久に拒否された場合はどうすればよいですか？
Chromeの場合、アドレスバーのカメラアイコンをクリックして「常に許可」を選択します。必要に応じてchrome://settings/content/cameraからリセットしてください。他のブラウザにも同様の権限設定があります。許可した後、ページを更新してください。