Skip to content

カメラで撮影した映像をブラウザに表示する

ブラウザからデバイスのカメラにアクセスし、その映像を <video> に表示してみます。

詳しいサンプルは MDN にも掲載されていますので、この記事では、ごく最低限のシンプルなサンプルを紹介します。

MediaDevices インターフェイス

ブラウザから端末のカメラにアクセスするには、MediaDevices インターフェイスの getUserMedia() メソッドを利用します。

これは古い Navigator.getUserMedia() というメソッドから置き換えられたものです。

実装のポイントは次の2点です。

  • navigator.mediaDevices.getUserMedia() メソッドでデバイスのカメラへのアクセスを取得する
  • URL.createObjectURL() メソッドで URL の形式に変換し、<video> の src 属性に渡す

このように実装することで、カメラからの入力を <video> で再生できます。

なお、セキュリティ上の観点から、ブラウザによっては HTTPS か localhost の環境でないと利用できないなどの制限があります。

サンプル

index.html

script.js

Comments are closed.