Camcorder Viewfinder "greenscreen" + HTML

Resources
1

Last month @MusicalBox showed how to simulate a camcorder viewfinder display using Glaxnimate.

I decided to see if I could do this using just HTML and CSS. I also wanted a project that would use the display: grid CSS feature. The HTML file can be downloaded below (just remove the “.txt” suffix:

Viewfinder.html.txt (9.1 KB).

It can be used as a browser source in OBS studio, which is how I created the video below. In Shotcut you can remove the black background by using the Chroma Key filter and choosing the color “black”, or you can change the HTML background to green “#00ff00” and choose that color in the filter.

The HTML is parameterized so it is easy to tailor:

    --width       : 1200px;
    --resolution-w: 1920;   --res-w: '1920';    /* The horizontal "resolution" the simulated camcorder is shooting */
    --resolution-h: 1080;   --res-h: '1080';    /* The  vertical  "resolution" the simulated camcorder is shooting */
    --codec       : 'mp4 (h.264)';              /* The  container  and  codec  the simulated camcorder is shooting */
    --exposure    : '5...4...3...2...1...▼...1...2...3...4...5'; /* Simulated Exposure setting */
	--screen-color: #000000;
/*	--screen-color: #00ff00;    */              /* Uncomment for a Green-screen */
	--text-color  : #ffffff;
    --rec-color   : #ff0000;                  /* The color of the flashing "recording" bulb */
    --hilite-color: #000099;                  /* Text and border shadow color */ 
    --font-weight : bold;
	--font-size   : calc(var(--width) / 60);
    --padding     : 10px;

3 Likes
2

Cool!

3

Very cool!

1 Like
4

Super, et en plus paramétrable.
Juste un détail pour ceux qui ont déjà téléchargé le fichier, il manque un point ‘.’ entre le 3 et le 2 (ligne 20)

Great, and moreover customizable.
Just a detail for those who have already downloaded the file, there is a missing dot ‘.’ between the 3 and the 2 (line 20)

2 Likes
5

You must have eagle-eyes to have spotted that mistake. I have corrected the file and edited the original post with the correction.

2 Likes
6

Just tested it in Shotcut. Very, very cool!

I’m wondering: Did you include codes to display a small border around the text and lines, or is it a residue left by the Chromakey filter?

Either way, I think it’s a good thing, since in makes the whites parts more visible on a pale background.
shotcut_avrPAoDExY

7

No I didn’t. I think your explanation is prssibly the correct one. I’ll give a bit of throught about making this a feature.

1 Like
8

I have added text- & box-shadows to all the elements so if you have a light or even white background the features still stand out. I have updated the original post with the corrected html.txt file. Thanks for pointing it out to me.

1 Like
9

That was fast!
:+1:

1 Like
10

Faster than a speeding bullet;
Faster than a speeding ticket;
Faster than the speed of light;
Faster than a toupee in a hurricane;
Faster than the babysitter’s boyfriend when our car pulls up.
Faster than I can say the name of that hill in New Zealand known as "Taumata whakatangi hangakoauau o tamatea turi pukakapiki maunga horo nuku pokai whenua kitanatahu "

3 Likes
11

:rofl:
Yeah, that fast.

“Faster than a toupee in a hurricane” That one almost made me spit out my sip of Pepsi. What a tragic waste it would have been.

1 Like
12

I haven’t got time to try it right now but how about making the background half-grey (#808080), then apply a Blend Mode: Hard Light instead of a Chromakey. Might make the white and red show more clearly.

13

It looks super cool and liked your idea that “you can copy/paste as many as you want side by side to make it last as long as you need.”

14

No reply.…?

15

Everyone here is all volunteers. There is no set timeframe when someone must or ever reply to you.