Vuejs Camera Integration

Apr 11, 2021 One-minute read

A vuejs component to display live video from a locally connected camera in browser.

Camera.vue

The component can also capture photos from the live video feed. 

capture () {
  this.canvas = this.$refs.canvas
  this.canvas.getContext('2d').drawImage(this.video, 0, 0, 640, 480)
  this.captures.push(this.$refs.canvas.toDataURL())
  this.picture = this.$refs.canvas.toDataURL()
}

For the full component checkout the snippet on my gitlab here.