Unfortunately some recent changes in the OBS Studio code have meant that this plugin no longer compatible. The plugin itself always was quick and rough, so a new version has been long overdue anyway. Until that time comes this version will remain, but won't run. (You'll get EGL errors rather than a working plugin if you're lucky, or a crash if you aren't.)

First grab the obs-studio source, make that build and work.

In addition to OBS Studio's Qt requirements, this plugin requires QtQuick (duh) and for the demo QtWebengine and the QML components that come with it.

Due to a persistent bug in QtWebengine which causes it to simply not initialise when not rendered directly to the screen (which isn't the point of this plugin, since we're basically just rendering it to an OBS source layer) the plugin itself initialises the QtWebengine global object on startup. Even if you don't use it. Sorry. This'll be fixed when the QtWebengine guys fix their jazz. If I don't do this, trying to use a WebEngineView QML component will crash OBS.

In [obs source root]/plugins edit the file CMakeLists.txt and near the bottom add this line:

add_subdirectory(obs-qmlview)

And .. yeah, put this checked-out repository in there too.

Now rebuild.

Now install.

Now start OBS.

Now add a "qmlview" source, and in properties setup the width/height and point it to your qml file. It uses a Qt URL, so, you can prefix it with https:// if it is a remote resource or file:https:// if it's local.

A "browser.qml" example file is provided. You need to open it in a text editor and toss in your own URL, and maybe set width/height. I don't know, I haven't checked if the plugin resizes the root object to the specified source dimensions automatically.

Interactive hooks are provided which can be activated by "going interactive" on the source. It's a bit weird to work with on the QML side because of the difference in how input works between OBS and Qt, and as an unfortunate side-effect many bindings (mostly to keys) are incomplete and must be changed depending on platform. (It hasn't been tested on Mac or Windows yet.)

The global object "engine" is exposed for accessing source parameters:

• engine.width - The width of the source.

• engine.height - The height of the source.

• engine.qmlWarnings(array) - A signal which can be connected to providing QML warnings and errors to your app.

Additionally, URL query parameters are available to your app as well:

• engine.getQuery() - Returns an object containing URL query parameters, such as:

file:https:///home/user/streaming/main.qml?service=Twitch&username=CoolStreamer123&mode=dark

{
	'mode': 'dark',
	'service': 'Twitch',
	'username': 'CoolStreamer123'
}