Vue.js

Vue.js 3 でカメラを使う

2021/12/23 追記：実はもっと良いやりかたがあった。videoタグを使わずinputでいける。こんど記事を書こうと思います。

では本編

撮影アプリならFlutterでやればいいのでは？と思ったのですが、高齢者向けのアプリなのでインストール不要のWebアプリで実装しましょう！とう方向で、写真アプリを開発してます。

いちにちハマったのでメモ。

結果📷

refを使った方法で実装する

先日から $refs を vue.js3 で書く方法に苦しめられてたのですが、理解した。たぶん。

Template Refs をみてもわからなかったのだよね..（あかん..また、強強エンジニアに助けてもらったのでした..）

<template>
  <div class="camera">
    <video ref="video" autoplay width="300" height="200"></video>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  name: "Camera",

  setup() {
    const video = ref()

    onMounted(() => {
      if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({
          video: true,
          audio: false,
        }).then(stream => {
          if (video.value && video.value !== null) {
            video.value.srcObject = stream;
            video.value.play()
          }
        });
      }
    });

    return {
      video,
    };
  },
})
</script>

refを使わずに実装する

こちらは、完全にここの写経なのですが..

<template>
  <div class="camera">
    <video v-if="captureStream"
      :srcObject.prop="captureStream"
      id="video"
      autoplay
      playsinline
      muted
    ></video>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Camera",

  setup() {
    const captureStream = ref<MediaStream | undefined>();

    const constraints: MediaStreamConstraints = {
      video: true,
      audio: false,
    }

    const gotStream = (stream: MediaStream) => {
      captureStream.value = stream;
    }

    const handleError = (error: Error) => {
      console.error(error.name, error.message);
    }
    
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(gotStream)
      .catch(handleError);

    return {
      captureStream
    };
  },
})
</script>

今回はrefを使った方法を採用しました。

次は撮影機能だ〜📷

参考：

いろいろ徘徊した..

https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-with-jsx

https://qiita.com/kino15/items/8f8feffca54015555f4b

-Vue.js