Enable WebRTC on QtWebEngine for Raspberry Pi 3

WebRTC is a web technology to enable peer to peer communication in real-time. It mainly uses to create video conferencing and chat applications using web browsers. In this post, we describe how to enable this technology in QtWebEngine on Raspberry Pi 3 platform.

QtWebEngine is an embedded browser component which comes with the Qt framework. This component is based on Google Chromium browser and it supports most of the Chromium features including WebRTC. In PC, WebRTC applications run smoothly on QtWebEngine component. But in Raspberry Pi platform situation is different and none of the WebRTC application is work with the QtWebEngine. The only thing which we can see is a black box in an HTML5 video tag area. At the time of writing this problem exists in Qt version 5.6, 5.7 and 5.8.

This article explains how to resolve this problem in Qt 5.6.2, but this can be applied for other Qt versions which released recently.

In this article, we use Ubuntu 16.04 (AMD64) based PC to cross compile the Qt framework and Raspberry Pi 3 Model B board is used as a target platform. We are not sure how this works with other Raspberry Pi platforms.

• In host PC create a working directory and get Raspberry Pi tool-chain:

mkdir ~/raspi
cd ~/raspi
git clone https://github.com/raspberrypi/tools

• In Raspberry Pi open /etc/apt/sources.list and un-comment the deb-src line.
• Execute the following set of commands in Raspberry Pi:

sudo apt-get update
sudo apt-get build-dep qt4-x11
sudo apt-get build-dep libqt5gui5
sudo apt-get install libudev-dev libinput-dev libts-dev \
libxcb-xinerama0-dev libxcb-xinerama0
 
sudo mkdir /usr/local/qt5pi
sudo chown pi:pi /usr/local/qt5pi

• After setting up above packages in Raspberry Pi execute following commands in host PC. (In below commands replace IP-ADDRESS with actual Raspberry Pi IP address).

mkdir sysroot sysroot/usr sysroot/opt
rsync -avz pi@IP-ADDRESS:/lib sysroot
rsync -avz pi@IP-ADDRESS:/usr/include sysroot/usr
rsync -avz pi@IP-ADDRESS:/usr/lib sysroot/usr
rsync -avz pi@IP-ADDRESS:/opt/vc sysroot/opt

wget https://raw.githubusercontent.com/riscv/riscv-poky/master/scripts/ \
sysroot-relativelinks.py

chmod +x sysroot-relativelinks.py
./sysroot-relativelinks.py sysroot

• Download Qt 5.6.2 source code from https://download.qt.io/archive/qt/5.6/5.6.2/single/qt-everywhere-opensource-src-5.6.2.tar.gz and extract it to ~/raspi directory.
• Download patched QtWebEngine file set from here and copy it to ~/raspi/qt/qtwebengine directory. 
• Open ~/raspi/qt/qtbase directory and compile Qt base libraries with following commands:

./configure -release -opengl es2 -device linux-rasp-pi2-g++ 
-device-option CROSS_COMPILE=~/raspi/tools/arm-bcm2708/gcc-linaro-\
arm-linux-gnueabihf-raspbian-x64/bin/arm-linux-gnueabihf- 
-sysroot ~/raspi/sysroot -opensource -confirm-license -make libs 
-prefix /usr/local/qt5pi -extprefix ~/raspi/qt5pi 
-hostprefix ~/raspi/qt5 -v

make
make install

• After compiling qtbase compile qtdeclarative, qtconnectivity, qtlocation, and qtwebchannel with following commands:

cd  qtdeclarative
~/raspi/qt5/bin/qmake
make
make install

• After compiling above libraries execute install-build-deps.sh file in ~/raspi/qt/qtwebengine/src/3rdparty/chromium/build directory to install chromium build tools/packages in host PC.
• Change directory to qtWebEngine directory and execute the following set of commands:

~/raspi/qt5/bin/qmake WEBENGINE_CONFIG+=use_proprietary_codecs
make
make install

• Now synchronize Raspberry Pi from the host with the following command:

rsync -avz qt5pi pi@IP-ADDRESS:/usr/local

• After synchronization, execute the following set of commands in Raspberry Pi:

sudo rm /usr/lib/arm-linux-gnueabihf/libEGL.so.1.0.0 
/usr/lib/arm-linux-gnueabihf/libGLESv2.so.2.0.0
sudo ln -s /opt/vc/lib/libEGL.so /usr/lib/arm-linux-gnueabihf/libEGL.so.1.0.0
sudo ln -s /opt/vc/lib/libGLESv2.so 
/usr/lib/arm-linux-gnueabihf/libGLESv2.so.2.0.0

sudo ln -s /opt/vc/lib/libEGL.so /opt/vc/lib/libEGL.so.1
sudo ln -s /opt/vc/lib/libGLESv2.so /opt/vc/lib/libGLESv2.so.2

After the above steps target Raspberry Pi is ready to run hardware accelerated OpenGL (with EGLFS) Qt application with QWebEngine.

To test the WebRTC functionality we create simple Qt widgets application using QWebEngine. In this test application we load AppRTC (http://appr.tc) into QwebEngine to test the WebRTC functionality.

QWebEngineView *_webEngine = new QWebEngineView();
_webEngine->load(QUrl("https://appr.tc/"));

In above application we make sure to handle QwebEnginePage::featurePermissionRequested signal to authorize camera / multimedia devices for QwebEngine. In our test application above signal is handled as follows:

_webEngine->page()->setFeaturePermission(securityOrigin, feature, 
QWebEnginePage::PermissionGrantedByUser);

With above command test application allows QwebEngine to access any camera /multimedia device it requests.

In hardware accelerated OpenGL mode some Qt application getting crash due to lack of GPU memory. To fix this add 'gpu_mem=512' to the bottom of the /boot/config.txt file in Raspberry Pi.

For this setup we use Raspberry Pi 3 with Raspbian Jessie (in console mode). Above described sample Qt application is tested with Logitech C270 USB web camera.