Friday, March 24, 2017

Enable WebRTC on QtWebEngine for Raspberry Pi 3

WebRTC is a web technology to enable peer to peer communication in real-time. It mainly use 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 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 are work with the QtWebEngine. The only thing which we can see is black box in a HTML5 video tag area. At the time of writing this problem exists in Qt version 5.6, 5.7 and 5.8.

This article explain how to resolve this problem in Qt 5.6.2, but this can be applicable 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 target platform. We are not sure how this works with other Raspberry Pi platforms.

  • In host PC create 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 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
    
    ./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 directiory and execute following set of commands:
    ~/raspi/qt5/bin/qmake WEBENGINE_CONFIG+=use_proprietary_codecs
    make
    make install
    
  • Now synchronize Raspberry Pi from host with following command:
    rsync -avz qt5pi pi@IP-ADDRESS:/usr/local
    
  • After synchronization, execute 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.
Post a Comment