mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
add mirror-camera plugin to display live feed of camera
This commit is contained in:
Josh de Leeuw
parent
d36ab98f04
commit
cade6b7f9e
25
examples/jspsych-mirror-camera.html
Normal file
25
examples/jspsych-mirror-camera.html
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<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-mirror-camera/dist/index.browser.js"></script>
|
||||||
|
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var jsPsych = initJsPsych();
|
||||||
|
|
||||||
|
const init_camera = {
|
||||||
|
type: jsPsychInitializeCamera,
|
||||||
|
}
|
||||||
|
|
||||||
|
const mirror_camera = {
|
||||||
|
type: jsPsychMirrorCamera
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.run([init_camera, mirror_camera]);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
1
packages/plugin-mirror-camera/jest.config.cjs
Normal file
1
packages/plugin-mirror-camera/jest.config.cjs
Normal file
@ -0,0 +1 @@
|
|||||||
|
module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);
|
||||||
43
packages/plugin-mirror-camera/package.json
Normal file
43
packages/plugin-mirror-camera/package.json
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "@jspsych/plugin-mirror-camera",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"description": "jsPsych plugin for showing a live feed of the user's camera",
|
||||||
|
"type": "module",
|
||||||
|
"main": "dist/index.cjs",
|
||||||
|
"exports": {
|
||||||
|
"import": "./dist/index.js",
|
||||||
|
"require": "./dist/index.cjs"
|
||||||
|
},
|
||||||
|
"typings": "dist/index.d.ts",
|
||||||
|
"unpkg": "dist/index.browser.min.js",
|
||||||
|
"files": [
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"source": "src/index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "jest --passWithNoTests",
|
||||||
|
"test:watch": "npm test -- --watch",
|
||||||
|
"tsc": "tsc",
|
||||||
|
"build": "rollup --config",
|
||||||
|
"build:watch": "npm run build -- --watch"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/jspsych/jsPsych.git",
|
||||||
|
"directory": "packages/plugin-mirror-camera"
|
||||||
|
},
|
||||||
|
"author": "Josh de Leeuw",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/jspsych/jsPsych/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://www.jspsych.org/latest/plugins/mirror-camera",
|
||||||
|
"peerDependencies": {
|
||||||
|
"jspsych": ">=7.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@jspsych/config": "^1.3.0",
|
||||||
|
"@jspsych/test-utils": "^1.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
packages/plugin-mirror-camera/rollup.config.mjs
Normal file
3
packages/plugin-mirror-camera/rollup.config.mjs
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { makeRollupConfig } from "@jspsych/config/rollup";
|
||||||
|
|
||||||
|
export default makeRollupConfig("jsPsychMirrorCamera");
|
||||||
58
packages/plugin-mirror-camera/src/index.ts
Normal file
58
packages/plugin-mirror-camera/src/index.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
|
||||||
|
|
||||||
|
const info = <const>{
|
||||||
|
name: "initialize-camera",
|
||||||
|
parameters: {
|
||||||
|
/** Label to show on continue button */
|
||||||
|
button_label: {
|
||||||
|
type: ParameterType.STRING,
|
||||||
|
default: "Continue",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
type Info = typeof info;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* **mirror-camera**
|
||||||
|
*
|
||||||
|
* jsPsych plugin for showing a live stream from a camera
|
||||||
|
*
|
||||||
|
* @author Josh de Leeuw
|
||||||
|
* @see {@link https://www.jspsych.org/plugins/jspsych-mirror-camera/ mirror-camera plugin documentation on jspsych.org}
|
||||||
|
*/
|
||||||
|
class MirrorCameraPlugin implements JsPsychPlugin<Info> {
|
||||||
|
static info = info;
|
||||||
|
|
||||||
|
private stream: MediaStream;
|
||||||
|
private start_time: number;
|
||||||
|
|
||||||
|
constructor(private jsPsych: JsPsych) {}
|
||||||
|
|
||||||
|
trial(display_element: HTMLElement, trial: TrialType<Info>) {
|
||||||
|
this.stream = this.jsPsych.pluginAPI.getCameraStream();
|
||||||
|
|
||||||
|
display_element.innerHTML = `
|
||||||
|
<video autoplay playsinline id="jspsych-mirror-camera-video" style=""></video>
|
||||||
|
<p><button class="jspsych-btn" id="btn-continue">${trial.button_label}</button></p>
|
||||||
|
`;
|
||||||
|
|
||||||
|
(display_element.querySelector("#jspsych-mirror-camera-video") as HTMLVideoElement).srcObject =
|
||||||
|
this.stream;
|
||||||
|
|
||||||
|
display_element.querySelector("#btn-continue").addEventListener("click", () => {
|
||||||
|
this.finish(display_element);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.start_time = performance.now();
|
||||||
|
}
|
||||||
|
|
||||||
|
finish(display_element: HTMLElement) {
|
||||||
|
display_element.innerHTML = "";
|
||||||
|
this.jsPsych.finishTrial({
|
||||||
|
rt: performance.now() - this.start_time,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MirrorCameraPlugin;
|
||||||
7
packages/plugin-mirror-camera/tsconfig.json
Normal file
7
packages/plugin-mirror-camera/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"extends": "@jspsych/config/tsconfig.core.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "."
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user