HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge b76beac39a into 7dee88ca01

Browse Source
This commit is contained in:
jade 2025-02-12 18:44:32 +00:00 committed by GitHub
commit 6bfeb85b44
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 89 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cool-creatures-crawl.md Normal file
View File

@ -0,0 +1,5 @@
---
"@jspsych/plugin-html-audio-response": patch
---
added error handling if a microphone is not detected on trial start

5
.changeset/fluffy-books-act.md Normal file
View File

@ -0,0 +1,5 @@
---
"@jspsych/plugin-html-video-response": patch
---
added error handling if a camera is not detected on trial start

5
.changeset/hungry-elephants-jam.md Normal file
View File

@ -0,0 +1,5 @@
---
"@jspsych/plugin-initialize-microphone": minor
---
added custom rejection message upon microphone permission denial

5
.changeset/poor-cherries-pay.md Normal file
View File

@ -0,0 +1,5 @@
---
"@jspsych/plugin-initialize-camera": minor
---
added custom rejection message upon camera permission denial

1
docs/plugins/initialize-camera.md
View File

@ -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). 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). 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"'`. 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 ## Data Generated

1
docs/plugins/initialize-microphone.md
View File

@ -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. 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. 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 ## Data Generated

22
examples/jspsych-initialize-camera.html
View File

@ -1,12 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="../packages/jspsych/dist/index.browser.js"></script> <script src="../packages/jspsych/dist/index.browser.js"></script>
<script src="../packages/plugin-initialize-camera/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"> <script src="../packages/plugin-html-video-response/dist/index.browser.js"></script>
</head> <link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
<body></body> </head>
<script> <body></body>
<script>
var jsPsych = initJsPsych(); var jsPsych = initJsPsych();
@ -14,7 +15,14 @@
type: jsPsychInitializeCamera, 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> jsPsych.run([init_camera, vr]);
</script>
</html> </html>

6
packages/plugin-html-audio-response/src/index.ts
View File

@ -122,11 +122,15 @@ class HtmlAudioResponsePlugin implements JsPsychPlugin<Info> {
private data_available_handler; private data_available_handler;
private recorded_data_chunks = []; private recorded_data_chunks = [];
constructor(private jsPsych: JsPsych) {} constructor(private jsPsych: JsPsych) { }
trial(display_element: HTMLElement, trial: TrialType<Info>) { trial(display_element: HTMLElement, trial: TrialType<Info>) {
this.recorder = this.jsPsych.pluginAPI.getMicrophoneRecorder(); 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.setupRecordingEvents(display_element, trial);
this.startRecording(); this.startRecording();

6
packages/plugin-html-video-response/src/index.ts
View File

@ -131,11 +131,15 @@ class HtmlVideoResponsePlugin implements JsPsychPlugin<Info> {
private data_available_handler; private data_available_handler;
private recorded_data_chunks = []; private recorded_data_chunks = [];
constructor(private jsPsych: JsPsych) {} constructor(private jsPsych: JsPsych) { }
trial(display_element: HTMLElement, trial: TrialType<Info>) { trial(display_element: HTMLElement, trial: TrialType<Info>) {
this.recorder = this.jsPsych.pluginAPI.getCameraRecorder(); 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.setupRecordingEvents(display_element, trial);
this.startRecording(); this.startRecording();

18
packages/plugin-initialize-camera/src/index.ts
View File

@ -41,6 +41,11 @@ const info = <const>{
type: ParameterType.STRING, type: ParameterType.STRING,
default: null, 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: { data: {
/** The [device ID](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId) of the selected camera. */ /** 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> { class InitializeCameraPlugin implements JsPsychPlugin<Info> {
static info = info; static info = info;
constructor(private jsPsych: JsPsych) {} constructor(private jsPsych: JsPsych) { }
trial(display_element: HTMLElement, trial: TrialType<Info>) { trial(display_element: HTMLElement, trial: TrialType<Info>) {
this.run_trial(display_element, trial).then((id) => { 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>) { private async run_trial(display_element: HTMLElement, trial: TrialType<Info>) {
try {
await this.askForPermission(trial); await this.askForPermission(trial);
} catch (e) {
this.rejectPermission(trial);
return null;
}
this.showCameraSelection(display_element, trial); 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; export default InitializeCameraPlugin;

16
packages/plugin-initialize-microphone/src/index.ts
View File

@ -16,6 +16,11 @@ const info = <const>{
type: ParameterType.STRING, type: ParameterType.STRING,
default: "Use this microphone", 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: { data: {
/** The [device ID](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId) of the selected microphone. */ /** 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>) { private async run_trial(display_element: HTMLElement, trial: TrialType<Info>) {
try {
await this.askForPermission(); await this.askForPermission();
} catch(e) {
this.rejectPermission(trial);
return null;
}
this.showMicrophoneSelection(display_element, trial); 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; export default InitializeMicrophonePlugin;