Our streaming setup for ICTskills2020
Published on 22 September 2020, 08:39
Due to the Corona-Virus situation, this year was the first time that we live-streamed a part of our national competition in Web Technologies. As we are very happy with the result and received a lot of good feedback from viewers, candidates, experts, and other people involved in the industry, we are looking to further expand it and keep it for future events. We believe that it will be also a great addition if visitors are allowed on-site again (live stream and show it live at the competition at the same time). As IT professions are usually not that fun to watch if you don't know what's going on, having moderators helps a lot because they are able to comment on what visitors see and explain it to them. Or they can discuss differences between different solutions, give background information, and a lot more.
The format of the Speed Challenge is also almost perfect for a live stream. The Speed Challenge is an action-packed one hour challenge where all competitors solve the same 8 tasks. They were relatively small but from all topics in Web Technologies. As we had a live-updating scoreboard (see figure below), it was really engaging to the viewers and it was easy to root for someone. If you didn't already, we suggest checking out the recorded live stream.
We will discuss how we are able to mark the tasks live and provide the real-time scoreboard in our next blog post.
Setup
Let's get a look behind the scenes and a detailed description of our setup.
1. Audio Mixer with built-in Audio Interface
We had the pleasure to work with Planwerk4 which provided all audio equipment and were also present during the stream mixing the audio for us.
2. Two dynamic handheld microphones
Those two microphones were also provided by Planwerk4 and used for our interviews during and after the Speed Challenge. The audio signal was transmitted wirelessly to the audio mixer and so they were freely available and it was easy to hand them over to the interview partners.
3. Video Switching monitor
It was probably the most important monitor as we used it for video switching. On the top right, you see the production signal, the one that actually gets sent to YouTube and our viewers will see. On the top left, the preview signal is shown. Most of the time, this is the one that goes into production next, so you already have an overview and can check if everything looks good before switching to this signal. In the bottom half, you see 8 additional scenes. Those are the most used ones and you always have an overview of them. There were also some additional scenes that were not visible on the screen (intro, outro, videos, task descriptions, ...) that were only accessible through keyboard shortcuts.
The software used for video switching and streaming the whole live stream was OBS Studio. It is open-source and so free for everyone and provides a lot of features. Although it performed really well and we were happy with it in general, we might switch to a more professional and robust software in the future.
4. Main streaming laptop
This is actually the main laptop we used for the streaming and the video switching monitor (3.) was also connected to this over HDMI. It's a MacBook Pro 2018 but booted into Windows with Bootcamp as not all of the software we used is available for macOS. Everything that needs to appear on the stream, needs to go into this laptop. This includes all incoming video and audio feeds from the cameras as well as the audio interface.
We also run Veyon on that laptop. Veyon was used to access the competitor's screens and OBS simply captured the Veyon window and included it on the stream.
5. Veyon Monitoring
Ben was constantly monitoring all competitors over Veyon on this monitor. Once he found a competitor doing a task we are currently showing on the stream, he sent me the competitor number and I could switch to this competitor on the main streaming laptop (4.). It was very helpful to split the monitoring to a dedicated laptop & screen as it wouldn't have been possible to also do it on the main streaming laptop - there was already too much going on there.
6. Big screen for the moderators
The moderators were sitting to the right of this image and in front of this big screen. They always saw the production signal - the one sent to YouTube. It was very helpful to have such a big TV screen as they had to comment on the competitor's code, which is - as you can see in the image - quite small and hard to read sometimes, especially when you are 3 meters away from the monitor.
This monitor was also connected to the main streaming laptop through HDMI.
7. Moderator camera
This camera was always recording our moderators who were standing in front of the camera. It was a Panasonic Lumix GH5 4K camera connected with a capture card directly to the main streaming laptop.
Additional equipment
Some equipment that was not in the picture above:
- Two earset microphones, also provided by Planwerk4 and connected wirelessly to the audio mixer.
- A webcam installed in the competitor room. It was connected to a laptop which forwarded the video signal to the main streaming laptop over WLAN.
- A live action cam that could move around freely and showed the currently highlighted competitor on stream. It was a normal iPhone that streamed the front camera over WLAN to the main streaming laptop. Before the event, this camera also showed how the chief expert explained the Speed Challenge to the competitors outside of the building.
- A light in front of the moderators to provide good lighting.
- An ICTskills2020 poster wall used in the background of the moderators.
Broadcast team
There were many people involved in the broadcasting team:
- Bastian Feder: Live action cam
- Benjamin Wolf: Veyon observer, interviewer
- Cyril Wanner: Video switching, OBS setup, managing the main streaming laptop
- Nicolas Ettlin: moderator (in french), produced the intro & outro video
- Sebastian Häni: moderator (in german)
- Planwerk4: audio engineering
And of course, even more people helped us testing, gave feedback and ideas. A huge thanks to everyone involved!
Networks
On the competition-site, we had two networks:
- A gigabit ethernet connection to the public internet
- A local network for the competitors without internet access
Both the main streaming laptop and the Veyon observer were connected to both networks to be able to access the competitor's streams and the public internet, which is obviously needed to send the live stream to YouTube.
Overlays
Overlays are important for streams and provide some additional helpful information. And for a web developer, what would be a better fit than using websites as overlays? Correct, all overlays (countdown, text boxes, competitor information, scoreboard, ...) and screens (starting soon, ending) you have seen in the live stream are actually just websites. Where real-time data was needed, for example for the scoreboard, the competitor information or countdown, the websites were connected via WebSockets to our master server to get all updates as real-time as possible.