Browser Configuration

This plugin has been obsoleted!

The temporary location to get the latest CLR Browser Source Plugin is here.

Prerequisites

If you haven’t installed the Browser Source Plugin yet you must follow these download instructions.

After you’ved installed you can quickly confirm this fact by checking which plugins are installed and active.

Click the Plugins button in the bottom right corner above exit and you should see Browser Capture Plugin.

If you see this then you have successfully installed (or have installed in the past) the Browser Source Plugin.

Select Browser Capture Plugin in the listbox and on the right hand side of the listbox you should see which version you have installed.
Confirm that this is the latest version accord to the download page.

Adding your first Browser Source to the scene.

If you haven’t created a Scene yet do so now. Right click on your sources Add→Browser and then confirm the new Source named Browser.

Configuring your Browser Source

This is where most of the complication lies due to unfamiliar terms.

Here is the default configuration scene with its 4 logical sections highlighted.

(1) Simple URL or asset URL

When I refer to scheme, I am referring to what comes before the ://. The asset scheme (asset://) and http scheme (http://) are the most common.

The browser plugin will handle any normal URL using the http, https and file scheme such as:

http://www.obsproject.com
http://youtube.com
http://twitch.tv
file:///…

It also has a custom scheme handler called asset which gives you more control over the files being served. For more information take a look at the asset documentation.

Flash files, movies, and non-html URLs

You must use the asset scheme when referring to these file types. For more information refer to the asset documentation on how to correctly include these types of files.

(2) Browser Width and Height

This should be fairly basic and self-explanatory. The width and height refer to the amount of pixels the virtual browser window will be. In most cases this will be directly related to the size of the content you want to show.

(3) Custom CSS

The custom CSS allows you to change the base stylesheet loaded by all requests.

Note: This feature does not require you to be using the asset scheme.

The default looks like this:

::-webkit-scrollbar { visibility: hidden; }
body { background-color: rgba(0, 0, 0, 0); }

The first line disables the scrollbar and the second line sets the default background color to transparent.

This means that if you don’t have any opaque items in the site being loaded then you will be able to see sources behind your browser source.

One common request is to remove the default margin on the top and left side. If you see that there is a black border to the left and top you can disable it by changing your default css to:

::-webkit-scrollbar { visibility: hidden; }
body { 
	background-color: rgba(0, 0, 0, 0);
	margin: 0 auto;
}

(4) Asset Wrapping

This is directly related to assets and more information can be found in the asset documentation.

To use asset wrapping you must be using the asset scheme in the URL and have the ‘Wrap the asset in an html body’ checkbox selected.

Asset Wrapping is a very simple templating system that has 3 variables.

$(FILE) replaced by the URL specified in section 1 according to the image
$(WIDTH) replaced by the width specified in section 2
$(HEIGHT) replaced by the height specified in section 2

When Asset Wrapping is enabled and an asset scheme is specified as the URL then the template in section 4 according to image gets served after replacing the variables.

This may appear to be complicated but it’s only due to terminology.

Here is an example of how it works.

1: URL: asset://local/plugins/BrowserSourcePlugin/movie.webm
2: Width: 250
3: Height: 40
4: [x] Wrap the asset in an html body

5:

<html>
  <head></head>
  <body>
  	File: $(FILE)
  	Width: $(WIDTH)
  	Height: $(HEIGHT)
  </body>
</html>

For this example only I changed the opaqueness of the background to 100%

::-webkit-scrollbar { visibility: hidden; }
body { background-color: rgba(255, 255, 255, 255); }

This results in this:

The document being presented is generated dynamically based on the wrapped asset found in section 5 according to the image.

This makes it much simpler to include movies, flash files, etc. without having to create a physical html file for each one.

Relative requests in wrapped assets

All requests made in the wrapped asset are relative to the path in the URL excluding the filename. For example asset://local/files/file.txt will make further relative requests (images, css, etc.) in the files directory. This includes flash files loading dynamic files.

Back