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