dev-audioprocessing/pages/onboarding/selectinput.vue

<template>
  <div>
    <div class="row">
      <div class="col-12 ">
        <h4 class="text-center fw-bold pt-5">{{t("How is your audio hardware connected?")}}</h4>
        <p class="text-center mb-0 pb-0 text-muted">As input, please select the microphone of your laptop or mobile device – not of your headphones.</p>
        <p class="text-center mt-0 pt-0 text-muted">To use Mindboost, headphones are required.</p>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-11 pt-md-4">
        <form>
          <div class="row justify-content-center ">
            <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 " v-model="selectedInput">
                <option :value="index" v-for="(item,index) in audioInputDevices"  :key="index" >{{item.label}}</option>
              </select>
            </div>
          </div>

          <div class="row justify-content-center pt-3">
            <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 " v-model="selectedOutput">
                <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;">
              <a href="#" @click.prevent="saveDevices" style="z-index: 1000000"  class="btn col-4 next-btn" >NEXT</a>
            </div>
          </div>
        </form>
      </div>

    </div>


  </div>
</template>
<script>
import {useCounterStore} from '@/stores/counter';
import {mapState,mapActions} from "pinia";
import {useUserStore} from "~/stores/user";
export default {
  setup() {
    const { t } = useI18n()
    const localePath = useLocalePath()

    return {
      t,
      localePath,
    }
  },
  mounted() {

  },
  computed:{...mapState(useUserStore,['audioInputDevice','audioOutputDevice'])},

  data(){
    return{
      bar_val:100,
      form:{
        soundscape:'',
      },
      audioInputDevices: [],
      audioOutputDevices:[],
      selectedInput: null,
      selectedOutput: null,
      stream: null,

    }
  },
  methods:{
    ...mapActions(useUserStore,['saveInputdevice','saveOutputDevice']),
    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})=>{
        console.log(data);
        if(data.success){
          // this.$toast.success(data.message);
          this.$router.push(this.localePath('onboarding'));
        }
      }).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>

<style scoped>
.bar{
  background-color: #e9c046;
}

.select-box{
  border: 2px solid #e9c046;
  box-shadow: none;
}

.select-box:focus{
  border: 2px solid #e9c046;
  box-shadow: none;

}
.next-btn{
  background: #e9c046;
  color: white;
  font-weight: 600;
  font-size: 18px;
  padding: 8px 10px;
}
.next-btn:hover{
  background: #e9c046;
  color: white;
}
</style>