Stream the screen to multiple devices over the network

I had a need to display dashboards with monitoring on several screens in the office. There are several old Raspberry Pi Model B + and a hypervisor with a virtually unlimited amount of resources.

Apparently the Raspberry Pi Model B + does not have enough arbitrariness to keep the browser running constantly and draw a large amount of graphics in it, which is why the page is partially buggy and often crashes.

There was a fairly simple and elegant solution, which I want to share with you.

As you know, all Raspberry have a fairly powerful video processor, which is great for hardware video decoding. This is how the idea to launch a browser with dashboard somewhere else appeared, and to transfer a stream with a rendered image to the malinka.

Plus, it should have simplified management, since in this case the whole setup will be performed on one virtual machine, which is easier to update and back up.

No sooner said than done.

Server part

We will use the ready Cloud Image for Ubuntu . Without requiring installation, it contains everything you need to quickly deploy a virtual machine, and Cloud Init support helps you instantly configure your network, add ssh keys, and quickly put it into operation.

We deploy a new virtual machine and first install Xorg , nodm and fluxbox on it:

apt-get update apt-get install -y xserver-xorg nodm fluxbox sed -i 's/^NODM_USER=.*/NODM_USER=ubuntu/' /etc/default/nodm 

Just use the config for Xorg, kindly provided to us by Diego Ongaro, adding only the new resolution of 1920x1080 , since all of our monitors will use it:

 cat > /etc/X11/xorg.conf <<\EOT Section "Device" Identifier "device" Driver "vesa" EndSection Section "Screen" Identifier "screen" Device "device" Monitor "monitor" DefaultDepth 16 SubSection "Display" Modes "1920x1080" "1280x1024" "1024x768" "800x600" EndSubSection EndSection Section "Monitor" Identifier "monitor" HorizSync 20.0 - 50.0 VertRefresh 40.0 - 80.0 Option "DPMS" EndSection Section "ServerLayout" Identifier "layout" Screen "screen" EndSection EOT systemctl restart nodm 

Now we will install Firefox, we will run it as a system service, so at the same time we will write a unit-file for it:

 apt-get install -y firefox xdotool cat > /etc/systemd/system/firefox.service <<\EOT [Unit] Description=Firefox After=network.target [Service] Restart=always User=ubuntu Environment="DISPLAY=:0" Environment="XAUTHORITY=/home/ubuntu/.Xauthority" ExecStart=/usr/bin/firefox -url 'http://example.org/mydashboard' ExecStartPost=/usr/bin/xdotool search --sync --onlyvisible --class "Firefox" windowactivate key F11 [Install] WantedBy=graphical.target EOT systemctl enable firefox systemctl start firefox 

We need Xdotool in order to launch firefox in full screen at once.
Using the -url parameter, -url can specify any page so that it opens automatically when the browser starts.

At this stage, our kiosk is ready, but now we need to export the image over the network to other monitors and devices. To do this, we will use the features of Motion JPEG , a format that is most commonly used for streaming video from most webcams.

To do this, we need two things: FFmpeg with the x11grab module, to capture the image from X and streamEye , which will distribute it to our customers:

 apt-get install -y make gcc ffmpeg cd /tmp/ wget https://github.com/ccrisan/streameye/archive/master.tar.gz tar xvf master.tar.gz cd streameye-master/ make make install cat > /etc/systemd/system/streameye.service <<\EOT [Unit] Description=streamEye After=network.target [Service] Restart=always User=ubuntu Environment="DISPLAY=:0" Environment="XAUTHORITY=/home/ubuntu/.Xauthority" ExecStart=/bin/sh -c 'ffmpeg -f x11grab -s 1920x1080 -i :0 -r 1 -f mjpeg -q:v 5 - 2>/dev/null | streameye' [Install] WantedBy=graphical.target EOT systemctl enable streameye systemctl start streameye 

Since our picture does not require a quick update, I specified the update rate: 1 frame per second ( -r 1 parameter -r 1 ) and compression quality: 5 ( -q:v 5 parameter -q:v 5 )

Now we try to go to http: // your-vm: 8080 / , in response you will see a constantly updated screenshot of the desktop. Fine! - that was what was needed.

Client part

It's still easier here, as I said, we will use the Raspberry Pi Model B +.

First we install Arch Linux ARM on it, for this we follow the instructions on the official website.

We will also need to allocate more memory for our video chip, for this we will edit in / /boot/config.txt

 gpu_mem=128 

Download our new system and do not forget to initialize the pacman keyring, install OMXPlayer :

 pacman -Sy omxplayer 

Remarkably, OMXPlayer can work without X, so all we need is to write a unit-file for it and run it:

 cat > /etc/systemd/system/omxplayer.service <<\EOT [Unit] Description=OMXPlayer Wants=network-online.target After=network-online.target [Service] Type=simple Restart=always ExecStart=/usr/bin/omxplayer -r --live -b http://your-vm:8080/ --aspect-mode full [Install] WantedBy=multi-user.target EOT systemctl enable omxplayer systemctl start omxplayer 

As a parameter -b http://your-vm:8080/ we pass the URL from our server.

That's all, on the connected screen should immediately appear a picture from our server. In case of any problems, the stream will be automatically restarted, and clients will reconnect to it.

As a bonus, you can set the resulting image as a screensaver on all computers in the office. To do this, you need MPV and XScreenSaver :

 mode: one selected: 0 programs: \ "Monitoring Screen" mpv --really-quiet --no-audio --fs \ --loop=inf --no-stop-screensaver \ --wid=$XSCREENSAVER_WINDOW \ http://your-vm:8080/ \n\ maze -root \n\ electricsheep --root 1 \n\ 

Now your colleagues will be very satisfied :)