1
0
Fork 0
forked from ikagi/ikasti
Stylish MediaMTX wrapper and chatbox with freehand drawings
  • JavaScript 49.7%
  • CSS 31.8%
  • PHP 18.5%
Find a file
2026-03-29 20:41:22 +02:00
config ikasti 2026-01-04 21:08:03 +00:00
font ikasti 2026-01-04 21:08:03 +00:00
img Merge branch 'szy-master' 2026-03-23 00:22:19 +00:00
inc fix error in default config. dunno if this is the best way dont care 2026-01-10 00:31:11 +00:00
sound ikasti 2026-01-04 21:08:03 +00:00
.gitignore ikasti 2026-01-04 21:08:03 +00:00
___FALLBACK.jpg ikasti 2026-01-04 21:08:03 +00:00
base.js ikasti 2026-01-04 21:08:03 +00:00
checkAdmin.php ikasti 2026-01-04 21:08:03 +00:00
checkName.php ikasti 2026-01-04 21:08:03 +00:00
hsluv.min.js ikasti 2026-01-04 21:08:03 +00:00
markOnline.php ikasti 2026-01-04 21:08:03 +00:00
mediamtx_multitrack.patch document multitrack setup 2026-03-29 20:41:22 +02:00
reader.js document multitrack setup 2026-03-29 20:41:22 +02:00
README.md document multitrack setup 2026-03-29 20:41:22 +02:00
sendChatMessage.php ikasti 2026-01-04 21:08:03 +00:00
setStreamInfo.php ikasti 2026-01-04 21:08:03 +00:00
stream.js document multitrack setup 2026-03-29 20:41:22 +02:00
streamInfo.php ikasti 2026-01-04 21:08:03 +00:00
streamList.php ikasti 2026-01-04 21:08:03 +00:00
watch.css implemented mixer after all, might work on FF 2026-03-29 20:41:22 +02:00
watch.php document multitrack setup 2026-03-29 20:41:22 +02:00

ikasti

ikasti is a stylish wrapper around a WebRTC-only MediaMTX installation, that adds basic stream management, viewer numbers and discovery, and rich chat with both messages and freehand drawings (à la PictoChat).

ikasti is a hobby project written in a "stream of consciousness" style and not meant as a production product, so please use it with caution. It may cast your lunch money into the deep sea, where it will be spent on colorful squid-shaped cushions.

Setup

  1. Make sure you have the PHP extensions mbstring and yaml.
  2. Make sure you already have a working, reachable MediaMTX WebRTC installation.
  3. Place ikasti somewhere where you are able to serve it.
  4. Move /config/config.example.php to /config/config.php. See default-config.php to see what you can change, but the most important ones are mediamtx_endpoint, mediamtx_config and staff_key.
  5. Set up nginx or whatever server you like. It should redirect requests like /beans/ to /watch.php?id=beans

Example

My MediaMTX setup lives in /var/mediamtx, and the ikasti setup lives in /var/mediamtx/viewer. MediaMTX is at mtx.ikg.sh, and ikasti at s.ikg.sh.

Here's my nginx setup to match it:

# mtx.ikg.sh -> mediamtx
server {
	server_name mtx.ikg.sh;
	listen 443 ssl;

	ssl_certificate /etc/letsencrypt/live/ikg.sh/fullchain.pem;
	ssl_certificate_key /etc/letsencrypt/live/ikg.sh/privkey.pem;

	location / {
        proxy_pass http://127.0.0.1:24152/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;

        client_max_body_size 1G;
    }
}

# s.ikg.sh
server {
	listen 443 ssl;
	root /var/mediamtx/viewer;

	ssl_certificate /etc/letsencrypt/live/ikg.sh/fullchain.pem;
	ssl_certificate_key /etc/letsencrypt/live/ikg.sh/privkey.pem;

	index index.php index.html;

	server_name s.ikg.sh;

	error_page 404 /___FALLBACK.jpg;

    rewrite ^/streamshots/([^\/.]+)(\..+)?$ /snapshots/$1.jpg? last;
    rewrite ^/([^\/.]+)/?$ /watch.php?id=$1? last;

    location ~ /\. { internal; }

	location ~ \.php$ {
		include snippets/fastcgi-php.conf;
		fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
	}
}

Streaming

Browser

ikasti includes a simple streaming tool. After unlocking the stream management panel, select "Broadcast from your browser". You can either stream a camera or your screen. If you want to include your microphone, press "Add another audio source". This method is suitable for when you don't want to or can't use OBS, but is otherwise quite limited.

Basic OBS

In Settings → Stream → Service pick WHIP, and as Destination set http://your.mtx.instance/PATH/whip. The Bearer Token is your stream key.

Multiple audio tracks

ikasti supports broadcasting multiple audio tracks, for example game audio and voice commentary. A viewer using a supported browser can listen to any subset of them, while unsupported browsers will play all of them downmixed. In the Advanced Audio Properties dialog, you can pick in what tracks should your audio sources be available. This usecase is quite obscure, so coaxing multitrack output out of OBS requires some abuses.

※While multiple audio tracks is supported by WebRTC, MediaMTX does not (yet) support them without a simple patch available in this repo.

RTMP + FFmpeg

The first option is to use an obscure "Twitch-only" feature that allows you to send two audio tracks. Twitch uses one audio track for streaming and another for the VOD, letting you get away with livestreaming copyrighted music because it won't end up in the saved copy. This sends two audio tracks within one RTMP stream, which is what we want, but is by default only available when you link a Twitch account. To enable it for our evil needs, select File → Show settings folder, open user.ini and close OBS. In the [General] section add a line with EnableCustomServerVodTrack=true. Yes, it is this hidden.

After you start up OBS again, and select Settings → Stream → Service → Custom, go to the Output tab. Then, with Output Mode set to Advanced, make sure that there is an option for Twitch VOD track. Select the two tracks that you want to stream, and add bframes=0 to the x264 Options. Back in the Stream tab, set Destination → Server to rtmp://127.0.0.1/ika. Because OBS does not allow you to use eRTMP with Opus audio, this stream needs to be processed further with FFmpeg. Obtain a suitable FFmpeg copy for your system, and run ffmpeg -f flv -listen 1 -i rtmp://127.0.0.1/ika -c:v copy -c:a libopus -f flv -flvflags no_duration_filesize -map 0 "rtmp://your.mtx.instance/PATH?user=USER&pass=PASS". After this, press Start Streaming, and after a few seconds you should be live. The FFmpeg command will exit with your stream, so make sure to rerun it whenever you want to stream.

SRT

Another option that does not require a separate FFmpeg instance and allows more than two tracks is streaming using SRT. In Settings → Output → Output Mode select "Advanced". Then, switch to the Recording tab and set up "Custom Output (FFmpeg)" as follows:
File path or URL: srt://your.mtx.instance:8890?streamid=publish:PATH:USER:PASS&pkt_size=1316
Container Format: mpegts
Video Bitrate: (to taste)
Show all codecs: checked
Video Encoder: your preferred H.264 encoder, likely either nvenc_x264 or libx264
Video Encoder Settings: bf=0
Audio Bitrate: (to taste)
Audio Track: select the audio tracks you want to transmit
Audio Encoder: libopus

After this is done, you can stream using the Start Recording button. Unfortunately this collides with saving a copy of your stream, which you will have to do separately, requiring for example FFmpeg again: ffmpeg -rtmp_enhanced_codecs ac-3,av01,avc1,ec-3,fLaC,hvc1,.mp3,mp4a,Opus,vp09 -i rtmp://your.mtx.instance/PATH -c copy -map 0 my_vtuber_debut.mkv.