# 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](https://www.youtube.com/watch?v=8vw32I2L49Q)

## 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`](http://rkd.zgib.net/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](https://github.com/rkdarst/midictl)
* 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