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

この記事について

この記事では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ページ上に表示されます。

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

おわりに

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