2023-06-11 20:22:41 +00:00
|
|
|
|
<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>
|
2023-10-11 20:07:28 +00:00
|
|
|
|
<div class="row justify-content-center ">
|
2023-06-11 20:22:41 +00:00
|
|
|
|
<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>
|
2023-10-12 00:09:48 +00:00
|
|
|
|
<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>
|
2023-06-11 20:22:41 +00:00
|
|
|
|
</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>
|
2023-10-12 00:09:48 +00:00
|
|
|
|
<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>
|
2023-06-11 20:22:41 +00:00
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row justify-content-center pt-3">
|
2023-10-11 20:07:28 +00:00
|
|
|
|
<div class="col-md-3 text-center" style="z-index: 1000000;">
|
2023-10-12 00:09:48 +00:00
|
|
|
|
<a href="#" @click.prevent="saveDevices" style="z-index: 1000000" class="btn col-4 next-btn" >NEXT</a>
|
2023-06-11 20:22:41 +00:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import {useCounterStore} from '@/stores/counter';
|
|
|
|
|
import {mapState,mapActions} from "pinia";
|
2023-10-12 00:09:48 +00:00
|
|
|
|
import {useUserStore} from "~/stores/user";
|
2023-06-11 20:22:41 +00:00
|
|
|
|
export default {
|
|
|
|
|
setup() {
|
|
|
|
|
const { t } = useI18n()
|
|
|
|
|
const localePath = useLocalePath()
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
t,
|
|
|
|
|
localePath,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
2023-10-12 00:09:48 +00:00
|
|
|
|
|
2023-06-11 20:22:41 +00:00
|
|
|
|
},
|
2023-10-12 00:09:48 +00:00
|
|
|
|
computed:{...mapState(useUserStore,['audioInputDevice','audioOutputDevice'])},
|
2023-06-11 20:22:41 +00:00
|
|
|
|
|
|
|
|
|
data(){
|
|
|
|
|
return{
|
|
|
|
|
bar_val:100,
|
|
|
|
|
form:{
|
|
|
|
|
soundscape:'',
|
2023-10-12 00:09:48 +00:00
|
|
|
|
},
|
|
|
|
|
audioInputDevices: [],
|
|
|
|
|
audioOutputDevices:[],
|
|
|
|
|
selectedInput: null,
|
|
|
|
|
selectedOutput: null,
|
|
|
|
|
stream: null,
|
|
|
|
|
|
2023-06-11 20:22:41 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
2023-10-12 00:09:48 +00:00
|
|
|
|
...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);
|
|
|
|
|
},
|
2023-06-11 20:22:41 +00:00
|
|
|
|
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);
|
2023-10-11 20:07:28 +00:00
|
|
|
|
this.$router.push(this.localePath('onboarding'));
|
2023-06-11 20:22:41 +00:00
|
|
|
|
}
|
|
|
|
|
}).catch((e)=>{
|
|
|
|
|
this.$toast.error("something went wrong while saving...");
|
|
|
|
|
})
|
2023-10-12 00:09:48 +00:00
|
|
|
|
},
|
|
|
|
|
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);
|
2023-06-11 20:22:41 +00:00
|
|
|
|
}
|
|
|
|
|
},
|
2023-10-12 00:09:48 +00:00
|
|
|
|
|
2023-06-11 20:22:41 +00:00
|
|
|
|
}
|
|
|
|
|
</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;
|
|
|
|
|
}
|
2023-10-11 20:07:28 +00:00
|
|
|
|
</style>
|