mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
Compare commits
16 Commits
jspsych@8.
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
861cd1e646 | ||
|
|
51aefac75b | ||
|
|
54a9014cf7 | ||
|
|
86c1ff4587 | ||
|
|
7dee88ca01 | ||
|
|
5ab4cc7a0f | ||
|
|
d258a29aae | ||
|
|
ce30fca573 | ||
|
|
715092030a | ||
|
|
2feebbf9c4 | ||
|
|
b243de6735 | ||
|
|
c4f11e29e2 | ||
|
|
1f535826a2 | ||
|
|
8834532fc9 | ||
|
|
36e64efbfb | ||
|
|
cc1ca257f5 |
5
.changeset/sixty-ears-tan.md
Normal file
5
.changeset/sixty-ears-tan.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"jspsych": patch
|
||||||
|
---
|
||||||
|
|
||||||
|
add a default `mimeType` of `"video/webm" to `initializeCameraRecorder()`
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<script src="https://unpkg.com/jspsych@8.2.1"></script>
|
<script src="https://unpkg.com/jspsych@8.2.1"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.1.0"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.1"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.1.0"></script>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css">
|
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css">
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<script src="https://unpkg.com/jspsych@8.2.1"></script>
|
<script src="https://unpkg.com/jspsych@8.2.1"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.1.0"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.1"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.1.0"></script>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css">
|
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css">
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<script src="https://unpkg.com/jspsych@8.2.1"></script>
|
<script src="https://unpkg.com/jspsych@8.2.1"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@2.1.0"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.1"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@2.1.0"></script>
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@2.1.0"></script>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css">
|
<link rel="stylesheet" href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css">
|
||||||
|
|||||||
@ -63,7 +63,7 @@ This plugin does not yet support [simulation mode](../overview/simulation.md).
|
|||||||
Using the CDN-hosted JavaScript file:
|
Using the CDN-hosted JavaScript file:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.0"></script>
|
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@2.1.1"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
Using the JavaScript file downloaded from a GitHub release dist archive:
|
Using the JavaScript file downloaded from a GitHub release dist archive:
|
||||||
|
|||||||
@ -22,7 +22,7 @@ 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.
|
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).
|
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"'`. When provided with the default value of `null`, jsPsych will search for a compatible container/codec combination, with [common types listed here](../reference/jspsych-pluginAPI.md#initializecamerarecorder). If none are found, jsPsych will default to `'video/webm'` as the MIME type.
|
||||||
|
|
||||||
|
|
||||||
## Data Generated
|
## Data Generated
|
||||||
|
|||||||
@ -507,7 +507,9 @@ None.
|
|||||||
|
|
||||||
#### Description
|
#### Description
|
||||||
|
|
||||||
Generates a `MediaRecorder` object from provided `MediaStream` and stores this for access via [`getCameraRecorder()`](#getcamerarecorder).
|
Generates a `MediaRecorder` object from provided `MediaStream` and stores this for access via [`getCameraRecorder()`](#getcamerarecorder). By default, `mimeType` is set to the first compatible container/codec combination found in a list of common types, or `"video/webm"` if no supported combination is found.
|
||||||
|
|
||||||
|
The common container/codec combinations that jsPsych checks for are `"video/webm;codecs=vp9,opus"`, `"video/webm;codecs=vp8,opus"`, `"video/mp4;codecs=avc1.42E01E,mp4a.40.2"`, `"video/mp4;codecs=h264,aac"`, and `"video/mp4;codecs=hevc,aac"`.
|
||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
|
|
||||||
|
|||||||
@ -89,7 +89,7 @@ output:
|
|||||||
full_design = {
|
full_design = {
|
||||||
stimulus: ['a.jpg','b.jpg','b.jpg','a.jpg'],
|
stimulus: ['a.jpg','b.jpg','b.jpg','a.jpg'],
|
||||||
ms_delay: [200, 100, 200, 100]
|
ms_delay: [200, 100, 200, 100]
|
||||||
]
|
}
|
||||||
*/
|
*/
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -182,6 +182,8 @@ This method takes an array of values and generates a new random order of the arr
|
|||||||
|
|
||||||
If the array elements are objects with the same set of properties, then this method can optionally return a single object where each property is a randomized order of the properties defined in the original set of objects. This is useful for randomizing sets of parameters that are used to define a jsPsych block.
|
If the array elements are objects with the same set of properties, then this method can optionally return a single object where each property is a randomized order of the properties defined in the original set of objects. This is useful for randomizing sets of parameters that are used to define a jsPsych block.
|
||||||
|
|
||||||
|
This returns a shallow copy of the array, i.e. modifications to arrays/objects within this array will affect the original. If this is not desired, consider taking a [`deepCopy`](./jspsych-utils.md#jspsychutilsdeepcopy).
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
|
|
||||||
#### Shuffle an array, no repeats
|
#### Shuffle an array, no repeats
|
||||||
@ -414,6 +416,8 @@ An array containing the sample.
|
|||||||
|
|
||||||
This method returns a sample drawn at random from a set of values with replacement. The relative probability of drawing each item can be controlled by specifying the `weights`.
|
This method returns a sample drawn at random from a set of values with replacement. The relative probability of drawing each item can be controlled by specifying the `weights`.
|
||||||
|
|
||||||
|
This returns a shallow copy of the array, i.e. modifications to arrays/objects within this array will affect the original. If this is not desired, consider taking a [`deepCopy`](./jspsych-utils.md#jspsychutilsdeepcopy).
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
|
|
||||||
#### Sample with equal probability
|
#### Sample with equal probability
|
||||||
@ -455,6 +459,8 @@ An array containing the sample.
|
|||||||
|
|
||||||
This method returns a sample drawn at random from a set of values without replacement. The sample size must be less than or equal to the length of the array.
|
This method returns a sample drawn at random from a set of values without replacement. The sample size must be less than or equal to the length of the array.
|
||||||
|
|
||||||
|
This returns a shallow copy of the array, i.e. modifications to arrays/objects within this array will affect the original. If this is not desired, consider taking a [`deepCopy`](./jspsych-utils.md#jspsychutilsdeepcopy).
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
|
|
||||||
#### Sample without replacement
|
#### Sample without replacement
|
||||||
@ -532,6 +538,8 @@ Returns an array with the same elements as the input array in a random order.
|
|||||||
|
|
||||||
A simple method for shuffling the order of an array.
|
A simple method for shuffling the order of an array.
|
||||||
|
|
||||||
|
This returns a shallow copy of the array, i.e. modifications to arrays/objects within this array will affect the original. If this is not desired, consider taking a [`deepCopy`](./jspsych-utils.md#jspsychutilsdeepcopy).
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
|
|
||||||
#### Shuffle an array
|
#### Shuffle an array
|
||||||
@ -565,6 +573,8 @@ Returns an array with the same elements as the input array in a random order, wi
|
|||||||
|
|
||||||
Shuffle an array, ensuring that neighboring elements in the array are different.
|
Shuffle an array, ensuring that neighboring elements in the array are different.
|
||||||
|
|
||||||
|
This returns a shallow copy of the array, i.e. modifications to arrays/objects within this array will affect the original. If this is not desired, consider taking a [`deepCopy`](./jspsych-utils.md#jspsychutilsdeepcopy).
|
||||||
|
|
||||||
*Warning: if you provide an array that has very few valid permutations with no neighboring elements, then this method will fail and cause the browser to hang.*
|
*Warning: if you provide an array that has very few valid permutations with no neighboring elements, then this method will fail and cause the browser to hang.*
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
|
|||||||
93
docs/reference/jspsych-utils.md
Normal file
93
docs/reference/jspsych-utils.md
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
# jsPsych.utils
|
||||||
|
|
||||||
|
The jsPsych.utils module contains utility functions that might turn out useful at one place or the other.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## jsPsych.utils.unique
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
jsPsych.utils.unique(array)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
| --------- | ----- | ------------------------------ |
|
||||||
|
| array | Array | An array of arbitrary elements |
|
||||||
|
|
||||||
|
### Return value
|
||||||
|
|
||||||
|
An array containing all elements from the input array, but without duplicate elements
|
||||||
|
|
||||||
|
### Description
|
||||||
|
|
||||||
|
This function takes an array and returns a copy of that array with all duplicate elements removed.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
jsPsych.utils.unique(["a", "b", "b", 1, 1, 2]) // returns ["a", "b", 1, 2]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## jsPsych.utils.deepCopy
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
jsPsych.utils.deepCopy(object);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
| --------- | --------------- | ---------------------------- |
|
||||||
|
| object | Object or Array | An arbitrary object or array |
|
||||||
|
|
||||||
|
### Return value
|
||||||
|
|
||||||
|
A deep copy of the provided object or array
|
||||||
|
|
||||||
|
### Description
|
||||||
|
|
||||||
|
This function takes an arbitrary object or array and returns a deep copy of it, i.e. all child objects or arrays are recursively copied too.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var myObject = { nested: ["array", "of", "elements"] };
|
||||||
|
var deepCopy = jsPsych.utils.deepCopy(myObject);
|
||||||
|
deepCopy.nested[2] = "thingies";
|
||||||
|
console.log(myObject.nested[2]) // still logs "elements"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## jsPsych.utils.deepMerge
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
jsPsych.utils.deepMerge(object1, object2);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Parameters
|
||||||
|
|
||||||
|
| Parameter | Type | Description |
|
||||||
|
| --------- | ------ | --------------- |
|
||||||
|
| object1 | Object | Object to merge |
|
||||||
|
| object2 | Object | Object to merge |
|
||||||
|
|
||||||
|
### Return value
|
||||||
|
|
||||||
|
A deep copy of `object1` with all the (nested) properties from `object2` filled in
|
||||||
|
|
||||||
|
### Description
|
||||||
|
|
||||||
|
This function takes two objects and recursively merges them into a new object. If both objects define the same (nested) property, the property value from `object2` takes precedence.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var object1 = { a: 1, b: { c: 1, d: 2 } };
|
||||||
|
var object2 = { b: { c: 2 }, e: 3 };
|
||||||
|
jsPsych.utils.deepMerge(object1, object2); // returns { a: 1, b: { c: 2, d: 2 }, e: 3 }
|
||||||
|
```
|
||||||
@ -13,7 +13,10 @@
|
|||||||
const jsPsych = initJsPsych({
|
const jsPsych = initJsPsych({
|
||||||
extensions: [
|
extensions: [
|
||||||
{type: jsPsychExtensionRecordVideo}
|
{type: jsPsychExtensionRecordVideo}
|
||||||
]
|
],
|
||||||
|
on_finish: function() {
|
||||||
|
jsPsych.data.displayData();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const initCamera = {
|
const initCamera = {
|
||||||
|
|||||||
@ -71,6 +71,7 @@ nav:
|
|||||||
- 'jsPsych.data': 'reference/jspsych-data.md'
|
- 'jsPsych.data': 'reference/jspsych-data.md'
|
||||||
- 'jsPsych.randomization': 'reference/jspsych-randomization.md'
|
- 'jsPsych.randomization': 'reference/jspsych-randomization.md'
|
||||||
- 'jsPsych.turk': 'reference/jspsych-turk.md'
|
- 'jsPsych.turk': 'reference/jspsych-turk.md'
|
||||||
|
- 'jsPsych.utils': 'reference/jspsych-utils.md'
|
||||||
- 'jsPsych.pluginAPI': 'reference/jspsych-pluginAPI.md'
|
- 'jsPsych.pluginAPI': 'reference/jspsych-pluginAPI.md'
|
||||||
- Plugins:
|
- Plugins:
|
||||||
- 'List of Plugins': 'plugins/list-of-plugins.md'
|
- 'List of Plugins': 'plugins/list-of-plugins.md'
|
||||||
|
|||||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -14040,7 +14040,7 @@
|
|||||||
},
|
},
|
||||||
"packages/plugin-html-audio-response": {
|
"packages/plugin-html-audio-response": {
|
||||||
"name": "@jspsych/plugin-html-audio-response",
|
"name": "@jspsych/plugin-html-audio-response",
|
||||||
"version": "2.1.0",
|
"version": "2.1.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@jspsych/config": "^3.2.0",
|
"@jspsych/config": "^3.2.0",
|
||||||
|
|||||||
@ -284,11 +284,38 @@ export class MediaAPI {
|
|||||||
private camera_recorder: MediaRecorder = null;
|
private camera_recorder: MediaRecorder = null;
|
||||||
|
|
||||||
initializeCameraRecorder(stream: MediaStream, opts?: MediaRecorderOptions) {
|
initializeCameraRecorder(stream: MediaStream, opts?: MediaRecorderOptions) {
|
||||||
|
let mimeType = this.getCompatibleMimeType() || "video/webm";
|
||||||
|
const recorderOptions: MediaRecorderOptions = {
|
||||||
|
...opts,
|
||||||
|
mimeType
|
||||||
|
}
|
||||||
|
|
||||||
this.camera_stream = stream;
|
this.camera_stream = stream;
|
||||||
const recorder = new MediaRecorder(stream, opts);
|
const recorder = new MediaRecorder(stream, recorderOptions);
|
||||||
this.camera_recorder = recorder;
|
this.camera_recorder = recorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// mimetype checking code adapted from https://github.com/lookit/lookit-jspsych/blob/develop/packages/record/src/videoConfig.ts#L673-L699
|
||||||
|
/** returns a compatible mimetype string, or null if none from the array are supported. */
|
||||||
|
private getCompatibleMimeType(): string {
|
||||||
|
const types = [
|
||||||
|
// chrome firefox edge
|
||||||
|
"video/webm;codecs=vp9,opus",
|
||||||
|
"video/webm;codecs=vp8,opus",
|
||||||
|
// general
|
||||||
|
"video/mp4;codecs=avc1.42E01E,mp4a.40.2",
|
||||||
|
// safari
|
||||||
|
"video/mp4;codecs=h264,aac",
|
||||||
|
"video/mp4;codecs=hevc,aac",
|
||||||
|
]
|
||||||
|
for (const mimeType of types) {
|
||||||
|
if (MediaRecorder.isTypeSupported(mimeType)) {
|
||||||
|
return mimeType;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
getCameraStream(): MediaStream {
|
getCameraStream(): MediaStream {
|
||||||
return this.camera_stream;
|
return this.camera_stream;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,11 @@
|
|||||||
# @jspsych/plugin-html-audio-response
|
# @jspsych/plugin-html-audio-response
|
||||||
|
|
||||||
|
## 2.1.1
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- [#2991](https://github.com/jspsych/jsPsych/pull/2991) [`5ab4cc7a0f8750735b88e87df3bb692f140b3c53`](https://github.com/jspsych/jsPsych/commit/5ab4cc7a0f8750735b88e87df3bb692f140b3c53) Thanks [@bbonf](https://github.com/bbonf)! - uses mimetype of audio recorded for playback instead of defaulting to webm
|
||||||
|
|
||||||
## 2.1.0
|
## 2.1.0
|
||||||
|
|
||||||
### Minor Changes
|
### Minor Changes
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@jspsych/plugin-html-audio-response",
|
"name": "@jspsych/plugin-html-audio-response",
|
||||||
"version": "2.1.0",
|
"version": "2.1.1",
|
||||||
"description": "jsPsych plugin for displaying a stimulus and recording an audio response through the microphone",
|
"description": "jsPsych plugin for displaying a stimulus and recording an audio response through the microphone",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "dist/index.cjs",
|
"main": "dist/index.cjs",
|
||||||
|
|||||||
@ -182,7 +182,7 @@ class HtmlAudioResponsePlugin implements JsPsychPlugin<Info> {
|
|||||||
};
|
};
|
||||||
|
|
||||||
this.stop_event_handler = () => {
|
this.stop_event_handler = () => {
|
||||||
const data = new Blob(this.recorded_data_chunks, { type: "audio/webm" });
|
const data = new Blob(this.recorded_data_chunks, { type: this.recorded_data_chunks[0].type });
|
||||||
this.audio_url = URL.createObjectURL(data);
|
this.audio_url = URL.createObjectURL(data);
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.addEventListener("load", () => {
|
reader.addEventListener("load", () => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user