tatsuyasusukida/!README-javascript-media-photo.md

## !README-javascript-media-photo.md

      
    Raw
  

              !README-javascript-media-photo.md
            
          
    📷 ブラウザで写真を撮影する方法

この記事のGistページ
動画版

この記事について

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

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

コーディングの準備
コーディング
動作確認

コーディングの準備

下記のコマンドを実行してコーディングの準備をします。
mkdir column-media-photo
cd column-media-photo
touch index.html script.js
コーディング

index.html

エディタでindex.htmlを開き、下記の内容を入力します。
クリックしてindex.htmlへ移動
script.js

エディタでscript.jsを開き、下記の内容を入力します。
クリックしてscript.jsへ移動
ポイントを下記に示します。

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

動作確認

下記のコマンドを実行するなどしてWebブラウザでindex.htmlを開きます。
open index.html
カメラへのアクセスの許可を求められるので「許可」ボタンをクリックします。

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

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

おわりに

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

  
## img-check-01.png

      
    Raw
  

              img-check-01.png
            
          
## img-check-02.png

      
    Raw
  

              img-check-02.png
            
          
## img-check-03.png

      
    Raw
  

              img-check-03.png
            
          
## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptで写真を撮影する方法</title>
  </head>
  <body>
    <div>
      <video autoplay muted playsinline id="video"></video>
    </div>
    <div>
      <button type="button" id="button">撮影</button>
    </div>
    <div>
      <img id="image" alt="">
    </div>
  </body>
  <script src="script.js"></script>
</html>

## script.js
async function main () {
  try {
    const video = document.querySelector('#video') // <1>
    const button = document.querySelector('#button')
    const image = document.querySelector('#image')

    const stream = await navigator.mediaDevices.getUserMedia({ // <2>
      video: {
        facingMode: 'user',
        // facingMode: 'environment',
      },
      audio: false,
    })

    video.srcObject = stream // <3>

    const [track] = stream.getVideoTracks()
    const settings = track.getSettings()
    const {width, height} = settings // <4>

    button.addEventListener('click', event => { // <5>
      const canvas = document.createElement('canvas') // <6>
      canvas.setAttribute('width', width)
      canvas.setAttribute('height', height)

      const context = canvas.getContext('2d')
      context.drawImage(video, 0, 0, width, height) // <7>

      const dataUrl = canvas.toDataURL('image/jpeg') // <8>
      image.setAttribute('src', dataUrl) // <9>
    })
  } catch (err) {
    console.error(err)
  }
}

main()
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScriptで写真を撮影する方法</title>
	</head>
	<body>
	<div>
	<video autoplay muted playsinline id="video"></video>
	</div>
	<div>
	<button type="button" id="button">撮影</button>
	</div>
	<div>
	<img id="image" alt="">
	</div>
	</body>
	<script src="script.js"></script>
	</html>
	async function main () {
	try {
	const video = document.querySelector('#video') // <1>
	const button = document.querySelector('#button')
	const image = document.querySelector('#image')

	const stream = await navigator.mediaDevices.getUserMedia({ // <2>
	video: {
	facingMode: 'user',
	// facingMode: 'environment',
	},
	audio: false,
	})

	video.srcObject = stream // <3>

	const [track] = stream.getVideoTracks()
	const settings = track.getSettings()
	const {width, height} = settings // <4>

	button.addEventListener('click', event => { // <5>
	const canvas = document.createElement('canvas') // <6>
	canvas.setAttribute('width', width)
	canvas.setAttribute('height', height)

	const context = canvas.getContext('2d')
	context.drawImage(video, 0, 0, width, height) // <7>

	const dataUrl = canvas.toDataURL('image/jpeg') // <8>
	image.setAttribute('src', dataUrl) // <9>
	})
	} catch (err) {
	console.error(err)
	}
	}

	main()