Teaching online with OBS
If you’re involved in education in anyway during this 2019/20 academic year, your routine has almost certainly been upended by the Covid-19 crisis. I teach in the Higher Education sector in the UK, and at my University in-person classes have been cancelled since just before our Easter break. These classes have moved online and so teaching staff need to adapt their teaching for this new medium. In this post I want to share some clips taken from a lecture I recently prepared 1 and explain how this was done in case this is helpful for others preparing content to be delivered in a similar way.
I clipped the following material from this lecture, as I think most of the techniques I was using appear at some point in the following short video.
What is OBS?
OBS Studio is a piece of free open-source software 2 designed for recording video, or for directly streaming video to services such as YouTube or Twitch. It’s a sophisticated piece of software with a lot of capability, and correspondingly a bit of a learning curve.
The video above was actually not recorded with OBS itself, as I was delivering the talk live via Zoom. OBS has a preview window, and I’ve found sharing this preview window through Zoom (or BigBlueButton or …) to be a reasonable way to communicate with students. You might notice that the video in the clip above has some lag to it, but this is being introduced due to me recording the preview window (which isn’t the intended purpose of the preview). I expect to deliver my lectures asynchronously next year, and so will probably record the lecture content in advance. In this case the recording made directly from OBS will be much smoother. OBS also supports direct streaming to platforms such as YouTube or Twitch for those that are interested in having their material available synchronously.
The main purpose of OBS in the above video is for compositing multiple sources, configured as a scene, into a single video.
Sources and Scenes
OBS supports lots of different sources; I’m using the following sources in the above clip:
- A video feed from a camera on a tripod using the Syphon Client source. I was using a DSLR 3, but this could be replaced with a phone camera on a homemade tripod without changing the overall effect 4.
- A Window Capture source, which mirrors the contents of any open window from any open application. Specifically, I shared a window from my web browser which was displaying a presentation written using revealjs. This gave me an easy way to display images and mathematical content that I didn’t want to spend the time writing out in full. Revealjs presentations are also able to have embedded dynamic content, such as the icosahedron which I’m able to rotate as I talk.
- An Image source, which simply displays an image file. However, if the contents of the image are changed whilst this source is being used, the displayed image will be updated automatically. I used this to create a ‘dual-visualiser’ setup, where I could fix a completed page of notes to one side of the screen whilst continuing to write on the other half. This worked by setting up a hotkey to take a screenshot of a selection and save it to the pre-defined file which was being displayed in the image source 5.
- When I use OBS for small group teaching, in which I’m communicating directly with a small group of students about a particular problem. I also often use the Window Capture source to display the PDF of either the relevant lecture notes or the relevant problems sheet, sometimes switching between the two.
In OBS, a collection of sources – arranged into a single composite frame – is known as a scene. The clip above only uses two scenes, one which shows the camera source alongside the presentation, and one which shows the camera source alongside the image source of previously written notes. OBS enables a hotkey to be associated with each configured scene, so during the lecture I used a hotkey 6 to change from the first scene to the second – this was helpful for keeping more of the details of a proof on screen at once – and then back to the first once I wanted the interactivity of my presentation.
Since I was sharing the OBS preview using Zoom, my laptop’s webcam was already being used to show my face in Zoom. However, if you’re recording a video using OBS you may also want to use the Video Capture source to add the feed from your webcam. When testing this, I created additional scenes which replicated the existing scenes but with the addition of the webcam. This meant that by switching to and from these ‘with webcam’ scenes, I could easily remove the webcam when I didn’t want it.
Interactive Content
The final thing I wanted to briefly mention, is that the literature suggests that students will be able to learn more effectively online when there is a degree of interactivity 7. There are many ways to add interactive elements to an online course, many of which may be via content that supplements your lectures, rather than in the lectures directly. However, in an attempt to add some interactivity to the lecture in the clip, since this content was delivered synchronously, I used TurningPoint to add a live multiple-choice question quiz into the lecture. TurningPoint is not particularly adept at handling mathematical notation, so I simply added the text of the question and possible answers onto the slides of my presentation, and displayed a short message of the form ‘see presentation’ into TurningPoint. I had a slide which explained to the students how they could connect to the TurningPoint quiz using the web browser in their phones or on their computers, and displayed the link they needed to use to access the quiz.
Another option for adding interactive quiz style content into your lecture content is using software such as Panopto - this is particularly true in the case of Durham, as we use Panopto to make video content available to students via our Blackboard VLE. Panopto can be used to manage the recording of content directly, but you can also upload a video created elsewhere, such as from OBS. Panopto can then embed quiz style questions into your lecture through its video player, and you can control where in the video such questions appear, as well as whether they are mandatory before being able to continue with the video, and so on.
The response data from these questions is then available to you as the lecture later, enabling you to check student understanding. In both cases, you may find that you need to add the text of the question into your presentation material, as neither piece of software is capable of displaying \(\LaTeX{}\) formatted content, to the best of my knowledge. The questions and answers also need to be predefined, so for more sophisticated questioning, you may wish to use a dedicated mathematics e-assessment tool such as STACK or Numbas.
-
The clips are actually from a recording I made whilst preparing my material and testing these new techniques. The lecture is taken from a course on Error-Correcting Codes, and in particular this lecture is from about three-quarters of the way through the course. The actual material being discussed is not important for this post. ↩
-
Available for Windows, macOS and Linux. ↩
-
Specifically a Canon D600. I used a tool called Camera Live which makes the Live View from the D600 available via a Syphon server. OBS then has a Syphon client source which allows OBS to see the feed from the camera. Depending on the camera you use, you may be able to add this to OBS using the Video Capture source, rather than the Syphon source. ↩
-
I tested this using EpocCam to make my phones camera feed available on my laptop, and mirrored this to OBS using the Window Capture source. Those using iPhones on Macs can also use the built in QuickTime tool. ↩
-
Since I have a Touch Bar enabled mac, I used BetterTouchTool to add a custom button to my touch bar which triggered the screenshot. ↩
-
Again, I used BetterTouchTool to add a button to my Touch Bar which triggered the hotkey. ↩
-
See this literature review, for example. ↩