change camera devices & import path

src/views/SampleCamera.vue

@@ -2,19 +2,33 @@
 import Camera from 'simple-vue-camera'
 import { ref } from 'vue'
 
-const camera = ref<InstanceType<typeof Camera>>();
-
+const camera = ref<InstanceType<typeof Camera>>()
 const cameraIsOn = ref<boolean>(false)
+const deviceCamera = ref<any>()
 
-const cameraOff = () => {
-  cameraIsOn.value ? camera.value?.stop() : camera.value?.start()
+const cameraOff = async () => {
+  // change camera device
+  if (cameraIsOn.value) {
+    camera.value?.stop()
+  } else {
+    await camera.value?.start()
+    changeCamera()
+  }
   cameraIsOn.value = !cameraIsOn.value
 }
 
+// change camera device
+const changeCamera = async () => {
+  const devices: any = await camera.value?.devices(['videoinput'])
+  const device = await devices[0]
+  camera.value?.changeCamera(device.deviceId)
+  deviceCamera.value = devices
+}
+
 // Use camera reference to call functions
 const takePicture = async () => {
   const imageBlob = await camera.value?.snapshot(
-    { width: 640, height: 480 },
+    { width: 640, height: 640 },
     'image/png',
     0.5
   )
@@ -25,8 +39,8 @@ const takePicture = async () => {
 </script>
 
 <template>
-  <div class="row col-12">
-    <div class="col-3">
+  <div class="row col-md-12 col-sm-12">
+    <div class="col-md-3">
       <Camera
         :resolution="{ width: 500, height: 500 }"
         ref="camera"
@@ -36,7 +50,10 @@ const takePicture = async () => {
           >I'm on top of the video</q-btn
         >
         <q-btn color="primary" @click="takePicture">Take Picture</q-btn>
+        <q-btn color="primary" @click="changeCamera">changeCamera</q-btn>
       </Camera>
+
+      {{ deviceCamera }}
     </div>
   </div>
 </template>