change camera devices & import path

src/main.ts

@@ -1,12 +1,12 @@
 import { createApp, defineAsyncComponent } from 'vue'
-import App from './App.vue'
-import './registerServiceWorker'
-import router from './router'
+import App from '@/App.vue'
+import '@/registerServiceWorker'
+import router from '@/router'
 import { createPinia } from 'pinia'
 
 import { Quasar, Dialog, Notify, Loading } from 'quasar'
 import '@vuepic/vue-datepicker/dist/main.css'
-import quasarUserOptions from './quasar-user-options'
+import quasarUserOptions from '@/quasar-user-options'
 
 import 'quasar/src/css/index.sass'
 import th from 'quasar/lang/th'

src/plugins/axios.ts

@@ -2,7 +2,7 @@ import axios from "axios"
 import config from "process"
 // import { dotnetPath } from "../path/axiosPath";
 // import { getToken } from "@baloise/vue-keycloak";
-import keycloak from "../plugins/keycloak"
+import keycloak from "@/plugins/keycloak"
 
 const axiosInstance = axios.create({
     withCredentials: false,

src/plugins/keycloak.ts

@@ -17,7 +17,9 @@ const initOptions = {
 
 const keycloak = new Keycloak(initOptions);
 
-keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
+keycloak.onAuthSuccess = () => {
+    //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
+};
 
 await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak
 export default keycloak;

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>