HTML の video 要素で Web カメラ（USB カメラ）の映像を表示する
ブラウザ上の JavaScript で Web カメラ（USB カメラ）からの入力映像を取得するには、 MediaDevices オブジェクトの getUserMedia() メソッドを使って、 MediaStream を取得します。 navigator.mediaDevices で MediaDevices のシングルトンオブジェクトを参照できるので、通常はこれを使用します。 取得した MediaStream を video 要素の srcObject プロパティにセットすることで、Web カメラの映像を video 要素に流し込むことができます。
JavaScriptボタンで Web カメラを On/Off する
Web カメラからの MediaStream を取得しようとすると、Web ブラウザ上に「カメラの使用」を許可するかどうかの確認ダイアログが表示されます。 Web サイトを開いたときに急にこのダイアログが出てくるとびっくりしてしまうので、ユーザーが「開始」ボタンをなど押したときにキャプチャを開始するのがよいでしょう。
次の例では、 Enable webcam というボタンを配置しています。 ボタンを押すと、 Disable webcam に変化します。