ok

nuxt.config.ts

@@ -283,6 +283,8 @@ export default defineNuxtConfig({
             "Mindboost creates soundscapes for your headphones that help you focus up to 35% better. Mindboost combines voice masking, binaural beats and alpha waves.":"Mindboost creates soundscapes for your headphones that help you focus up to 35% better. Mindboost combines voice masking, binaural beats and alpha waves.",
             "Our algorithm measures the acoustics of your cell phone or other device in the room in real time and generates a soundscape that optimally blocks out disruptive background noise such as colleagues on the phone.":"Our algorithm measures the acoustics of your cell phone or other device in the room in real time and generates a soundscape that optimally blocks out disruptive background noise such as colleagues on the phone.",
             "All soundscapes in Mindboost have been tested and optimized in listening tests in cooperation with the Fraunhofer IBP. So you can be sure that Mindboost supports you optimally with your concentration.":"All soundscapes in Mindboost have been tested and optimized in listening tests in cooperation with the Fraunhofer IBP. So you can be sure that Mindboost supports you optimally with your concentration.",
+            'Audio_Output':'Audio Output',
+            'Audio_Input':'Audio Input',
         },
         de: {
             "welcome": "Willkommen",
@@ -487,6 +489,8 @@ export default defineNuxtConfig({
             "Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, jederzeit gegen die Verarbeitung Sie betreffender personenbezogener Daten Widerspruch einzulegen, die auf Artikel 6 Absatz 1 Buchstabe e DSGVO (Datenverarbeitung im öffentlichen Interesse) und Artikel 6 Absatz 1 Buchstabe f DSGVO (Datenverarbeitung auf der Grundlage einer Interessenabwägung) beruht; dies gilt auch für ein auf dieser Bestimmung beruhendes Profiling nach Artikel 4 Nr. 4 DSGVO.":"Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, jederzeit gegen die Verarbeitung Sie betreffender personenbezogener Daten Widerspruch einzulegen, die auf Artikel 6 Absatz 1 Buchstabe e DSGVO (Datenverarbeitung im öffentlichen Interesse) und Artikel 6 Absatz 1 Buchstabe f DSGVO (Datenverarbeitung auf der Grundlage einer Interessenabwägung) beruht; dies gilt auch für ein auf dieser Bestimmung beruhendes Profiling nach Artikel 4 Nr. 4 DSGVO.",
             "Informationen zu Ihrem Widerspruchsrecht gemäß Art. 21 DSGVO":"Informationen zu Ihrem Widerspruchsrecht gemäß Art. 21 DSGVO",
             "gemäß Art. 77 DSGVO bei einer Aufsichtsbehörde zu beschweren. In der Regel können Sie sich hierfür an die Aufsichtsbehörde an Ihrem üblichen Aufenthaltsort oder Arbeitsplatz oder unserem Firmensitz wenden.":"gemäß Art. 77 DSGVO bei einer Aufsichtsbehörde zu beschweren. In der Regel können Sie sich hierfür an die Aufsichtsbehörde an Ihrem üblichen Aufenthaltsort oder Arbeitsplatz oder unserem Firmensitz wenden.",
+            'Audio_Output':'Audioausgang',
+            'Audio_Input':'Audioeingang',
         }
     }
 }

pages/onboarding/selectinput.vue

@@ -14,8 +14,8 @@
             <div class="col-md-3 text-center">
               <h6 class="pb-0 mb-0">Input device:</h6>
               <p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select laptop or mobile device microphone)</p>
-              <select class="form-select pt-1 mt-0 select-box ">
+              <select class="form-select pt-1 mt-0 select-box " v-model="selectedInput">
-                <option>Internal Microphone</option>
+                <option :value="index" v-for="(item,index) in audioInputDevices"  :key="index" >{{item.label}}</option>
               </select>
             </div>
           </div>
@@ -24,15 +24,15 @@
             <div class="col-md-3 text-center">
               <h6 class="pb-0 mb-0 " >Output device:</h6>
               <p class="pt-0 mt-0 text-muted pb-0 mb-0" style="font-size: 14px;font-weight: 500">(select headphones or headphone output)</p>
-              <select class="form-select pt-1 mt-0 select-box ">
+              <select class="form-select pt-1 mt-0 select-box " v-model="selectedOutput">
-                <option>Audio Output</option>
+                <option :value="index" v-for="(item,index) in audioOutputDevices" :key="index">{{item.label}}</option>
               </select>
             </div>
           </div>
 
           <div class="row justify-content-center pt-3">
             <div class="col-md-3 text-center" style="z-index: 1000000;">
-              <NuxtLink :to="localePath('onboarding')" style="z-index: 1000000"  class="btn col-4 next-btn" >NEXT</NuxtLink>
+              <a href="#" @click.prevent="saveDevices" style="z-index: 1000000"  class="btn col-4 next-btn" >NEXT</a>
             </div>
           </div>
         </form>
@@ -46,6 +46,7 @@
 <script>
 import {useCounterStore} from '@/stores/counter';
 import {mapState,mapActions} from "pinia";
+import {useUserStore} from "~/stores/user";
 export default {
   setup() {
     const { t } = useI18n()
@@ -57,21 +58,51 @@ export default {
     }
   },
   mounted() {
-    this.increment(100);
+
   },
-  computed:{...mapState(useCounterStore,['count'])},
+  computed:{...mapState(useUserStore,['audioInputDevice','audioOutputDevice'])},
 
   data(){
     return{
       bar_val:100,
       form:{
         soundscape:'',
-      }
+      },
+      audioInputDevices: [],
+      audioOutputDevices:[],
+      selectedInput: null,
+      selectedOutput: null,
+      stream: null,
+
     }
   },
   methods:{
-    ...mapActions(useCounterStore,['increment']),
+    ...mapActions(useUserStore,['saveInputdevice','saveOutputDevice']),
-    ...mapActions(useCounterStore,['decrement']),
+    async changeDevice() {
+      await this.getUserMedia();
+    },
+    saveDevices(){
+      console.log('Save');
+      this.saveInputdevice(this.audioInputDevices[this.selectedInput])
+      this.saveOutputDevice(this.audioOutputDevices[this.selectedOutput]);
+      this.$router.push(this.localePath('/onboarding'));
+    },
+     getUserMedia() {
+      const constraints = {
+        audio: { deviceId: this.selectedDevice ? { exact: this.selectedDevice } : undefined },
+      };
+
+      try {
+       return  navigator.mediaDevices.getUserMedia(constraints);
+
+      } catch (error) {
+        console.error('Error accessing media devices: ', error);
+      }
+    },
+  },
+   handleError(error) {
+  console.error('Error: ', error);
+  },
     saveSetting(value){
       this.form.soundscape=value;
       this.$axios.post('/api/update-setting',this.form).then(({data})=>{
@@ -83,8 +114,26 @@ export default {
       }).catch((e)=>{
         this.$toast.error("something went wrong while saving...");
       })
+    },
+   created() {
+    try {
+      this.getUserMedia().then(()=>{
+      navigator.mediaDevices.enumerateDevices().then((devices)=>{
+          console.log(devices);
+          this.audioInputDevices =  devices.filter((device) => device.kind === 'audioinput');
+          this.audioOutputDevices =  devices.filter((device) => device.kind === 'audiooutput');
+          this.selectedDevice = this.audioInputDevices.length > 0 ? this.audioInputDevices[0].deviceId : null;
+          this.selectedInput=this.audioInputDevices.findIndex((item)=>item.deviceId==this.audioInputDevice.deviceId);
+          this.selectedOutput=this.audioOutputDevices.findIndex((item)=>item.deviceId==this.audioOutputDevice.deviceId);
+          console.log(this.selectedDevice);
+        });
+      });
+
+    } catch (error) {
+      console.error('Error enumerating media devices: ', error);
     }
   },
+
 }
 </script>
 

pages/setting/soundscap.vue

@@ -75,30 +75,84 @@
 
                 </ul>
               </div>
+              <div class="row">
+                <div class="col-12">
+                  <div class="row pt-3">
+                    <div class="col-7 ps-4 ">
+                      <p class="fs-6 ms-2">{{t("Adaptive soundcape")}} </p>
+                    </div>
+                    <div class="col-5 pe-4">
+                      <div class="form-check form-switch  float-end">
+                        <input class="form-check-input" :checked="adaptiveSounscape"  @change="saveSetting(true,'adaptiveSounscape')" type="checkbox" role="switch" id="flexSwitchCheckDefault">
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingThree" type="button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
+                    {{t("Audio_Input")}}
+                  </button>
+                </h2>
+
+                <ul class="dropdown-menu dropdown-menu-end me-4" aria-labelledby="dropdownMenuButton2">
+                  <li class="px-1" v-for="(item,index) in audioInputDevices">
+                    <a :class="{'drop-active':item.deviceId==audioInputDevice().deviceId}" @click.prevent="saveInputdevice(item)" class="dropdown-item py-2 text-muted fw-bold fs-6" to="/" style="border-bottom: 1px solid lightgray;" :key="index"> {{item.label}} <span class="float-end">
+                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="20" height="20" viewBox="0 0 256 256" xml:space="preserve">
+
+<defs>
+</defs>
+<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
+	<path d="M 45 70.968 c -16.013 0 -29.042 -13.028 -29.042 -29.042 c 0 -1.712 1.388 -3.099 3.099 -3.099 c 1.712 0 3.099 1.388 3.099 3.099 C 22.157 54.522 32.404 64.77 45 64.77 c 12.595 0 22.843 -10.248 22.843 -22.843 c 0 -1.712 1.387 -3.099 3.099 -3.099 s 3.099 1.388 3.099 3.099 C 74.042 57.94 61.013 70.968 45 70.968 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 45 60.738 L 45 60.738 c -10.285 0 -18.7 -8.415 -18.7 -18.7 V 18.7 C 26.3 8.415 34.715 0 45 0 h 0 c 10.285 0 18.7 8.415 18.7 18.7 v 23.337 C 63.7 52.322 55.285 60.738 45 60.738 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 45 89.213 c -1.712 0 -3.099 -1.387 -3.099 -3.099 V 68.655 c 0 -1.712 1.388 -3.099 3.099 -3.099 c 1.712 0 3.099 1.387 3.099 3.099 v 17.459 C 48.099 87.826 46.712 89.213 45 89.213 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+	<path d="M 55.451 90 H 34.549 c -1.712 0 -3.099 -1.387 -3.099 -3.099 s 1.388 -3.099 3.099 -3.099 h 20.901 c 1.712 0 3.099 1.387 3.099 3.099 S 57.163 90 55.451 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill:#e9c046; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+</g>
+</svg>
+                    </span>
+                    </a>
+                  </li>
+
+                </ul>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingThree" type="button" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
+                    {{t("Audio_Output")}}
+                  </button>
+                </h2>
+
+                <ul class="dropdown-menu dropdown-menu-end me-4" aria-labelledby="dropdownMenuButton2">
+                  <li class="px-1" v-for="(item,index) in audioOutputDevices">
+                    <a :class="{'drop-active':item.deviceId==audioOutputDevice().deviceId}" @click.prevent="saveOutputDevice(item)" class="dropdown-item py-2 text-muted fw-bold fs-6" to="/" style="border-bottom: 1px solid lightgray;" :key="index"> {{item.label}} <span class="float-end">
+                     <svg xmlns="http://www.w3.org/2000/svg" version="1.0"  width="15" height="15" viewBox="0 0 75 75">
+<path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z"
+      style="stroke:#111;stroke-width:5;stroke-linejoin:round;fill:#111;"
+/>
+<path d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" style="fill:none;stroke:#111;stroke-width:5;stroke-linecap:round"/>
+</svg>
+                    </span>
+                    </a>
+                  </li>
+
+                </ul>
+              </div>
 
             </div>
           </div>
         </div>
-        <div class="row">
+
-          <div class="col-12">
-            <div class="row pt-3">
-              <div class="col-7 ps-4 ">
-                <p class="fs-6 ms-2">{{t("Adaptive soundcape")}} </p>
-              </div>
-              <div class="col-5 pe-4">
-                <div class="form-check form-switch  float-end">
-                  <input class="form-check-input" :checked="adaptiveSounscape"  @change="saveSetting(true,'adaptiveSounscape')" type="checkbox" role="switch" id="flexSwitchCheckDefault">
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script >
+import audioVisualClient from "~/plugins/AudioVisual.client";
+import {mapActions,mapState} from "pinia";
+import {useUserStore} from "~/stores/user";
+
 export default {
   name:'Soundscape',
   setup(){
@@ -114,7 +168,11 @@ data(){
      headphone_type:"",
      anc_type:"",
      adaptive_sound_scape:"",
-   }
+
+   },
+   audioInputDevices:[],
+   audioOutputDevices:[],
+   ...mapState(useUserStore,['audioInputDevice','audioOutputDevice'])
  }
 },
   mounted() {
@@ -122,6 +180,20 @@ data(){
   },
 
   methods:{
+    ...mapActions(useUserStore,['saveInputdevice','saveOutputDevice']),
+    audioVisualClient,
+    getUserMedia() {
+      const constraints = {
+        audio: { deviceId: this.selectedDevice ? { exact: this.selectedDevice } : undefined },
+      };
+
+      try {
+        return  navigator.mediaDevices.getUserMedia(constraints);
+
+      } catch (error) {
+        console.error('Error accessing media devices: ', error);
+      }
+    },
     fetchSettings(){
       this.$axios.post('/api/fetch-settings',this.form).then(({data})=>{
         console.log(data);
@@ -137,6 +209,7 @@ data(){
         this.$toast.error("something went wrong while saving...");
       })
     },
+
     saveSetting(value,type){
       console.log(this.adaptiveSounscape);
       if(type=='soundscape'){
@@ -166,7 +239,22 @@ data(){
         this.$toast.error("something went wrong while saving...");
       })
     }
-  }
+  },
+  created() {
+    try {
+      this.getUserMedia().then(()=>{
+        navigator.mediaDevices.enumerateDevices().then((devices)=>{
+          console.log(devices);
+          this.audioInputDevices =  devices.filter((device) => device.kind === 'audioinput');
+          this.audioOutputDevices =  devices.filter((device) => device.kind === 'audiooutput');
+          this.selectedDevice = this.audioInputDevices.length > 0 ? this.audioInputDevices[0].deviceId : null;
+        });
+      });
+
+    } catch (error) {
+      console.error('Error enumerating media devices: ', error);
+    }
+  },
 }
 </script >
 

stores/user.js

@@ -5,7 +5,9 @@ export const useUserStore = defineStore('user', {
         return {
             user:{},
             is_login:false,
-            token:''
+            token:'',
+            audioInputDevice:{},
+            audioOutputDevice:{}
         }
     },
     // could also be defined as
@@ -23,6 +25,12 @@ export const useUserStore = defineStore('user', {
         },
         updateUser(user){
             this.user=user;
+        },
+        saveInputdevice(device){
+            this.audioInputDevice=device;
+        },
+        saveOutputDevice(device){
+            this.audioOutputDevice=device;
         }
     },
     getters:{