mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
add mirror-camera docs
This commit is contained in:
Josh de Leeuw
parent
ccab9eab46
commit
d0d1d2aacb
36
docs/demos/jspsych-mirror-camera-demo1.html
Normal file
36
docs/demos/jspsych-mirror-camera-demo1.html
Normal 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
79
docs/plugins/mirror-camera.md
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user