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.
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.
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:
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.
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.2After 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.
Comments