[ICO]NameLast modifiedSizeDescription
[PARENTDIR]Parent Directory  -  
[DIR]dist/2021-05-17 22:28 -  
[DIR]src/2021-05-12 11:25 -  
[DIR]public/2021-05-12 11:25 -  
[DIR]node_modules/2021-05-09 14:53 -  
[TXT]README.md2021-05-18 08:28 4.3K3d06233 readme [كارل مبارك]
[   ]index.js2021-05-17 23:45 5.5K20552a2 readme [كارل مبارك]
[TXT]requestmp4support.sh2021-05-17 22:28 370 97cf19a last edits [كارل مبارك]
[   ]package-lock.json2021-05-10 09:56 515K 
[   ]vue.config.js2021-05-09 14:50 128  
[   ]package.json2021-05-09 14:50 1.7K 
[   ]babel.config.js2021-05-06 09:17 73  
[   ]Icon 2021-05-06 09:17 0  
# HNI Livestream

Livestream website for Het Nieuwe Instituut
## Set-up

This platform uses MUX, node, VueJS and WebSockets to leverage a simple yet elegant livestreaming solution. There are two websites:
```
1. PRODUCTION:  https://stream.hetnieuweinstituut.nl
2. DEVELOPMENT: https://stream.hni.karls.computer
```
They are identical except for two things: they have separate streams and chats. The purpose of this is to be able to run tests on (2) with OBS and OBS ninja before the event so that people who have the link to (1) don’t see them. You could also draft announcement messages in the chat to test there as well.

## Pushing

Any software that can produce an RTMP stream can be used. We reccmend using Open Broadcaster Software ([OBS](https://obsproject.com/)). Some instructions previously developed with Hackers & Designers can be found [here](https://wiki.hackersanddesigners.nl/index.php?title=Live_streaming_setup#OBS).


## Admin & API

The following rules apply to both URLs, but I will use the first one to keep it simple. The admin credentials are:
```
- username: admin
- password: <sent-to-you-privately>
```
To get the stream’s public details, go to:  
https://stream.hetnieuweinstituut.nl/stream

To get the stream key for OBS, go to:   
https://stream.hetnieuweinstituut.nl/key

To get the entire chat, go to:  
https://stream.hetnieuweinstituut.nl/posts

To clear the chat, go to:   
https://stream.hetnieuweinstituut.nl/clearchat

To make your messages purple, send `/isAdmin` into the chat:
- → Anyone can do this.
- → Make sure you spell it correctly, otherwise people will see it.
- → Messages sent prior to this won’t be colorised, so make sure /isAdmin is the first message you send.
- → Your details are not stored on the server, so if you switch to a different browser / incognito window, you have to do this again.


## Recordings

Getting recordings from MUX is not simple. Videos are recorded by default, but are not downloadable as mp4. So we need to (1) make a request from MUX to give us an mp4 version of our asset, (2) wait for it to be ready, and (3) download it.

We will use the file listed above: [requestmp4support.sh](requestmp4support.sh). This script is configured specifically for https://stream.hetnieuweinstituut.nl. 

**Never download and run a bash script from an untrusted source.**

1. First download the file [requestmp4support.sh](requestmp4support.sh) to a folder you can easily access.
2. Open a terminal.
3. Type `cd  ` (including a space after) and drag the containing folder of the file into the terminal. The terminal should show: 
```bash
cd /path/to/your/containing/folder
```
4. Hit enter key. 
5. Type `ls`  and then the enter key. You should see the file listed there.
6. Go to MUX dashboard > video > assets > and make sure you have “production” selected from the top drop down
7. Then in the list of assets, find the video you want to download. Usually it’s the one with the duration of the live event. In case the connection cuts off during the event, sometimes there will be two or three assets that you have to download and stitch together.
8. Copy the **`Asset ID`** to your clipboard.
9. Go back to your terminal and type: 
```sh
sh requestmp4support.sh YOUR-ASSET-ID
```
For example: 
```sh
sh requestmp4support.sh O9aiInUMfJlBgCKdgkzoTh5NsC00pQYHhSbiiIOGDUWE
```
10. Hit enter. This command makes a request to MUX to produce the mp4 version of the video.
11. If it doesnt work let me know pls.
12. Then go back to MUX dashboard > API activity > events. Here you will need to wait for the **`video.asset.static_renditions.ready`** event, which happens when the mp4 asset is ready. It could take up to two hours.
13. When the event is there, you can click on it and find the `playback_id`. This is under:
```json
"playback_ids": [
    {
       "policy": "public",
       "id": "IT'S-HERE-:)"
    }
],
```
14. Open **`https://stream.mux.com/YOUR-PLAYBACK_ID/high.mp4`** to download the file in high quality. You can replace 'high' with 'medium' or 'low' as well.
15. Please let me know if something doesn't work.

## Authors & License

[Karl Moubarak](https://moubarak.eu)

This codebase has been initially developed as part of a collaboration between [Hackers & Designers and The Hmm](https://github.com/hackersanddesigners/the-hmm-livestream). The source code is licensed under MIT.