barcode-frontend-backend-docker/docker-front/front/src/components/webcam.vue

<template>
  <div ref="main" :style="{ height: height + 'px' }" style="display: flex">
    <select  @change="startCapture()" v-model="selected_camera">
      <option  :value="index" v-for="(device, index) in devices">
      {{ device.label }}
      </option>
    </select>
    <div style="display: flex; height: 90%; overflow: scroll">
    <video ref="video" :height="height-100" :src="this.source"
    :autoplay="this.autoplay" ></video>
    </div>
  </div>
</template>

<script>
export default {
    data: function () {
        return {
            stream: '',
            source: '',
            canvas: null,
            devices: [],
            selected_camera: 0,
            videoWidth: 1,
            videoHeight: 1,
        }
    },
    props: {
        maxres: {
            type: Number,
            default: 5000
        },
        height: {
            type: Number
        },
        autoplay: {
            type: Boolean,
            default: true
        },
        screenshotFormat: {
          type: String,
          default: 'image/jpeg'
        }
    },
    mounted() {
        var self = this
        window.a = this
        if (!this.hasMedia()) {
            this.$emit('notsupported');
            return;
        }
        window.navigator.mediaDevices.enumerateDevices().then(devices => {
          self.devices = devices.filter(device => { return device.kind==="videoinput"})
          db.getSelectedCameraIndex().then(data => {
            self.selected_camera = data.index
            self.startCapture()
          })
        })
        this.requestMedia();
        this.$refs.video.addEventListener('loadedmetadata', data => {
            this.$emit('ready')
        })

    },
    destroyed: function () {
      this.stop()
    },
    methods: {
        hasMedia() {
            return !!this.getMedia();
        },
        getMedia() {
            return (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia);
        },
        requestMedia() {
            navigator.getUserMedia = this.getMedia();
        },
        capture() {
            if (!this.hasMedia()) {
                this.$emit('notsupported');
                return null;
            }
            return this.getCanvas().toDataURL(this.screenshotFormat);
        },
        getCanvas() {
            let video = this.$refs.video;
            if (!this.ctx && video.videoHeight) {
                let canvas = document.createElement('canvas');
                canvas.height = video.videoHeight;
                canvas.width = video.videoWidth;
                this.canvas = canvas;

                this.ctx = canvas.getContext('2d');
            }

            const { ctx, canvas } = this;
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            return canvas;r
        },
        stop() {
          try {
            this.stream.getVideoTracks()[0].stop()
          }
          catch(err) { console.log(err) }
        },
        startCapture: function () {
         db.setSelectedCameraIndex(this.selected_camera)
         this.stop()
         if (navigator.getUserMedia) {
          var self = this
          navigator.getUserMedia({
              video: { deviceId: { exact:
              self.devices[this.selected_camera].deviceId },
              width: {ideal: self.maxres},
              height: {ideal: self.maxres}
              }
            }, stream => {
            this.source = window.URL.createObjectURL(stream);
            this.stream = stream;
            this.$emit('started', stream);
            window.stream = stream
        }, error => {
            this.$emit('error', error);
          });
        }
       }
    }
}
</script>