How do I capture IFRAMEs under the same top-level domain?

Given that the top-level domain is example.com and the IFRAMEs are hosted in subdomains of it (i.e.www.example.com, app.example.com) make sure the following JavaScript one-liner is executed to all of the IFRAMEs and the top-level window:

// replace example.com with your top-level domain
document.domain = 'example.com';

This way, by having injected the Cubicast snippet only on the top-level window, the recorder will capture all of the IFRAMEs.

Even though I have enabled media capturing, the recorded media appears blank (aka the curious case of tainted canvas).

Our media capturing technology relies on canvases. When drawing media (images or videos) from other origins on the canvas, the canvas becomes tainted. As a result, exporting its image data is prohibited.

If you are capturing 3rd-party sites, then there is not much you can do to overcome this. On the other hand, if you own the site you are capturing, there are 2 options for overcoming this.

The first one is quite obvious; host the media on your site.

The second one requires code and possibly configuration changes. First, try loading the media requesting cross-origin access. For images drawn on the canvas see the following Mozilla article:

Allowing cross-origin use of images and canvas

For videos, first, try adding the crossorigin="anonymous" attribute.

If the recorded media still appears blank and you can configure the web server that the media files are hosted, try adding the appropriate CORS headers such as the Access-Control-Allow-Origin header. Then you should be good to go.

The majority of the frames captured from my WebGL canvas are blank (double buffered WebGL canvases).

Initialize your WebGL context using the preserveDrawingBuffer switch:

const gl = canvas.getContext('webgl', {
  preserveDrawingBuffer: true,
});

Unfortunately, this will inevitably hurt your rendering performance. In the future, we are planning to provide a JavaScript API that you can utilize for capturing your canvas immediately after your scene is drawn.

What constitutes a billable API request?

At Cubicast are always trying to make sure our clients' money is well spent, striving to keep billable API requests at a minimum level. Below you can find a list of the most common billable requests based on usage.

When recording sessions:

  • Creating the recording.
  • Adding a chunk to a recording.
  • Adding an asset to a workspace. Assets include stylesheets, web fonts, and images only when capturing private hosts. The recorder is optimized in a way so that already added assets are not added twice. Therefore, expect the first recording to perform more billable API requests than the rest.

When viewing recorded sessions:

  • Getting the recording info.
  • Getting the recording chunks collection.
  • Getting a single chunk of data. Since chunks are immutable, it is safe to cache them on the browser side, which means fewer API requests when the same client views a recording multiple times. Additionally, chunks are requested on demand as the playback moves ahead.

When using the Cubicast app:

  • Listing recordings.
  • Updating recordings/workspaces.
  • Searching workspaces.
  • Annotating recordings.
  • Adding/removing workspace team members.
  • Adding/removing workspace integrations.