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/.changeset/violet-hairs-tap.md b/.changeset/violet-hairs-tap.md
diff --git a/docs/plugins/initialize-camera.md b/docs/plugins/initialize-camera.md
@@ -18,11 +18,12 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 Parameter | Type | Default Value | Description
 ----------|------|---------------|------------
 device_select_message | html string | `<p>Please select the camera you would like to use.</p>` | The message to display when the user is presented with a dropdown list of available devices.
-button_label | sting | 'Use this camera.' | The label for the select button.
+button_label | string | 'Use this camera.' | The label for the select button.
 include_audio | bool | false | Set to `true` to include an audio track in the recordings.
 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
@@ -18,7 +18,8 @@ In addition to the [parameters available in all plugins](../overview/plugins.md#
 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 | sting | 'Use this microphone.' | The label for the select button.
+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
@@ -73,11 +73,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
@@ -73,11 +73,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
@@ -33,6 +33,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>`,
+ },
  },
 };
 
@@ -49,7 +54,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) => {
@@ -61,7 +66,13 @@ 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) {
+ // TODO: does not properly display rejection message
+ this.rejectPermission(trial);
+ return;
+ }
 
  this.showCameraSelection(display_element, trial);
 
@@ -147,6 +158,12 @@ class InitializeCameraPlugin implements JsPsychPlugin<Info> {
  });
  });
  }
+
+ private rejectPermission(trial: TrialType<Info>) {
+ this.jsPsych.getDisplayElement().innerHTML = "";
+
+ this.jsPsych.endExperiment(trial.rejection_message, {});
+ }
 }
 
 export default InitializeCameraPlugin;
diff --git a/packages/plugin-initialize-microphone/src/index.ts b/packages/plugin-initialize-microphone/src/index.ts
@@ -3,16 +3,21 @@ import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
 const info = <const>{
  name: "initialize-microphone",
  parameters: {
- /** Function to call */
+ /** The message that prompts the participant to select a microphone. */
  device_select_message: {
  type: ParameterType.HTML_STRING,
  default: `<p>Please select the microphone you would like to use.</p>`,
  },
- /** Is the function call asynchronous? */
+ /** Label of the button that confirms selection of the microphone. */
  button_label: {
  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>`,
+ },
  },
 };
 
@@ -40,7 +45,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;
+ }
 
  this.showMicrophoneSelection(display_element, trial);
 
@@ -106,6 +116,12 @@ class InitializeMicrophonePlugin implements JsPsychPlugin<Info> {
  });
  });
  }
+
+ private rejectPermission(trial: TrialType<Info>) {
+ this.jsPsych.getDisplayElement().innerHTML = "";
+
+ this.jsPsych.endExperiment(trial.rejection_message, {});
+ }
 }
 
 export default InitializeMicrophonePlugin;