After building the Raspberry Pi restreamer I wanted a user interface. So my customer can change his streamkeys, without knowing how to edit them in the Pi. That turned out te be pretty simple.

As a PHP developer a was looking for a solution with PHP. So first I added PHP. As PHP version 7.4 is not available for the Pi.
We first have to add a new source. Login to the Pi direct of by SSH and execute the next lines.

sudo wget -O /etc/apt/trusted.gpg.d/php.gpg https://packages.sury.org/php/apt.gpg
echo "deb https://packages.sury.org/php/ buster main" | sudo tee /etc/apt/sources.list.d/php.list
sudo apt update

Next we have to do the actual install by typing the next line and hit enter.

sudo apt install -y php7.4-common php7.4-fpm php7.4-cli php7.4-curl php7.4-json php7.4-mysql php7.4-opcache php7.4-gd php7.4-sqlite3 php7.4-mbstring php7.4-zip php7.4-readline php-pear

PHP is installed, WE can verify that bij typing the next line followed by enter

php -v

Now we need to make sure nginx know how to handle PHP files.
So we edit the nginx config for the default website. 

sudo nano /etc/nginx/sites-enabled/default

We need to add a new location so we insert that by adding the following lines

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

And when we want index.php to be served as an index we need to add that to the index line.

index index.php index.html index.htm index.nginx-debian.html;

To activate the change we reload Nginx

sudo nginx -s reload

Now we need to add some code to the default website to get it working.
My first wish is that when te Pi is booted up with only a monitor attached It should show a screen with the IP address for the Pi so we can connect to the web interface over the network. So for the default website I created an index.php showing that.

sudo nano /var/www/html/index.php

Add the following lines and save the file

<?php
$ip = exec('hostname -I');
?>
<html>
  <head>
    <title>StreamGlobe - Restreamer</title>
  </head>
<body>
  <div>
  <?php
    echo 'IP Address '.$ip;
  ?>
  </div>
  <div>
    Manage at <a style="color:white;"  href="http://<?php echo  $ip;?>/manage/">http://<?php echo  $ip;?>/manage/</a>
  </div>
 </body>
</html>

For the looks I added some style and a background, but that is not included in this example.

As we want to allow PHP to edit the config. The best solution is to alter nginx.conf to include a file from the web root.

So go ahead and edit the nginx.conf

sudo /etc/nginx/nginx.conf

And remove the push configuration lines and replace them with an include file. The RTMP section of the config should look like

rtmp {
  server {
    listen 1935;
    application live {
      # Enable livestreaming
      live on;
      # Disable recording
      record off;
      include /var/www/html/nginx.txt;
    }
  }
}

Now we need to create the file in the web root and make it writable for everyboby (This time I don’t care about security, no other users on this pi

sudo touch /var/www/html/nginx.txt
sudo chmod 777 /var/www/html/nginx.txt
sudo nano /var/www/html/nginx.txt

add the lines for pushing the streams

# Restream to youtube
push rtmp://a.rtmp.youtube.com/live2/<streamkey>;

# Push URL with the Twitch stream key
push rtmp://live-cdg.twitch.tv/app/<streamkey>;

# Restream to facebook we need to use stunnel since rtmps is not supported
push rtmp://127.0.0.1:19350/rtmp/<streamkey>;

Everything should work as it used to. But we want to give the customer a way alter this file.

So I create a directory manage in the web root and an index.php file in there

cd /var/www/html<br>sudo mkdir manage<br>cd manage<br>sudo nano index.php

Add the following lines to the file and save it:

<html>
<head>
        <title>Restream configuration editor</title>
</head>
<body >
<div>
<?php
if( isset( $_POST['btnSubmit'] ) )
{
        $fh = fopen( '/var/www/html/nginx.txt', 'w' );
        fwrite( $fh, $_POST['config'] );
        fclose( $fh );

        echo 'Reboot the Pi in order to make the changes load or <a href="/manage/index.php">reload</a> the configuration editor.';
        exit;
}

$sContent  = file_get_contents( '/var/www/html/nginx.txt' );

?>
Be carefull. replace &lt;streamkey&gt; make sure the ; stays at the end off the line.
<form method="post">
<textarea name="config" id="config" style="width:50vw;height:15vw;">
<?php echo  $sContent;?></textarea>
<p><input type="submit" name="btnSubmit" value="Save config"></p>
</form>
<p>Examples for different services:</p>
<?php
$examples = '
Facebook push rtmp://127.0.0.1:19350/rtmp/<streamkey>;
Twitch: push rtmp://live-cdg.twitch.tv/app/<streamkey>;
Youtube: push rtmp://a.rtmp.youtube.com/live2/<streamkey>;
';
highlight_string( $examples );
?>
<p>You can use one service multiple times.</p>
<p>After saving the config reboot the pi.</p>
</body>
</html>

Again I added a bit off style which is not in this example but I created something like the next screen

It all works as it should but after booting the Pi, I noticed Nginx was not running. The message in the log was that the Youtube URL was not found.
So Nginx was started before the network was up and running.. To solve this I altered the service startup file adding a startup delay:

sudo nano /etc/systemd/system/multi-user.target.wants/nginx.service

I altered the ExecStartPre line to look like

ExecStartPre=/bin/sleep 10s

After that final adjustment it works as expected and I feel comfortable my client can work with it.

Now we want to autostart a fullschreen chromium browser to dispaly the IP address for the interface

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

Add the next line:

/usr/bin/chromium-browser --kiosk --ignore-certificate-errors --disable-restore-session-state http://127.0.0.1

Of course we can make more adjustments, and automate more stuff, but for now this will do.