Klaus

Add browser source in OBS Studio under Linux

 Thu, 16 Jan 2020 01:05:06 +0100 
Last week I played with OBS Studio and tried to install the browser source for Linux. Was some kind of a rabbit hole and I had never thought that I would ever compile Chromium and CEF. Before my notes get lost somewhere I just paste them here if I ever need it again. Most instructions I found describe Ubuntu, but I had no problems with OpenSuse, too.


You can capture a browser window with the Xcomposite source in obs-studio. I thought it would be a bit more convenient to use a browser source directly in obs-studio without the separate browser window, which sometimes is a bit tricky also.
You can get binary releases of obs-linuxbrowser from #^https://github.com/bazukas/obs-linuxbrowser/releases
Because of licensing issues some codecs are missing in these releases which you can verify at #^https://html5test.com/
The ```Building from source``` instructions from #^https://github.com/bazukas/obs-linuxbrowser/ is just one part, to get proprietary codec support you also need to compile CEF yourself which is a bit bigger task.

## Compiling obs-linuxbrowser with proprietary codecs support
I don't want all the build tools and devel packages, so I use a Docker build container.
$ docker run -it --name obs-studio-dev -v /mnt/obs-studio:/code opensuse/tumbleweed bash
Add Packman repository for openSUSE_Tumbleweed for obs-studio and some more codecs
$ zypper ar -f #^http://ftp.gwdg.de/pub/linux/packman/suse/openSUSE_Tumbleweed/ Packman
$ zypper install bzip2 curl tar git cmake gcc9-c++ obs-studio-devel ffmpeg-4
Install packages required for compiling obs-linuxbrowser from source
$ zypper install mozilla-nss libXrandr2 libcups2 libpango-1_0-0 libatk-bridge-2_0-0 libXss1 libXi6 libXcursor1 libXdamage1

### Building CEF with automated build script
The ```automate-git.py``` script will checkout depot_tools, cfe and chromium Git repositories and build everything.
It will download a lot and you will need quite some free storage! >20GB .git +20GB files and third_party stuff.
Get current release branch number from #^https://bitbucket.org/chromiumembedded/cef/wiki/BranchesAndBuilding
e.g. Nov 2019 ```3945``` with Chromium and CEF Version 79

Install required tools and libraries for CEF
$ zypper in python2-virtualenv glib2-devel gtk2-devel gtk3-devel libXi-devel mozilla-nss-devel gtkglext-devel libgnome-keyring-devel dbus-1-devel at-spi2-atk-devel xz clang libpulse-devel java pciutils-devel gperf alsa-devel xorg-x11-devel bison krb5-devel
Building CEF
$ mkdir -p /code/automate /code/chromium_git
$ cd /code
$ curl -s #^https://bitbucket.org/chromiumembedded/cef/raw/master/tools/automate/automate-git.py > automate/automate-git.py
Some configurations
$ export CEF_USE_GN=1
$ export GN_DEFINES="proprietary_codecs=true ffmpeg_branding=Chrome symbol_level=0 blink_symbol_level=0"
$ export GN_ARGUMENTS="--ide=vs2017 --sln=cef --filters=//cef/*"
$ export CEF_ARCHIVE_FORMAT=tar.bz2
Finally build CEF
$ python /code/automate/automate-git.py --depot-tools-dir=/code/depot_tools/ --download-dir=/code/chromium_git/ --branch=3945 --no-debug-build --no-debug-tests --minimal-distrib-only --no-distrib-docs --x64-build --build-target=cefsimple

Some more parameters that can be handy:
--force-clean
--force-distrib
--no-chromium-update
enable_basic_printing=false did not work in GN_DEFINES
GN_DEFINES=is_official_build=true use_allocator=none symbol_level=1 is_cfi=false use_thin_lto=false

Building ```libcef_dll_wrapper``` which we need to build obs-linuxbrowser
$ cd /code/chromium_git/chromium/src/cef/binary_distrib/cef_binary_79.1.10+g7ec49fa+chromium-79.0.3945.117_linux64_minimal/
$ cmake ./
$ make -j 6 libcef_dll_wrapper

### compile obs-linuxbrowser
$ git clone #^https://github.com/bazukas/obs-linuxbrowser
$ cd obs-linuxbrowser
To compile with newer CEF releases we need this branch until merged
$ git checkout -f fix-new-cef-api-108-110
$ mkdir build && cd build
$ cmake -DCEF_ROOT_DIR=/code/chromium_git/chromium/src/cef/binary_distrib/cef_binary_79.1.10+g7ec49fa+chromium-79.0.3945.117_linux64_minimal/ ..
$ make -j 6
$ make install
$ tar cjvf /obs-linuxbrowser.tar.bz2 ~/.config/obs-studio/plugins/obs-linuxbrowser/
Leave the build container
$ exit
Copy the obs-linuxbrowser from the container to the host and install it
$ docker cp obs-studio-dev:/obs-linuxbrowser.tar.bz2 .
Finally copy the obs-linuxbrowser from the archive to ~/.config/obs-studio/plugins/ and restart obs-studio

When there is an error like
IOError: [Errno 2] No such file or directory: 'chromium_git/chromium/src/build/util/LASTCHANGE.committime'
Following command helped
$ cd /code/chromium_git/chromium/src/build/util
$ python lastchange.py -o LASTCHANGE

Unfortunately the performance of this browser seems to be not as good. For example some h264 videos in a website are played smooth, others are a bit bumpy.

It was a nice exercise anyway. Felt a bit nostalgic to the old days where I compiled and packeged most of the tools and programs myself for Slackware. But since I have kids, which is also already over a decade, I don't have the time anymore, so I went back to OpenSuse where I have nearly everything ready to install.
Klaus
 Thu, 16 Jan 2020 18:13:05 +0100 
Well, I am not an expert for OBS Studio, maybe there are better ways to do it, it was just few things I stumble upon. When you want to interact with a website the standard window source is maybe what you want. But for example if you only want a timeline, or a self refreshing website that just runs in the background, this browser source could be a better fit. Also my problems with the standard window source is that every time you must reconfigure the source and select the right window again, or I use virtual desktops a lot, so when you record a window and you switch to another virtual desktop to look something up, the window on the other virtual desktop will not render anymore and you just have a black source, etc.
Haakon Meland Eriksen (Parlementum)
 Thu, 16 Jan 2020 19:57:30 +0100 
Thanks! :-)