run command while MediaRecorder is recording

PennController for IBEX Forums Support run command while MediaRecorder is recording

  • This topic has 2 replies, 2 voices, and was last updated 1 year ago by bta.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #10681
    bta
    Participant

    I am working with a MediaRecorder to record audio, and I’d like to make the user stay on the screen whenever the recorder is recording.

    I’m using newMediaRecorder(…).wait() to prevent the ‘continue’ button from appearing until *one* recording is done, and that works great.

    But what I want to do is prevent the ‘continue’ button from working if the recorder is running (again). So the case I’m envisioning is that the user comes to a recording screen, they record once, they stop the recording, (the continue button appears,) they decide they want to re-record so they hit ‘record’ again, but they (accidentally) hit ‘continue’ without hitting ‘stop’ first. In my tests, this leads to the original recording being uploaded (and the second recording that was made without hitting ‘stop’ gets lost to the ether).

    I can imagine two possible ways of tackling this that would involve running some command while the MediaRecorder is recording, but don’t know if/how it would be possible to use either. Solution #1 would be to run a command that makes the ‘continue’ button disappear whenever ‘record’ is hit, but I can’t figure out how to test if ‘record’ is pressed. Solution #2 would be to run a command to test if the MediaRecorder is recording (clearly PCIbex knows when this is happening, since ‘recording’ appears at the top of the screen) inside of the ‘continue’ button’s “.wait()”, but I don’t know how to do that testing.

    Thanks in advance!

    • This topic was modified 1 year ago by bta.
    #10685
    Jeremy
    Keymaster

    Hi,

    The most straightforward solution that will give you the most control is probably to code the recording interface yourself. Here’s an example:

    newTrial(
        // create the elements but don't print/start them yet
        newButton("Done"),
        newMediaRecorder("audio").log()
        ,
        newButton("Stop recording")
            .callback(
                // Whenever stop is clicked we remove it, stop+print the recorder, and (re-)print record and done
                getButton("Stop recording").remove(),
                getMediaRecorder("audio").stop().print(),
                getButton("Record").print(),
                getButton("Done").print()
            )
        ,
        newButton("Record")
            .callback(
                // Whenever record is clicked we remove it, remove done, remove+start the recorder and print stop
                getButton("Record").remove(),
                getButton("Done").remove(),
                getMediaRecorder("audio").remove().record(),
                getButton("Stop recording").print()
            )
            .print() // start the trial by printing record
        ,
        // the script will stay on this line until done is clicked
        getButton("Done").wait()
    )

    Since you handle recording manually, you’ll want to hide the default “Record” button printed along with the MediaRecorder element. Just add this to Aesthetics/PennController.css:

    .MediaRecorder-record {
        display: none;
    }

    Jeremy

    #10687
    bta
    Participant

    Great that worked perfectly!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.