NEIC AHM 2022 hackathon: online teaching

tags: NeIC

See also: the AHM talk, related to this: https://hackmd.io/LQxs3v72QRi79MFtge3fng

Link to this document: https://hackmd.io/@coderefinery/ahm-hackathon-2022

Time

• 24. • 27.2.
• Tue, Wed, and Thu but not everybody will have time all the time
• Monday: plenary sessions

Attendees

(if you write your name here, you may get emails about the event)

• Johan Hellsvik
• Radovan Bast
• Enrico Glerean
• Simo Tuomisto
• Samantha Wittke (only monday + tuesday)
• Jarno Rantaharju
• Diana Iusan

Goals

(since we can have different interests, each person write their goals here, and then we can assemble them into a plan)

• (rkdarst) Make the online streaming setup I have reusable by others. Allow others to test it out to refine it.
• (RB) Create a recording where we explain and demonstrate the setup. But not just using "slides" but where we visit the different rooms and roles together and explain it. A bit like a video explaining a manufacturing process.
• (JR) Simplify the streaming setup and installation to make it more accessible to people with less technical skills or fewer screens and other equipment.
• (EG) Reproducing the setup with other OSs (e.g. Aalto Windows)
• (JH) Get hands-on experience of operating the online streaming setup.
• (ST) Learning how the setup can be replicated.
• (SW) support your goals as best as I can :) where I think I can help: make current setup easily explainable to instructors without much technical details, "you need to be here and do your things, while this is how learners see/interact" (related to step 1 below)

Existing references

• https://coderefinery.github.io/manuals/coderefinery-mooc/
• https://coderefinery.github.io/manuals/obs/
• https://coderefinery.github.io/manuals/online/
• https://github.com/coderefinery/obs-scenes
• https://github.com/GamesDoneQuick/agdq19-layouts
• SGDQ2018 stream tech guide video

Brainstorming

• Fully cloud solution would be nice
• RD: if local solution, I think for local it can be simplified to:
  • One dedicated streaming computer (not used by presenter), needs one external monitor only
• OBS tablet remote gives some control
• Getting it to either run somewhere as a "service", or a simple installation module, where its essentially a "pip install OBS_Setup; run OBS"
• If run on a server, maybe that part could be provided as a service
  • (TP) Even though I asked for it, the disadvantage of it being a service would be that you need the "server infrastructure", so having a local option would probably be good
    • (RD) Check OBS requiremnts, can it run headless in a cloud?
  • (JR) If possible, I would prefer a self-contained setup running locally on a laptop / desktop
    • (TP) or temporarily remotely on a work-place machine you have access to?
      • (JR) I don't have one. A second machine is a requirement many users would not meet
        • Not as a requirement, but as an option? Or run it "on a tablet" (if that's even possible requirement-wise)
        • (RD) Difficult because of amount of encoding
• any possibility for running this with rather bad internet connection? Will everything fully break if internet connection is lost?
  • (RD) Yes, need stable connection! Or pretty good
• Can we have some "minimium requirements" for the whole broadcast?
  • e.g. mixer and and 2 instructors and a co-producer could be overkill for an audience of 20
  • however, there is also the recording (people watching later)
  • zoom recording alone may or may not be enough (we had trouble with privacy)
    • (RD) IMO we can do better with privacy, and I think we should have a higher moral stanard than "put a disclaimer and it is legal"
    • people may ask us later to be removed from video or voice so better not have them there at all
  • we could optimize for 100 persons watching live and later once this is working and simple, one could try to scale the setup down to say 20 persons
  • (DI) What is the minimal setup requirement in terms of hardware and software? Or just list what RD is using.
• Steps
  • 1: as it is now but everybody understands it and we can easily explain it to instructors
  • 2: richard's hardware but others can help with live production and post production
  • 3: define what hardware is minimum viable
  • 4: be able to use other hardware (cloud or actually other hardware)
• Presentation/recording on Thursday

Other things we can work on

• Decrease streaming latency?
• JavaScript frontend to scene selection
• Simplifying/scripting post-processing even further
• Scene layout and OBS profile repository
• Adding placeholder materials to scenes so that they will show scene layouts in a more visual way

Notes on Richards presentation:

• OBS with different pre-setup scenes (title(=title-card), gallery (=iunstructor-gallery) ,local(=director-screen), remote (=screenshare), notes(=hackmd; window capture of browser window with cropped off top))
• scenes have different sources
• scenes are mostly vertical
  • EG: I am trying to make the scene vertical on Windows but there is no option to specify custom WxH in pixels. I have to find where to set that… (off to another meeting now)
• scenes setup can be imported via json
• zoom is split into two windows that are captured separately (gallery and screenshare; from settings > general settings > dual monitors)
• reliable internet connection is important!
• for courses, no jitsi is used, only zoom and OBS
• OBS Tablet remote: also works on phone/tablet; static site for javascript web socket connection, can switch scenes (named same as in OBS), add more devices etc, also Audio is connected, if one is muted other is muted
  • Web socket server settings: Host: k8.zgib.net, Port: 4445 (pw in zoom chat ;))
  • use pencil in upper right to add devices, checkmark when finished
  • this provides mic volume in main view
  • to be improved (custom javascript):
    • optimized use for teaching (everything already set up (default setup) when logging in)
      • 5 scenes (title, gallery,local, remote, notes)
        • notes (hackmd) is now screen capture of browser, needs to be scrolled down
        • Hackmd and broadcaster screen could be removed from scenes
          • other solutions were discussed (please fill in here)
      • mute status
      • control picture in picture view
      • preview of what is currently shown
    • scaling of picture in picture
    • improved layout of scenes and other inputs
• Midi controller
• Scaling of scenes:
  • Transform menu in OBS > Edit transform > To have the scale just right for stream, no matter the input size
• if screenshare is stopped, zoom gallery is visible
• better to always switch ('take over') screenshare to eg HackMD window rather than stopping screenshare

"Broadcaster" (the person with OBS running):

• should not be teaching on the same computer (getting around this is possible but greatly increases complexity, we prefer a two-computer solution)
• cannot use zoom screenshare
• could have two computers (one with OBS other for everything else, ie interacting with HackMD, teaching, …)
• setup could be on separate Computer with only OBS running which could be anywhere with good internet connection, broadcaster connects to it

Broadcaster setup (how it should be in the end):

• open OBS
• import scenes
• make sure sources are set correctly (in scene properties, by window titles)
• setup scaling correctly (transform menu)
• open OBS tablet remote on computer/phone/tablet
• good to go!

Steps to set up the broadcast computer

• install obs client

sudo apt install obs-studio

• Download and install obs-websocket
  • This download version 4.7.0, which is not the newest version, but is compatible with the obs-studio 25.0.7 that is available in the Ubuntu repositories

wget https://github.com/obsproject/obs-websocket/releases/download/4.7.0/obs-websocket_4.7.0-1_amd64.deb
sudo apt install obs-websocket_4.7.0-1_amd64.deb

Blog post

January 25-27, CodeRefinery had a hackathon about online teaching. The goal

How hackathon worked

Initial goals

How it went

Outputs