はじめに
Vue.jsでWebカメラで撮影した画像を取得するサンプルコードを紹介します
下記のコードをHTMLファイルで保存するだけでサクッと試せます
ググると、色々Vue.js＋Webカメラのサンプルコードが見つかりますが、うまく動かないものが多かったのでこちらのサイトのコードを自分で動くように直しました
（動かない原因はVue.jsのバージョンの違いだった気がします）
環境
- Vue.js v2.6.10
- Chrome
- Windows 10
画面
こんな感じです
- 【画面上】Webカメラの映す映像（PCのカメラを紙で隠してます）
- 【画面下】"Snap photo"ボタン（押すと、写真を撮影します）
写真を撮ると、ボタンの下にポンポン追加されていきます
写真のデータはBase64で配列に格納されています
これを取り出したりすると、任意の画像をサーバーに送るなりして好きに使えます
コード
こちらに以下の内容と同じものをアップしています
https://github.com/koinoue0315/vue-camera-sample/tree/master
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<div>
<video ref="video" id="video" width="500" height="500" autoplay></video>
<div>
<button color="info" id="snap" v-on:click="capture()">Snap Photo</button>
</div>
<canvas ref="canvas" id="canvas" width="500" height="500"></canvas>
<ul>
<li class="capture" v-for="c in captures" v-bind:key="c.d">
<img v-bind:src="c" height="50" />
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
video: {},
canvas: {},
captures: []
},
mounted () {
this.video = this.$refs.video
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
this.video.srcObject = stream
this.video.play()
})
}
},
methods: {
capture () {
this.canvas = this.$refs.canvas
this.canvas.getContext('2d').drawImage(this.video, 0, 0, 500, 500)
this.captures.push(this.canvas.toDataURL('image/png'))
console.log(this.captures)
}
}
});
</script>
</body>
</html>
<style>
#canvas {
display: none;
}
.capture {
/* display: inline; */
padding: 5px;
}
</style>
ちょっと解説
"Snap Photo"ボタンをクリックすると、capture () が呼び出されて
this.captures.push(this.canvas.toDataURL('image/png'))
ここに撮った写真を詰めています
this.canvas.getContext('2d').drawImage(this.video, 0, 0, 500, 500)
保存する画像のサイズはここで指定できます
あとがき
この前このコードを使ったアプリを作りましたが、Vueでアプリ書くと楽しいですね
Vuetify使うと、整ったUIが簡単に出来て更に楽しいです
他のUIフレームワークも使ってまた開発したいなーと思ってます