(Sample)

今回は「ブラウザ上でWebカメラを使う方法」について、実際のコードを見ながら解説します。
「自分の顔をブラウザに映すなんて、ハードルが高そう…」と思うかもしれませんが、実はJavaScriptでたった数行でできるんです！

この記事では、Webカメラの映像をリアルタイムでページに表示する基本的な実装方法を、やさしく解説していきます。

実現できることは？

このコードを実行すると、以下のことができます。

  • Webカメラからの映像を取得して
  • HTMLの <video> 要素にリアルタイムで表示する

動画チャットアプリやQRコードリーダー、顔認識アプリなどの基礎技術になるので、しっかり理解しておきたいポイントです！

全体の構造を確認しよう

<video id="video" width="640" height="480" autoplay></video>

この <video> タグは映像を表示するキャンバスのようなものです。
autoplay 属性が付いているので、映像が届いたらすぐに再生が始まります。

JavaScriptのポイントを解説！

カメラを起動する非同期関数

async function startCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        const video = document.getElementById('video');
        video.srcObject = stream;
    } catch (error) {
        console.error('カメラの起動に失敗しました', error);
    }
}

それぞれの役割は？

行解説
navigator.mediaDevices.getUserMedia({ video: true })ユーザーのWebカメラにアクセスするための命令。マイクを使うなら audio: true も追加。
await非同期（カメラの許可を待ってから）処理を一時停止して、結果を受け取る。
video.srcObject = stream取得したストリーム（映像）を <video> タグに流し込む。
try...catchカメラの使用を拒否されたり、デバイスが見つからない場合に備えてエラーハンドリング。

簡単に言うと、「ユーザーにカメラ使っていい？→OKなら映像表示、NGならエラー」という流れです。

getUserMedia() ってなんだ？

これは MediaDevices API の一部で、次のようなデータを取得できます。

オプション意味
{ video: true }カメラの映像のみ取得
{ audio: true }マイクの音声のみ取得
{ video: true, audio: true }両方取得（Zoomなどで使われる）

ちなみにこのAPIは HTTPS環境かlocalhostでのみ動作します。

実行前に知っておきたい注意点

✅ ユーザーの許可が必要

  • カメラはプライバシーに関わる機能なので、必ずユーザーの明示的な許可が必要です。
  • ブラウザから「このサイトがカメラの使用を求めています」というダイアログが出るはずです。

✅ 対応ブラウザ

  • Chrome / Edge / Firefox / Safari など、モダンブラウザはほぼ対応しています。
  • 古いブラウザ（Internet Explorerなど）は対応していません。

よくあるエラーとその原因

エラー内容原因
NotAllowedErrorユーザーがカメラ使用を拒否した場合
NotFoundErrorカメラが接続されていない、または認識されていない場合
NotSupportedErrorHTTPSでない場合（HTTPはNG）

応用例：写真を撮ってみよう！

このコードを応用すれば、写真を1枚キャプチャして保存することもできます。

const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
canvas.getContext('2d').drawImage(video, 0, 0);
const dataUrl = canvas.toDataURL('image/png');

このように canvas に video を描画すれば、スクリーンショットのように画像を保存することもできるんです！

今後の学習の指針

  1. マイクの音声も取得してみよう
    → audio: true を追加して、音声付き配信ができる！
  2. 顔検出やARを組み合わせてみよう
    → FaceAPI.js や TensorFlow.js を使ってAI分析も！
  3. 録画して保存する方法も学ぼう
    → MediaRecorder API を使えば、映像の録画ができます！

Webカメラを使うことで、ブラウザの中でできることがグッと広がります。

「カメラをオンにする」だけでも、非同期処理、ストリーム、エラー処理といったJavaScriptの重要な概念が盛りだくさん！
ぜひ手元のPCやスマホで実験しながら、体で覚えていきましょう！