What is it?

The COVID-19 pandemic pushed the church I was serving at to livestream Sunday services to YouTube. The media setup involved:

• 2 cameras with HDMI outputs
• An Atem Mini to apply video effects and control the final output
• A personal laptop to display PowerPoint slides or videos
• A church laptop to stream the output to YouTube using OBS Studio

        The most sophisticated component is the Atem Mini which has tons of video effects and settings. Throughout the church service, the media personnel has to switch between green screen mode, picture-in-picture mode, or just plain normal mode, depending on the situation. The switching process must follow a couple of steps to ensure smooth transitioning between modes. Otherwise, the personnel may accidentally show the laptop's home screen or everything becomes green due to failure to activate green screen mode.

        All these can be daunting for new media personnel, which was why I developed this website as a guide and refresher for media personnel in my team. The website is a combination of React, Chakra UI and the Canvas API.

Picture-in-Picture

Picture-in-Picture (PiP) is a presentation method of superimposing a visual source upon another larger video source. By manipulating the canvas, I managed to simulate this effect and also provide smooth transitions.

Green Screen

In church services, PowerPoint slides with green background are superimposed onto the camera feeds using chroma keying to create visual overlays which are useful especially for song lyrics. By again manipulating the canvas, I managed to achieve chroma keying without any issues:

Interactive Guides

Using React Joyride, interactive steps are presented for all kinds of workflows:

Conclusions

It was a fun experience fiddling around with the Canvas API and making the website visually-appealing.