Vue.js

Vue.js 3 でカメラを使う

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

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

もくじ

  • refを使った方法で実装する
  • refを使わずに実装する

結果📷

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

先日から $refsvue.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

javascript WebカメラにWeb APIを使用してアクセスする

-Vue.js

© 2021 Mikke's blog