最新のブラウザはカメラに直接アクセスできます。警告：カメラへの直接アクセスは強力な機能であり、ユーザーの同意が必要であり、Webサイトは安全なソース（HTTPS）でホストする必要があります。
カメラへのアクセスの取得
WebRTC仕様のgetUserMedia（）というAPIを使用して、カメラに直接アクセスできます。このとき、システムはユーザーにマイクとカメラへのアクセスを許可するように求めます。
認証が成功した場合、APIはカメラからのデータを含むMediaStreamを返します。次に、データを要素に添付し、再生してライブプレビューを表示するか、要素に添付してスナップショットを取得できます。
カメラからデータを取得するには、getUserMedia（）APIに渡される制約オブジェクトでvideo：trueを設定するだけです。
このコード自体はあまり役に立ちません。私たちにできることは、ビデオデータを取得して再生することだけです。
カメラからのスナップショットの取得カメラから生データを取得するには、getUserMedia（）によって作成された写真情報ストリームを取得して、データを処理する必要があります。Webオーディオとは異なり、Webビデオの処理に使用できる専用の写真情報ストリーム処理APIがないため、ユーザーのカメラからスナップショットを収集するために少しトリックを使用する必要があります。
操作手順は次のとおりです。
1.カメラからフレームを描画するキャンバスオブジェクトを作成します
2.カメラの写真情報ストリームにアクセスする
3.動画要素に添付します
4.特定のフレームを正確にキャプチャする場合は、drawImage（）を使用して、ビデオ要素のデータをキャンバスオブジェクトに追加できます。
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="snapshot" width=320 height=240></canvas>
<script>
var player = document.getElementById('player');
var snapshotCanvas = document.getElementById('snapshot');
var captureButton = document.getElementById('capture');
var handleSuccess = function(stream) {
// Attach the video stream to the video element and autoplay.
player.srcObject = stream;
};
captureButton.addEventListener('click', function() {
var context = snapshot.getContext('2d');
// Draw the video frame to the canvas.
context.drawImage(player, 0, 0, snapshotCanvas.width,
snapshotCanvas.height);
});
navigator.mediaDevices.getUserMedia({
video: true})
.then(handleSuccess);
</script>
カメラからのデータをキャンバスオブジェクトに保存した後、さまざまな方法で処理できます。あなたはできる：
1.サーバーに直接アップロードします
2.ローカルに保存します
3.楽しい特殊効果を画像に適用する
不要になったときにカメラからのビデオのストリーミング
を停止します。不要になったときは、カメラの使用を停止することをお勧めします。これにより、バッテリー電力と処理能力を節約できるだけでなく、アプリケーションのユーザーエクスペリエンスを向上させることもできます。
カメラへのアクセスを停止するには、getUserMedia（）から返された写真ストリームの各ビデオトラックでstop（）を呼び出します。
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="snapshot" width=320 height=240></canvas>
<script>
var player = document.getElementById('player');
var snapshotCanvas = document.getElementById('snapshot');
var captureButton = document.getElementById('capture');
var videoTracks;
var handleSuccess = function(stream) {
// Attach the video stream to the video element and autoplay.
player.srcObject = stream;
videoTracks = stream.getVideoTracks();
};
captureButton.addEventListener('click', function() {
var context = snapshot.getContext('2d');
context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height);
// Stop all video streams.
videoTracks.forEach(function(track) {
track.stop()});
});
navigator.mediaDevices.getUserMedia({
video: true})
.then(handleSuccess);
</script>
ユーザーが以前にカメラへのWebサイトへのアクセスを許可していない場合、ブラウザーはgetUserMediaを呼び出すときにすぐにWebサイトへのカメラへのアクセスを許可するようにユーザーに求めます。
ユーザーは、強力なデバイスにアクセスするためのプロンプトを自分のマシンで受信することを嫌い、許可要求をブロックすることがよくあります。許可が最初に必要な場合にのみ、カメラへのアクセスを要求することがベストプラクティスです。ユーザーがアクセスを許可すると、再度プロンプトが表示されることはありません。ただし、ユーザーが認証を拒否した場合、ユーザーがカメラの権限設定を手動で変更しない限り、再びアクセスすることはできません。