HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 03:00:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

option to turn on audio for video recordings

Browse Source
This commit is contained in:
Josh de Leeuw 2022-07-12 10:33:27 -04:00
parent 71b3706753
commit 1381f575f5
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/jspsych-html-video-response.html
View File

@ -14,6 +14,7 @@
const init_camera = {
type: jsPsychInitializeCamera,
width: 320,
include_audio: true
}
const record = {

4
packages/jspsych/src/modules/plugin-api/MediaAPI.ts
View File

@ -338,9 +338,9 @@ export class MediaAPI {
private camera_stream: MediaStream = null;
private camera_recorder: MediaRecorder = null;
initializeCameraRecorder(stream: MediaStream) {
initializeCameraRecorder(stream: MediaStream, opts?: MediaRecorderOptions) {
this.camera_stream = stream;
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs="vp9"' });
const recorder = new MediaRecorder(stream, opts);
this.camera_recorder = recorder;
}

36
packages/plugin-initialize-camera/src/index.ts
View File

@ -3,16 +3,19 @@ import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
const info = <const>{
name: "initialize-camera",
parameters: {
/** Function to call */
device_select_message: {
type: ParameterType.HTML_STRING,
default: `<p>Please select the camera you would like to use.</p>`,
},
/** Is the function call asynchronous? */
/** */
button_label: {
type: ParameterType.STRING,
default: "Use this camera",
},
include_audio: {
type: ParameterType.BOOL,
default: false,
},
width: {
type: ParameterType.INT,
default: null,
@ -21,6 +24,10 @@ const info = <const>{
type: ParameterType.INT,
default: null,
},
mime_type: {
type: ParameterType.STRING,
default: null,
},
},
};
@ -49,7 +56,7 @@ class InitializeCameraPlugin implements JsPsychPlugin<Info> {
}
private async run_trial(display_element: HTMLElement, trial: TrialType<Info>) {
await this.askForPermission();
await this.askForPermission(trial);
this.showCameraSelection(display_element, trial);
@ -69,16 +76,27 @@ class InitializeCameraPlugin implements JsPsychPlugin<Info> {
if (trial.height) {
constraints.video.height = trial.height;
}
if (trial.include_audio) {
constraints.audio = true;
}
const stream = await navigator.mediaDevices.getUserMedia(constraints);
this.jsPsych.pluginAPI.initializeCameraRecorder(stream);
const recorder_options: MediaRecorderOptions = {};
if (trial.mime_type) {
recorder_options.mimeType = trial.mime_type;
}
this.jsPsych.pluginAPI.initializeCameraRecorder(stream, recorder_options);
return camera_id;
}
private async askForPermission() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
private async askForPermission(trial: TrialType<Info>) {
const stream = await navigator.mediaDevices.getUserMedia({
audio: trial.include_audio,
video: true,
});
return stream;
}
@ -102,14 +120,14 @@ class InitializeCameraPlugin implements JsPsychPlugin<Info> {
private updateDeviceList(display_element) {
navigator.mediaDevices.enumerateDevices().then((devices) => {
const mics = devices.filter(
const cams = devices.filter(
(d) =>
d.kind === "videoinput" && d.deviceId !== "default" && d.deviceId !== "communications"
);
// remove entries with duplicate groupID
const unique_cameras = mics.filter(
(mic, index, arr) => arr.findIndex((v) => v.groupId == mic.groupId) == index
const unique_cameras = cams.filter(
(cam, index, arr) => arr.findIndex((v) => v.groupId == cam.groupId) == index
);
// reset the list by clearing all current options