Last Updated or created 2022-09-06

UPDATE: 20220906 – Started testing with steaming VR/360 also

RTMP stands for Realtime Messaging Protocol
RTSP stands for Realtime Streaming Protocol
HLS is a HTTP Live Streaming method

I needed a way to stream semi-realtime video to a website.
There are multiple use cases.

• Streaming a boardgame online
• Showing my desktop, while i was working on projects.
• Watched (streamed) Curse of Oak Island with some friends while being in a Jitsi meeting at the same time together.

In all cases i used OBS to stream to the website.

Prepare the stream server:

Install nginx, with the rtmp module

wget http://nginx.org/download/nginx-1.9.7.tar.gz
wget https://github.com/arut/nginx-rtmp-module/archive/master.zip
tar -xvf nginx-1.9.7.tar.gz
unzip master.zip
cd nginx-1.9.7
./configure --add-module=../nginx-rtmp-module-master/
make && make install
mkdir -p /HLS/live/test # live is the stream name, test is the pass key
chown -R {nginx user} /HLS

create a config file

worker_processes  1;
error_log  logs/error.log debug;
events {
worker_connections  1024;
}
rtmp {
server {
listen 1935;
allow play all;

application live {
allow play all;
live on;
record all;
record_path /video_recordings;
record_unique on;
hls on;
hls_nested on;
hls_path /HLS/live;
hls_fragment 10s;

}

application vod {
play /video_recordings;
}

http {
include       mime.types;
default_type  application/octet-stream;

server {
listen 80;
server_name www.fash.nu;
add_header Access-Control-Allow-Origin *;

location /live {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/live;
add_header Cache-Control no-cache;
}

location /mobile {
types {
application/vnd.apple.mpegurl m3u8;
}
alias /HLS/mobile;
add_header Cache-Control no-cache;
}

location / {
root   html;
index  index.html index.htm;
}
}

You need a webpage containing the embedded player

<!-- HTML -->
<video id='hls-example'  class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.fash.nu:8080/live/test/index.m3u8">
</video>


<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

<script>
var player = videojs('hls-example');
player.play();
</script>

Run the server part:

/usr/local/nginx/sbin/nginx -c /root/stream.conf

Now you can connect OBS to the streaming server

Open the webpage and enjoy!

UPDATE: 20220906 – Started testing with steaming VR/360 also

When attending the MCH2022 talk about streaming 360 video, i made a mental note to try this with my Vuze cam, using current setup and the one suggested in the talk : https://www.youtube.com/watch?v=460vo1O5pC4

To check : EGJS