A simple component for VueJS to show PC camera or rear (i.e. back or environment) camera on mobile

It not so easy to set-up a <video> element to show the preview of the rear camera on mobile.

WebRTC Adapter allows to solve most of the issues with different browsers.

Here I built a simple Component the fantastic framework VueJs. The component allows simple integration of a view of rear-camera (or webcam on PCs) simply using the component:

<vue-app-or-other-component>
	<camera-component></camera-component>
<vue-app-or-other-component>

To use the component simply import the component and use it in your templates or HTML files

import VueCamera from '@/components/vue-camera.vue'

Vue.component('camera-component', VueCamera);

See the demo here.

1. Simple usage
2. Solves common issues of rear camera on mobile web apps, using Adapter and "ideal" constraints to get best camera settings.

• Make the component a .vue SFC
• Add "Take snapshot" feature with canvas
• Have an option for adding a canvas to play with video image