Editing red "recording…" message

PennController for IBEX Forums Support Editing red "recording…" message

This topic contains 5 replies, has 3 voices, and was last updated by Jeremy Jeremy 3 days, 22 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #6367
    Avatar
    anna
    Participant

    Hi Jeremy!

    I’m working on an experiment where the participants will be babies and toddlers. We’ll be collecting video data through the media recorder element. Is there any way to make the red “recording…” message at the top of the screen less salient? If we can’t remove it completely for security concerns, can we at least change the color to make it blend in a bit more? I’m concerned that it may be distracting.

    Thanks!

    Anna

    #6368
    Jeremy
    Jeremy
    Keymaster

    Hi Anna,

    As you guessed, the “Recording…” message is there for transparency reasons. I recommend providing your participants with a very clear signal indicating when they are being recorded or not at all time. You can modify the aesthetics of the top message either by writing a rule to that effect in a global CSS file, or by executing some javascript code upon runtime. Here is an example that uses the latter solution to completely hide it (along with the “record” button that comes with printing the video feedback):

    newTrial(
        newButton("Go fullscreen").print().wait().remove()
        ,
        fullscreen()
        ,
        newMediaRecorder("video").print().log().record()
        ,
        newFunction(()=>$("div:contains(Recording...), .PennController-MediaRecorder-record").hide()).call()
        ,
        newTimer(60000).start().wait() // Record for 1min
        ,
        getMediaRecorder("video").stop()
        ,
        newButton("Next").print().wait()
    )

    Let me know if you have any questions,

    Jeremy

    #6369
    Avatar
    penn_baby_lab
    Participant

    Hi Jeremy,

    Would you mind explaining how to refer to the “Recording” message in the global CSS file? I think we’re gonna go with simply changing the color to be less attention-grabbing than the bright red. Thanks!

    #6371
    Jeremy
    Jeremy
    Keymaster

    Hi,

    If you can live with the message having the same background color whether it says “Not recording” or “Recording…”, all you need to do is upload a file named global_z.css with the following:

    #bod table + div:last-child {
        background-color: lightblue !important;
    }

    If you want to use different custom colors for the two states, you’ll need to use the method from the message above:

    newTrial(
        newButton("Go fullscreen").print().wait().remove()
        ,
        fullscreen()
        ,
        newMediaRecorder("video").print().log().record()
        ,
        newFunction(()=>$("div:contains(Recording...)").css('background-color','lightblue')).call()
        ,
        newTimer(60000).start().wait() // Record for 1min
        ,
        newFunction(()=>$("div:contains(Recording...)").css('background-color','lightgray')).call()
        ,
        getMediaRecorder("video").stop()
        ,
        newButton("Next").print().wait()
    )

    Let me know if you still have questions

    Jeremy

    #6373
    Avatar
    penn_baby_lab
    Participant

    Hi Jeremy,

    Same background color for both sounds perfect – unfortunately, when I put the code you gave into the global_z.css file, only the “not recording” message’s background changed – “recording..” still shows up as the same red color.

    #6374
    Jeremy
    Jeremy
    Keymaster

    Oh, right, my bad, that makes perfect sense actually, because the aesthetics changes along with the message by default. You’ll have to use the second, runtime method described above then

    Jeremy

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.