Lets user choose the right type of audio input (attempt #1)

Author: Veronika271

src/components/InputSelector/InputSelector.vue

@@ -308,6 +308,7 @@ export default {
     ipAddress: {
       type: String,
     },
+
   },
   components: {
     ParticipantId,
@@ -328,12 +329,12 @@ export default {
     TimeRange,
     SelectInput,
     StaticReadOnly,
+    //InputSelector-AudioRecord: AudioRecord
     // Static,
   },
   data() {
     return {
-
-    };
+    }
   },
   methods: {
     skip() {

src/components/Inputs/WebAudioRecord/Audio.vue

@@ -5,6 +5,13 @@
       <div v-if="mode==='audioImageRecord'" class="mb-3">
         <img class="img-fluid" :src="fieldData['http://schema.org/image'][0]['@id']" />
       </div>
+    <!--Added by Veronika - trying to open a select menu if audio input type not indicated-->
+    <div v-if="(!audioStreamDevice)" onload="getDevices">
+      <label>Please select the type of microphone you wish to use.</label>
+      <select @change="nameDevice">
+        <option v-for="device in devices" :key="device" :value="device">{{ device }}</option>
+      </select>
+    </div>
       <div v-if="mode==='audioRecordNumberTask'" class="mb-3">
         <strong style="font-size:30px">{{ generateNumber }}</strong>
       </div>
@@ -27,26 +34,32 @@
         <span> {{ $t('play-button') }} </span>
       </b-button>
 
+
       <b-button variant="secondary"
                 v-if="hasRecording && isPlaying" @click="pause" ref="play">
         <span> {{ $t('pause-button') }} </span>
       </b-button>
 
+
       <div v-if="hasRecording" class="mt-2">
         <a href="" @click="reset">{{ $t('redo-recording') }}</a>
       </div>
     </div>
   </div>
 </template>
 
+
 <style>
 </style>
 
+
 <script>
   import _ from 'lodash';
 
+
   const MediaStreamRecorder = require('msr');
 
+
   export default {
     name: 'audioRecord',
     props: {
@@ -70,17 +83,43 @@
         isRecording: false,
         hasRecording: false,
         audioCtx: {},
-        audioConstraints: { audio: true, video: false },
+        audioConstraints: {
+          audio: {
+            deviceId:{exact:this.audioStreamDevice},
+          },
+          video: false },
         // chunks: [],
         mediaRecorder: {},
         supported: null,
         interval: {},
         timeRemaining: null,
         isPlaying: false,
+        devices: null,
+        tempDeviceName: null,
       };
     },
     methods: {
+      getDevices() {
+        navigator.mediaDevices.enumerateDevices().then((devices) => {
+          const audioInputDevices = devices.filter((device) => device.kind === 'audioinput');
+          this.devices = audioInputDevices.map((device) => device.label || `Microphone ${device.deviceId}`);
+        }).catch((err) => {
+          console.error("Error enumerating devices:", err);
+        });
+      },
+      selectAudioDevice(deviceId){
+        this.audioStreamDevice = deviceId;
+      },
+      nameDevice(e){
+        this.tempDeviceName = e.target.value
+      },
+      setDevice(){
+        this.$store.state.selectedAudioInput = this.tempDeviceName;
+      },
       record() {
+        if (!this.audioStreamDevice){
+          this.setDevice();
+        }
         this.isRecording = true;
         this.mediaRecorder.start(this.recordingTime);
         this.interval = setInterval(this.countdown, 1000);
@@ -133,6 +172,9 @@
       },
     },
     computed: {
+      audioStreamDevice(){
+        return this.$store.state.selectedAudioInput;
+      },
       recordingTime() {
         return this.constraints['http://schema.org/maxValue'][0]['@value'];
       },
@@ -151,6 +193,7 @@
       this.recording.onended = this.endPlay;
       const AudioContext = window.AudioContext || window.webkitAudioContext;
       this.audioCtx = new AudioContext();
+      this.getDevices()
       if (navigator.mediaDevices.getUserMedia) {
         this.supported = true;
         navigator.mediaDevices.getUserMedia(this.audioConstraints).then(this.initialize, this.error);
@@ -182,7 +225,7 @@
         if (this.init === 'skip' || this.init === 'dontKnow') {
           this.hasRecording = false;
         }
-      },
+      }
     },
   };
 </script>

src/store/store.js

@@ -28,7 +28,8 @@ const state = {
   queryParams: {},
   token: null,
   landing: [],
-  hasExport: false
+  hasExport: false,
+  selectedAudioInput: null
 };
 
 const getters = {