Building a Virtual Conference Talk

Later this month (June 2020), I am speaking at ImageCon, a virtual conference hosted by Cloudinary. We were all supposed to meet in person in April, but like many in person events, it has transitioned into a virtual conference.

Virtual conferences place a whole new set of requirements on organisers – do you risk a live setup, and that the internet/streaming service will behave on the day of the event? Or do you record all of the talks ahead of time, and deliver them as a video stream? ImageCon as decided on the latter.

What this means is my talk is already recorded, and I don’t need to worry about anything on the day of the conference – the video will just play over the internet (and my kids can play Minecraft with their friends).

What Online Conference Talks Look Like

When I have presented at other conferences, the conference uses video professionals to mix the live video of the speaker and the slides and place them all in one video:

The ImageCon team asked us to record our talks in Zoom, in order to get both my face from the webcam, and to capture my screen. While it would be easy to just record on Zoom, I wanted to do something more fun with my video. Rather than use Zoom, I recorded my face with my phone camera, and the slides with QuickTime, and began thinking how I might use Cloudinary to stitch them all together.

Creating the Layout

The folks at ImageCon offered speakers a slide template for use in our presentation (they did ask only for the first slide to have the template). Generally, I’m not a fan – I spend a lot of time redoing all my slides, for minimal improvement (and it is harder to reuse the content again!). But, it was a pretty slide, so I thought that perhaps it might make a good background for the videos of my talk:

I thought that I could place the video of “me” under the logo on the left, and use the large area to the right for my slides, like below:

To design the page, I began templating with 2 images – one of a slide, and the other a photo of me and moving them around with Cloudinary transformations. I realised that this might be a fun templating engine – so I built a HTML form so that anyone can build a “conference talk” template.

With a free Cloudinary account, you can simply upload 3 photos – the background, presenter and presentation. In the form, enter your Cloudinary Cloud name, and the IDs of the 3 images as named in the Cloudinary service.

Start with changing x &y values of the image, and resize the height and width, until you’ve gotten the layout just right! The bottom of the page lists the Cloudinary transformations done to make the final image. If you are curious, my URL is:

https://res.cloudinary.com/dougsillars/image/upload/w_1920,h_1080/l_preso,w_1280,h_720,c_crop,g_auto/g_auto/g_north_west,x_500,y_200,fl_layer_apply//l_presenterimage,w_350,h_550,c_fill,g_auto/g_north_west,x_75,y_400,fl_layer_apply/backgroundImage.jpg

By substituting in the names of my videos, I can use this format to add my recorded videos to the template. We’ll talk about this in a future post

Conclusion

Using Cloudinary, I’ve gotten the layout for my virtual conference talk all set up. In the next post, I’ll look at my video recordings, sync the audio, and create the final presentation!

Would this be useful to you as a conference organiser? Let me know how I can improve it – or if you’d like to collaborate to create a series of talks with this type of layout.