Editing red "recording…" message

[anna]

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

[Jeremy]

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

[penn_baby_lab]

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!

[Jeremy]

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

[penn_baby_lab]

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.

[Jeremy]

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

[penn_baby_lab]

Hi Jeremy,

It worked perfectly – thanks! The “recording…” message is still in white though. How would I add changing that font color to a different color to the code you provided above?

[Jeremy]

Hi,

Just change the color CSS attribute as well:

newFunction(()=>$("div:contains(Recording...)").css({'color': 'black', 'background-color': 'lightblue'})).call()

Jeremy

[Author]

Posts