Refreshing the OS X build of obs-browser

For those of you who don’t know OBS is an open source broadcasting software used by streamers to broadcast their content to Twitch or similar streaming sites. It’s one of the few competing offerings for streamers, it’s free, and since about a year or so ago, it went multi platform, allowing OS X and Linux users to start streaming without the need to use Windows.

One of the cool features that OBS has is the fact that the users can write plugins for it to enrich their experience. The original Windows only version of OBS had a plugin called CLR Browser source, which allowed the streamers to include web content like dynamic overlays, notifications, chat, etc… into their streams. When the multiplatform version of OBS was released a new version of the plugin was released under the name of 
obs-browser which was OS X and Windows compatible. At the time of it’s release it used Chromium 38 (and there was an experimental version available using Chromium 41). Over time new versions of Chromium got released and the plugin got updated to support those, but only for Windows. As of 2 weeks ago, the Windows plugin was using Chromium 48/49 but the OS X version was still stuck on Chromium 41. Meaning that overlay developers working on OS X couldn’t reliably develop the overlays they wanted since they didn’t have browser parity across the platforms.

Now I personally don’t use OBS for my streams, and most of my overlay development work has been focused on supporting XSplit (a different Windows only broadcasting software) even thought I do most of my dev work on OS X. So not using OBS I never really cared about the state of 
obs-browser. But recently I’ve started working on some projects that would end up getting used and since I didn’t feel like switching between Windows and OS X constantly as it slowed down my workflow. At the same time, another streamer who I watch often, Avalonstar was developing a React based overlay, and he just kept running into issues caused by the old Chromium version used by obs-browser on OS X.

So I decided to look into it and find out why the plugin never got updated for OS X even thought Windows version continued getting updates.

Here’s what I found out:

  • The plugin was originally developed for OS X
  • The guy who wrote it is also part of the OBS core team
  • He has been super busy with other stuff and just didn’t have time for the plugin
  • While a mod on the OBS forums took it upon himself to keep the Windows version updated, he didn’t have much OS X dev experience and didn’t know how to build the OS X version
  • No one else on the OBS forums was able to figure out how to build the OS X version

At this point, I just had to look into what was blocking the OS X build. So like any other developer who has a love/hate relationship with Open Source Software, I ran `git clone` for the obs-browser project and decided to look into building it. And right away I hit a wall… The obs-browser project has a dependency on the libobs which I couldn’t find as something I could just get prebuilt somewhere to link the project to. After a bit of digging, it turns out that in order to build the plugin on OS X it actually needs to be included as part of the full obs-studio build. So with that obstacle tackled, few minor modifications of the obs-studio build files to include obs-browser, we are now well underway finding out what’s going on here.

I fire up the build, but it’s having trouble finding the Chrome Embedded Framework (CEF) library. A bit more research on the OBS and CEF forums, I found the build switches that were needed for obs-browser to find CEF and we were making some progress. obs-browser code finally started compiling, and SLAM, we run into another wall. Missing symbols for the architecture, complaining about the std:: functions. Turns out that by default CEF is using libstd and OBS uses libc++ (due to some C++11 features they use). Editing the CEF build files, to use libc++ and increasing the OS X SDK target to 10.7 fixed that.

Finally we are linking to CEF, we are getting further in the build process, we throw in some fixes to do with linking all parts of the obs-browser with the CEF libs and include headers, editing some of the newly added c++ code to extend the functionality of the Windows version, adding missing parameters to the functions that changed and we finally have the build going. The project builds and everything is linked! It spin up OBS, add a browser source, run HTML5 test and I see the following…

We got Chrome 49 running on Mac OS X OBS!!!

… and I’m like awwwww yeah!!! :D But in all seriousness I was super happy about getting it all to run on OS X, since apparently quite a few people have been waiting for this for over a year. But we were not done yet. The build still needed the old tools scripts from older builds of CEF, the custom CSS feature was not functional, the browser couldn’t load local files and the performance wasn’t the best since it was still using a debug build. But at lest I made some progress, right …

Few builds later, the MP3 support and custom css feature are there, but the local files are still not working and attempting to load them crashes CEF completely.

MP3 and Custom CSS, awww yeah :)

I turned back to the OBS Forums and OBS Dev chat both of which have been super helpful, but I finally found the cause of the local files issue thanks to the CEF Forums. After tracking the cause down, I chatted with the mod who updated the Windows of the obs-browser, he made a slight change to the local files setup, and all of a sudden it started working just fine on my OS X build. Now that we were feature complete, it was just a matter of making changes to the CEF build to prepare a release build to be used with the plugin.

My changes got merged into the main project repo, and it looks like the plugin will start being shipped as part of the core modules for OBS in the future. OSS success :)

If you want to check out the changes that had to be done to the obs-browser, you can see them in my branch on github here where you can see this journey in code form :P

Leave you thoughts in comments, and I’ll come back with another project story soon!

Cya around,