video.vue

<template>
  <div id="app">
    <div>
      <button @click="startStream()">Start stream</button>
      <div>
        <video id="video"  autoplay width="320" height="240"></video>
        <div v-if="!stream">No stream found</div>
        <canvas id="canvas" width="320" height="240" style="display: none;"></canvas>
      </div>
    </div>
    <div>
      <button @click="makeImage()">Shoot</button>
      <button @click="uploadImage()">Upload selected</button>

      Images:
      <ul>
        <li v-for="(image, index) in images" v-bind:key="index">
          <img
            :src="image"
            @click="selectImage(index)"
            :class="selectedIndex === index ? 'border-1' : ''"
          >
        </li>
      </ul>
      <form>
        <input type="file" @change="handleForm($event)" />
      </form>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Video',
  data: () => ({
    images: [],
    stream: null,
    canvas: null,
    video: null,
    selectedIndex: null
  }),
  methods: {
    startStream: async function () {
      if (!this.stream) {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
        this.canvas = document.querySelector('#canvas')
        this.video = document.querySelector('#video')
        this.video.srcObject = this.stream
      }
    },
    makeImage: function () {
      this.canvas.getContext('2d').drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height)
      let dataUrl = this.canvas.toDataURL('image/jpeg')
      this.images.push(dataUrl)
    },
    uploadImage: function () {
      if (this.selectedIndex === null) {
        // this.$toast.error('Select image first')
        return
      }
      const dataUrl = this.images[this.selectedIndex]
      // fetch
      console.log('Uploading', dataUrl)
      // ...
    },
    handleForm: function (e) {
      e.preventDefault()
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (e) => {
        this.images.push(e.target.result)
      }
      reader.readAsDataURL(file)
    },
    selectImage: function (index) {
      this.selectedIndex = index
    }
  }
}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.border-1 {
  border: 5px solid red;
}
</style>