📷

ブラウザで写真を撮影する方法【動画版あり】

2022/04/19に公開

この記事について

この記事ではJavaScriptから Media Stream API を利用して写真を撮影する方法について紹介します。

https://www.youtube.com/watch?v=qZTaDnuMbjg

おおまかな手順

おおまかな手順を下記に示します。

  1. コーディングの準備
  2. コーディング
  3. 動作確認

コーディングの準備

下記のコマンドを実行してコーディングの準備をします。

mkdir column-media-photo
cd column-media-photo
touch index.html script.js

コーディング

index.html

エディタでindex.htmlを開き、下記の内容を入力します。

script.js

エディタでscript.jsを開き、下記の内容を入力します。

ポイントを下記に示します。

  1. HTMLページの要素を取得しています。
  2. カメラから動画を取り込むためのメディアストリームを取得しています。
  3. 取得したメディアストリームをvideo要素のソースに設定しています。
  4. メディアストリームの横幅と高さを求めています。
  5. ユーザがボタンをクリックした時のイベントハンドラを設定しています。
  6. canvas要素を生成しています。
  7. canvas要素にvideo要素を描画しています。
  8. canvas要素からData URLを生成しています。
  9. 生成したData URLをimage要素のソースに設定しています。

動作確認

下記のコマンドを実行するなどしてWebブラウザでindex.htmlを開きます。

open index.html

カメラへのアクセスの許可を求められるので「許可」ボタンをクリックします。

Webブラウザのアドレスバーの下に「このファイルが次の許可を求めています」「カメラを使用する」のメッセージに加え、ブロックボタンと許可ボタンが表示されています。

「許可」ボタンをクリックするとカメラから取り込まれた動画がWebページ上に表示されます。

Webページ中にカメラから取り込まれた動画が表示されています。動画の下には「撮影」ボタンが表示されています。

「撮影」ボタンをクリックするとカメラ動画から写真が生成されて「撮影」ボタンの下に表示されます。

「撮影」ボタンの下に写真が表示されています。

おわりに

この記事の関連記事として Media Stream APIを利用して音声を録音する方法 や 動画を撮影する方法を紹介しています。興味がありましたら併せてご覧いただければ幸いです。最後までお読みいただきありがとうございました!

GitHubで編集を提案

Discussion