過去にWebRTCの利用をするべく、カメラを使ったサンプルをチュートリアル的に記事にしました。
この時はVue.js v2だったのですが、久々に見たらv3がリリースされてたのでアップデートしてみました。サッと調べて書いたくらいなので間違い等あれば指摘頂けると嬉しいです。
WebRTCといいつつ通信手前までなので悪しからず
何かと利用するかもしれないので残しておきます。
最終イメージ
こんな感じでセレクトボックスでカメラを選択するとカメラ映像がWebサイト上に描画されます。
コード全文
今回はカメラだけに集中して見たので、過去記事でやっていたマイクの記述をまるっと削除しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camera Test</title>
</head>
<body>
<h1>WebカメラVue v3テスト</h1>
<div id="app">
<p>
カメラ:
<select v-model="selectedVideo" @change="onChange">
<option disabled value="">Please select one</option>
<option v-for="(video, key, index) in videos" v-bind:key="index" :value="video.value">
{{ video.text }}
</option>
</select>
</p>
<video id="my-video" muted="true" width="500" autoplay playsinline></video>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
//Vue v3
const app = Vue.createApp({
data: () => ({
videos: [],
selectedVideo: '', //追記
}),
mounted: async function() {
//デバイスへのアクセス
const deviceInfos = await navigator.mediaDevices.enumerateDevices();
//カメラの情報を取得
deviceInfos
.filter(deviceInfo => deviceInfo.kind === 'videoinput')
.map(video => this.videos.push({text: video.label || `Camera ${this.videos.length - 1}`, value: video.deviceId}));
},
methods: {
onChange: function (){
if(this.selectedVideo != '') this.connectLocalCamera();
},
connectLocalCamera: async function (){
const constraints = {
video: this.selectedVideo ? { deviceId: { exact: this.selectedVideo } } : false
}
const stream = await navigator.mediaDevices.getUserMedia(constraints);
document.getElementById('my-video').srcObject = stream;
}
},
});
app.mount('#app');
</script>
</body>
</html>
Vue.js 2系から3系での書き方変更
2系の書き方
const app = new Vue({
el: '#app',
data: {
},
methods: {
},
mounted: async function () {
}
});
3系で変えたところ
-
new Vue=>Vue.createApp -
el: '#app'=>app.mount('#app'); - CDNの読み込み
<script src="https://unpkg.com/vue@next"></script>
といったところを変更したらうまく動作しました。
const app = Vue.createApp({
data: {
},
methods: {
},
mounted: async function () {
}
});
app.mount('#app');
所感など
思ったより変更箇所がなくてよかった。
（Vue.js v3の利点などは全然キャッチアップできてない）
今回の話題とは別問題な気がしますが、キャプチャーボード経由でMacの画面を出すことも出来たけど解像度が低い問題を解決できないか探りたいです。
