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

add mirror-camera docs

Browse Source
This commit is contained in:
Josh de Leeuw 2022-07-12 13:51:32 -04:00
parent ccab9eab46
commit d0d1d2aacb
2 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/demos/jspsych-mirror-camera-demo1.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<script src="docs-demo-timeline.js"></script>
<script src="../../packages/jspsych/dist/index.browser.js"></script>
<!--<script src="https://unpkg.com/jspsych@7.2.3"></script>-->
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.1"></script>
<script src="../../packages/plugin-mirror-camera/dist/index.browser.js"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-mirror-camera@1.0.0"></script>-->
<script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.0"></script>-->
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.2.3/css/jspsych.css" />
<link rel="stylesheet" href="docs-demo.css" type="text/css">
</head>
<body></body>
<script>
const jsPsych = initJsPsych();
const init_camera = {
type: jsPsychInitializeCamera,
}
const mirror_camera = {
type: jsPsychMirrorCamera,
}
const timeline = [init_camera, mirror_camera];
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

79
docs/plugins/mirror-camera.md Normal file
View File

@ -0,0 +1,79 @@
# mirror-camera
Current version: 0.0.1 [See version history](https://github.com/jspsych/jsPsych/blob/main/packages/plugin-mirror-camera/CHANGELOG.md).
This plugin shows a live feed of the participant's camera. It can be useful in experiments that need to record video in order to give the participant a chance to see what is in the view of the camera.
You must initialize the camera using the [initialize-camera plugin](initialize-camera.md) prior to running this plugin.
!!! warning
When recording from a camera your experiment will need to be running over `https://` protocol. If you try to run the experiment locally using the `file://` protocol or over `http://` protocol you will not be able to access the microphone because of [potential security problems](https://blog.mozilla.org/webrtc/camera-microphone-require-https-in-firefox-68/).
## Parameters
In addition to the [parameters available in all plugins](../overview/plugins.md#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
Parameter | Type | Default Value | Description
----------|------|---------------|------------
prompt | html string | null | HTML-formatted content to display below the camera feed.
width | int | null | The width of the video playback element. If left `null` then it will match the size of the recording.
height | int | null | The height of the video playback element. If left `null` then it will match the size of the recording.
button_label | string | "Continue" | The label of the button to advance to the next trial.
mirror_camera | bool | true | Whether to mirror the video image).
## Data Generated
In addition to the [default data collected by all plugins](../overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
Name | Type | Value
-----|------|------
rt | int | The length of time the participant viewed the video playback.
## Simulation Mode
This plugin does not yet support [simulation mode](../overview/simulation.md).
## Install
Using the CDN-hosted JavaScript file:
```js
<script src="https://unpkg.com/@jspsych/plugin-mirror-camera@0.0.1"></script>
```
Using the JavaScript file downloaded from a GitHub release dist archive:
```js
<script src="jspsych/plugin-mirror-camera.js"></script>
```
Using NPM:
```
npm install @jspsych/plugin-mirror-camera
```
```js
import mirrorCamera from '@jspsych/plugin-mirror-camera';
```
## Examples
???+ example "Show the camera feed"
=== "Code"
```javascript
const init_camera = {
type: jsPsychInitializeCamera,
}
const mirror_camera = {
type: jsPsychMirrorCamera,
}
```
=== "Demo"
<div style="text-align:center;">
<iframe src="../../demos/jspsych-mirror-camera-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
</div>
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-mirror-camera-demo1.html">Open demo in new tab</a>