134 lines
3.8 KiB
Vue
134 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<video-background
|
|
src="/video/bg-video.mp4"
|
|
style=" height: 100vh;"
|
|
poster="/images/poster.png"
|
|
>
|
|
|
|
<div class="container-fluid pt-3">
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-lg-3 text-center text-sm-start">
|
|
<nuxt-link class="navbar-brand" to="/">
|
|
<img src="/svglogo.svg" height="35" class="img " alt="imae">
|
|
</nuxt-link>
|
|
</div>
|
|
|
|
|
|
<div class="col-12 text-center d-flex justify-content-center col-lg-12 pt-1">
|
|
<div class="progress mx-auto mt-2 " style="width: 50%;height: 12px">
|
|
<div class="progress-bar bar" style="transition: 0.1s !important;" :style="{width:bar_width+'%'}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 pt-3">
|
|
<h6 class="text-muted text-center">{{t("We are analyzing your background noise...")}} </h6>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<NuxtPage page-key="child" />
|
|
|
|
|
|
<div class="row pt-5 mt-0 mt-sm-4 " style="position: fixed;bottom: 0px;left: 0;right: 0">
|
|
<div class="col-12 text-center pt-5 mt-3 pb-2 mb-2" >
|
|
<NuxtLink class="btn btn-warning px-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding')"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning mx-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding2')"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-2 " exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding3')"></NuxtLink>
|
|
<NuxtLink class="btn btn-warning px-2 mx-2" exact-active-class="px-4 mx-2" :to="localePath('/onboarding/onboarding4')"></NuxtLink>
|
|
<h6 class="text-muted text-center pt-3">You can customize your selection later</h6>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</video-background>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {useCounterStore} from '@/stores/counter';
|
|
import {mapState,mapActions} from "pinia";
|
|
export default {
|
|
setup() {
|
|
const {t} = useI18n()
|
|
const localePath = useLocalePath()
|
|
|
|
return {
|
|
t,
|
|
localePath,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(useCounterStore, ['count'])
|
|
},
|
|
methods:{
|
|
...mapActions(useCounterStore,['increment']),
|
|
...mapActions(useCounterStore,['decrement']),
|
|
updateMeter(){
|
|
requestAnimationFrame(this.updateMeter);
|
|
this.analyser.getByteFrequencyData(this.dataArray);
|
|
var rms = this.getRMS(this.dataArray);
|
|
var level = 20 * Math.log10(rms / 128);
|
|
level = Math.max(0, Math.min(100, level + 100));
|
|
// bar.style.width = level + '%';
|
|
|
|
this.bar_width=level;
|
|
|
|
},
|
|
getRMS(dataArray) {
|
|
var rms = 0;
|
|
for (var i = 0; i < dataArray.length; i++) {
|
|
rms += dataArray[i] * dataArray[i];
|
|
}
|
|
rms /= dataArray.length;
|
|
rms = Math.sqrt(rms);
|
|
return rms;
|
|
}
|
|
},
|
|
mounted() {
|
|
navigator.mediaDevices.getUserMedia({audio: true})
|
|
.then((stream)=> {
|
|
var audioCtx = new AudioContext();
|
|
var source = audioCtx.createMediaStreamSource(stream);
|
|
this.analyser = audioCtx.createAnalyser();
|
|
source.connect(this.analyser);
|
|
this.analyser.fftSize = 2048;
|
|
var bufferLength = this.analyser.frequencyBinCount;
|
|
this.dataArray = new Uint8Array(bufferLength);
|
|
|
|
this.updateMeter();
|
|
})
|
|
.catch(function(err) {
|
|
console.log('Error accessing microphone', err);
|
|
});
|
|
|
|
|
|
},
|
|
data(){
|
|
return{
|
|
bar_val:25,
|
|
bar_width:0,
|
|
analyser:null,
|
|
dataArray:null,
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style >
|
|
.bar{
|
|
background-color: #e9c046 !important;
|
|
}
|
|
.checklabel{
|
|
background-color: white !important;
|
|
width: 150px ;
|
|
height: 134px ;
|
|
}
|
|
.px-4{
|
|
transition: 1s;
|
|
}
|
|
</style> |