) {
+ this.recorder = this.jsPsych.pluginAPI.getCameraRecorder();
+
+ this.setupRecordingEvents(display_element, trial);
+
+ this.startRecording();
+ }
+
+ private showDisplay(display_element, trial) {
+ let html = `${trial.stimulus}
`;
+
+ if (trial.show_done_button) {
+ html += ``;
+ }
+
+ display_element.innerHTML = html;
+ }
+
+ private hideStimulus(display_element: HTMLElement) {
+ const el: HTMLElement = display_element.querySelector("#jspsych-html-video-response-stimulus");
+ if (el) {
+ el.style.visibility = "hidden";
+ }
+ }
+
+ private addButtonEvent(display_element, trial) {
+ const btn = display_element.querySelector("#finish-trial");
+ if (btn) {
+ btn.addEventListener("click", () => {
+ const end_time = performance.now();
+ this.rt = Math.round(end_time - this.stimulus_start_time);
+ this.stopRecording().then(() => {
+ if (trial.allow_playback) {
+ this.showPlaybackControls(display_element, trial);
+ } else {
+ this.endTrial(display_element, trial);
+ }
+ });
+ });
+ }
+ }
+
+ private setupRecordingEvents(display_element, trial) {
+ this.data_available_handler = (e) => {
+ if (e.data.size > 0) {
+ this.recorded_data_chunks.push(e.data);
+ }
+ };
+
+ this.stop_event_handler = () => {
+ const data = new Blob(this.recorded_data_chunks, { type: 'video/webm;codecs="vp9"' });
+ this.video_url = URL.createObjectURL(data);
+ const reader = new FileReader();
+ reader.addEventListener("load", () => {
+ const base64 = (reader.result as string).split(",")[1];
+ this.response = base64;
+ this.load_resolver();
+ });
+ reader.readAsDataURL(data);
+ };
+
+ this.start_event_handler = (e) => {
+ // resets the recorded data
+ this.recorded_data_chunks.length = 0;
+
+ this.recorder_start_time = e.timeStamp;
+ this.showDisplay(display_element, trial);
+ this.addButtonEvent(display_element, trial);
+
+ // setup timer for hiding the stimulus
+ if (trial.stimulus_duration !== null) {
+ this.jsPsych.pluginAPI.setTimeout(() => {
+ this.hideStimulus(display_element);
+ }, trial.stimulus_duration);
+ }
+
+ // setup timer for ending the trial
+ if (trial.recording_duration !== null) {
+ this.jsPsych.pluginAPI.setTimeout(() => {
+ // this check is necessary for cases where the
+ // done_button is clicked before the timer expires
+ if (this.recorder.state !== "inactive") {
+ this.stopRecording().then(() => {
+ if (trial.allow_playback) {
+ this.showPlaybackControls(display_element, trial);
+ } else {
+ this.endTrial(display_element, trial);
+ }
+ });
+ }
+ }, trial.recording_duration);
+ }
+ };
+
+ this.recorder.addEventListener("dataavailable", this.data_available_handler);
+
+ this.recorder.addEventListener("stop", this.stop_event_handler);
+
+ this.recorder.addEventListener("start", this.start_event_handler);
+ }
+
+ private startRecording() {
+ this.recorder.start();
+ }
+
+ private stopRecording() {
+ this.recorder.stop();
+ return new Promise((resolve) => {
+ this.load_resolver = resolve;
+ });
+ }
+
+ private showPlaybackControls(display_element, trial) {
+ display_element.innerHTML = `
+
+
+
+ `;
+
+ display_element.querySelector("#record-again").addEventListener("click", () => {
+ // release object url to save memory
+ URL.revokeObjectURL(this.video_url);
+ this.startRecording();
+ });
+ display_element.querySelector("#continue").addEventListener("click", () => {
+ this.endTrial(display_element, trial);
+ });
+
+ // const video = display_element.querySelector('#playback');
+ // video.src =
+ }
+
+ private endTrial(display_element, trial) {
+ // clear recordering event handler
+
+ this.recorder.removeEventListener("dataavailable", this.data_available_handler);
+ this.recorder.removeEventListener("start", this.start_event_handler);
+ this.recorder.removeEventListener("stop", this.stop_event_handler);
+
+ // kill any remaining setTimeout handlers
+ this.jsPsych.pluginAPI.clearAllTimeouts();
+
+ // gather the data to store for the trial
+ var trial_data: any = {
+ rt: this.rt,
+ stimulus: trial.stimulus,
+ response: this.response,
+ };
+
+ if (trial.save_video_url) {
+ trial_data.video_url = this.video_url;
+ } else {
+ URL.revokeObjectURL(this.video_url);
+ }
+
+ // clear the display
+ display_element.innerHTML = "";
+
+ // move on to the next trial
+ this.jsPsych.finishTrial(trial_data);
+ }
+}
+
+export default HtmlVideoResponsePlugin;
diff --git a/packages/plugin-html-video-response/tsconfig.json b/packages/plugin-html-video-response/tsconfig.json
new file mode 100644
index 00000000..588f0448
--- /dev/null
+++ b/packages/plugin-html-video-response/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "extends": "@jspsych/config/tsconfig.core.json",
+ "compilerOptions": {
+ "baseUrl": "."
+ },
+ "include": ["src"]
+}