jspsych · jadeddelta · Oct 8, 2022 · Oct 18, 2022 · Nov 1, 2022 · Nov 1, 2022
diff --git a/.changeset/cool-creatures-crawl.md b/.changeset/cool-creatures-crawl.md
@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-html-audio-response": patch
+---
+
+added error handling if a microphone is not detected on trial start
diff --git a/.changeset/fluffy-books-act.md b/.changeset/fluffy-books-act.md
@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-html-video-response": patch
+---
+
+added error handling if a camera is not detected on trial start
diff --git a/.changeset/hungry-elephants-jam.md b/.changeset/hungry-elephants-jam.md
@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-initialize-microphone": minor
+---
+
+added custom rejection message upon microphone permission denial
diff --git a/.changeset/poor-cherries-pay.md b/.changeset/poor-cherries-pay.md
@@ -0,0 +1,5 @@
+---
+"@jspsych/plugin-initialize-camera": minor
+---
+
+added custom rejection message upon camera permission denial
diff --git a/docs/plugins/initialize-camera.md b/docs/plugins/initialize-camera.md
@@ -23,6 +23,7 @@ include_audio | bool | false | Set to `true` to include an audio track in the re
 width | int | null | Request a specific width for the recording. This is not a guarantee that this width will be used, as it depends on the capabilities of the participant's device. Learn more about `MediaRecorder` constraints [here](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints#requesting_a_specific_value_for_a_setting).
 height | int | null | Request a specific height for the recording. This is not a guarantee that this height will be used, as it depends on the capabilities of the participant's device. Learn more about `MediaRecorder` constraints [here](https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API/Constraints#requesting_a_specific_value_for_a_setting).
 mime_type | string | null | Set this to use a specific [MIME type](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/mimeType) for the recording. Set the entire type, e.g., `'video/mp4; codecs="avc1.424028, mp4a.40.2"'`.
+rejection_message | html string | `<p>You must allow access to a camera in order to participate in the experiment.</p>` | The message to display if the user rejects access to the camera.
 
 
 ## Data Generated

diff --git a/docs/plugins/initialize-microphone.md b/docs/plugins/initialize-microphone.md
@@ -19,6 +19,7 @@ Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
 device_select_message | html string | `<p>Please select the microphone you would like to use.</p>` | The message to display when the user is presented with a dropdown list of available devices.
 button_label | string | 'Use this microphone.' | The label for the select button.
+rejection_message | html string | `<p>You must allow access to a microphone in order to participate in the experiment.</p>` | The message to display if the user rejects access to the microphone.
 
 
 ## Data Generated

diff --git a/examples/jspsych-initialize-camera.html b/examples/jspsych-initialize-camera.html
@@ -1,20 +1,28 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <script src="../packages/jspsych/dist/index.browser.js"></script>
-  <script src="../packages/plugin-initialize-camera/dist/index.browser.js"></script>
-  <link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
-</head>
-<body></body>
-<script>
+  <head>
+    <script src="../packages/jspsych/dist/index.browser.js"></script>
+    <script src="../packages/plugin-initialize-camera/dist/index.browser.js"></script>
+    <script src="../packages/plugin-html-video-response/dist/index.browser.js"></script>
+    <link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
+  </head>
+  <body></body>
+  <script>
 
-  var jsPsych = initJsPsych();
+      var jsPsych = initJsPsych();
 
-  let init_camera = {
-    type: jsPsychInitializeCamera,
-  }
+      let init_camera = {
+        type: jsPsychInitializeCamera,
+      }
 
-  jsPsych.run([init_camera]);
+      let vr = {
+        type: jsPsychHtmlVideoResponse,
+        stimulus: `<p>Make a sad face</p>`,
+        recording_duration: 3500,
+        show_done_button: false,
+        allow_playback: true
+    };
 
-</script>
-</html>
+      jsPsych.run([init_camera, vr]);
+  </script>
+</html>
diff --git a/packages/plugin-html-audio-response/src/index.ts b/packages/plugin-html-audio-response/src/index.ts
@@ -122,11 +122,15 @@ class HtmlAudioResponsePlugin implements JsPsychPlugin<Info> {
   private data_available_handler;
   private recorded_data_chunks = [];
 
-  constructor(private jsPsych: JsPsych) {}
+  constructor(private jsPsych: JsPsych) { }
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     this.recorder = this.jsPsych.pluginAPI.getMicrophoneRecorder();
 
+    if (this.recorder === null) {
+      throw new Error('Error in html-audio-response plugin. A microphone has not been found, have you ran the initialize-microphone plugin?');
+    }
+
     this.setupRecordingEvents(display_element, trial);
 
     this.startRecording();

diff --git a/packages/plugin-html-video-response/src/index.ts b/packages/plugin-html-video-response/src/index.ts
@@ -131,11 +131,15 @@ class HtmlVideoResponsePlugin implements JsPsychPlugin<Info> {
   private data_available_handler;
   private recorded_data_chunks = [];
 
-  constructor(private jsPsych: JsPsych) {}
+  constructor(private jsPsych: JsPsych) { }
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     this.recorder = this.jsPsych.pluginAPI.getCameraRecorder();
 
+    if (this.recorder === null) {
+     throw new Error("Error in html-video-response plugin. A camera has not been found, have you ran the initialize-camera plugin?");
+    }
+
     this.setupRecordingEvents(display_element, trial);
 
     this.startRecording();

diff --git a/packages/plugin-initialize-camera/src/index.ts b/packages/plugin-initialize-camera/src/index.ts
@@ -41,6 +41,11 @@ const info = <const>{
       type: ParameterType.STRING,
       default: null,
     },
+    /** The message to display when permission to access the camera is rejected. */
+    rejection_message: {
+      type: ParameterType.HTML_STRING,
+      default: `<p>You must allow access to a camera in order to participate in the experiment.</p>`,
+    },
   },
   data: {
     /** The [device ID](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId) of the selected camera. */
@@ -74,7 +79,7 @@ type Info = typeof info;
 class InitializeCameraPlugin implements JsPsychPlugin<Info> {
   static info = info;
 
-  constructor(private jsPsych: JsPsych) {}
+  constructor(private jsPsych: JsPsych) { }
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     this.run_trial(display_element, trial).then((id) => {
@@ -85,7 +90,12 @@ class InitializeCameraPlugin implements JsPsychPlugin<Info> {
   }
 
   private async run_trial(display_element: HTMLElement, trial: TrialType<Info>) {
-    await this.askForPermission(trial);
+    try {
+      await this.askForPermission(trial);
+    } catch (e) {
+      this.rejectPermission(trial);
+      return null;
+    }
 
     this.showCameraSelection(display_element, trial);
 
@@ -171,6 +181,12 @@ class InitializeCameraPlugin implements JsPsychPlugin<Info> {
       });
     });
   }
+
+  private rejectPermission(trial: TrialType<Info>) {
+    this.jsPsych.getDisplayElement().innerHTML = "";
+
+    this.jsPsych.abortExperiment(trial.rejection_message, {});
+  }
 }
 
 export default InitializeCameraPlugin;
diff --git a/packages/plugin-initialize-microphone/src/index.ts b/packages/plugin-initialize-microphone/src/index.ts
@@ -16,6 +16,11 @@ const info = <const>{
       type: ParameterType.STRING,
       default: "Use this microphone",
     },
+    /** The message to display when permission to access the microphone is rejected. */
+    rejection_message: {
+      type: ParameterType.HTML_STRING,
+      default: `<p>You must allow access to a microphone in order to participate in the experiment.</p>`,
+    },
   },
   data: {
     /**  The [device ID](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId) of the selected microphone. */
@@ -60,7 +65,12 @@ class InitializeMicrophonePlugin implements JsPsychPlugin<Info> {
   }
 
   private async run_trial(display_element: HTMLElement, trial: TrialType<Info>) {
-    await this.askForPermission();
+    try {
+      await this.askForPermission();
+    } catch(e) {
+      this.rejectPermission(trial);  
+      return null;
+    }
 
     this.showMicrophoneSelection(display_element, trial);
 
@@ -126,6 +136,12 @@ class InitializeMicrophonePlugin implements JsPsychPlugin<Info> {
       });
     });
   }
+
+  private rejectPermission(trial: TrialType<Info>) {
+    this.jsPsych.getDisplayElement().innerHTML = "";
+
+    this.jsPsych.abortExperiment(trial.rejection_message, {});
+  }
 }
 
 export default InitializeMicrophonePlugin;