Live streaming setup

Quick notes on the livestreaming setup we use on https://live.hackersanddesigners.nl

Server

To start the server you need access to the 'livestream' user account.

Log in to the server, this should work without a password. If this doesn't work ask Andre to add your ssh key to the user account.

• ssh livestream@hackersanddesigners.nl

Start the server:

• cd /var/www/live
• npm run start

Immediately after starting the script prints the stream key in the terminal window:

> hd-x-thehmm@1.0.0 start /var/www/live
> node server.js

Found an existing stream! Fetching updated data.
Your app is listening on port 4000
HERE ARE YOUR STREAM DETAILS, KEEP THEM SECRET!
Stream Key: ***xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx***


Copy the Stream Key.

If you are having problems with the stream key you can force the server to create a new key by deleting the cache.
Quit the server (if running) by pressing [ctrl]+[c].

Then:

• rm /var/www/live/.data/stream

then restart the server:

• npm run start

MUX

The backend we use is powered by [mux.com]. The recordings get stored there. If you need them, ask Heerko or André for the password.

OBS

• Download [OBS]
• Go to Settings > Stream

* Service: Custom
* Server: rtmps://global-live.mux.com:443/app
* Stream key: paste the key you copied from the terminal.

Setting up the scenes in OBS pretty clear, and there's plenty tutorials out there, so I am skipping that :)

OBS Ninja

To get a speaker in the stream we use OBS Ninja: https://obs.ninja/

Click on 'Create reusable invite', use the speaker's name as the name and click the 'generate the invite link' button.

The next screen gives you two links:

1. The link you give to the speaker to connect to.
2. The OBS browser source link

Save both. Send the speaker link to the speaker.

OBS Ninja Rooms

In the case that you want to invite a speaker to have a conversation, you should consider setting up an OBS Ninja "room". Go to https://obs.ninja/; click on add group chat to OBS and give your room a name. For past livestreams, we have used this room for video: https://obs.ninja/?director=h_d , and this room for screen-sharing: https://obs.ninja/?director=h_d_screens

These are the links to the "director's pages" where you can manage the rooms. It is self-explanatory but here are some things to make note of:

• This is the director's page, it is different from the chat room.
• All speakers (native H&D and guests) join the chat rooms via links: https://obs.ninja/?room=h_d and https://obs.ninja/?room=h_d_screens .
• They are two different rooms because it is impossible for a guest to share screen and video from the same room (:C).
• The preferred browser for everyone to use is Chrome.
• You have several options for importing the room into OBS and live streaming it from there:
  • Importing the entire room as it is with the link: https://obs.ninja/?room=h_d&view ; this will show everyone at all times; not the most desirable option.
  • Importing individual speakers videos and screens with the links that appear under them in the room; this is much more desirable because you can then construct scenes in OBS with different video / screenshare streams. For instance, you can share a speakers screen and also their video in one scene; and after their talk you can transition to a scene where it is only their video stream and video stream from H&D so they can have a Q&A. (please contact Karl if you want templates for speaker alone, speaker and screen, speaker and speaker, etc...)
• Audio: IMPORTANT! The room call should function like a "waiting room" so speakers can prepare and ask questions internally before you take them live. There is a button under each speaker in the director's page that mutes their audio in OBS. Please keep everyone muted until you take them live. They can still hear each other in the call and ask questions, but this won't go through to the public. You can leave all screenshares muted as you are already receiving their audio through the video share.
• Please ask speakers to join the rooms at least 5 minutes before they go live. Like this, you will have time to test their video, screenshare, and audio, mute them, and import their stream(s) into OBS.
• Here is a template for communicating to guest speakers how to participate: https://etherpad.hackersanddesigners.nl/p/livestream-guest-instructions-template

On Mac

The browser source in OBS can't capture the OBS.Ninja audio. As a work around we use the OBS.Ninja app. There's a really good explanation on how to set it up on their github: https://github.com/steveseguin/electroncapture

Please take note: Each video/screen stream you want to import from OBS Ninja needs a separate window of the app. For instance, if you have 3 speakers, you could end up with 6 windows of the OBS Ninja app (3 for video, 3 for screens).

If you've followed the instructions on OBS Ninja github (linked above), you will have a virtual audio device installed (probably BlackHole https://existential.audio/blackhole/). You need to route all audio coming in from OBS Ninja to this device as "input". To do this, for each of the streams coming in from your rooms, when you paste the browser link in OBS Ninja to import stream to OBS, make sure you select the appropriate audio input destination from the drop down menu.

You should then be muting and unmuting speakers regularly on the directors page of the room so that you selectively funnel audio streams into the virtual audio device and eventually out to the livestream. Keep an eye on the "Audio Mixer" window panel in OBS to see what the virtual audio device is outputting. If the device is not visible there, then you are either in the wrong scene or forgot to re-route audio from OBSN.

Retrieving the files

By default Mux.com creates .m3u8 files that could be played back directly from our site. But you can't download those streams.

We have to ask mux.com to create a mp4 file for us. To do that you issue the following command:

curl https://api.mux.com/video/v1/assets/<asset_id>/mp4-support \
-H "Content-Type: application/json" \
-X PUT \
-d '{ "mp4_support": "standard" }' \
-u <api_access_token>:<access_token_secret>

• asset_id - You can find on the asset page on mux.com.
• api_access_token - also on mux.com, under Settings - Access Tokens.
• api_token_secret - This is generated when the access token was created. If you don't have it ask Andre or Heerko.

Converting takes a while... When it is down, you should be able to download the file in your browser by visting:

https://stream.mux.com/<playback_id>/high.mp4?download=<filename>.mp4

• playback_id - You can find on the asset page on mux.com
  
• filename - this can be anything