Integrate the Flipbase Recorder (V2)

Getting started
Settings
The callback
Multiple recorders on a single page
What you should know before you implement the recorder
Browser support

Getting started

In order to use the Recorder V2, place the HTML-code in your page as shown below. Load the recorder.js library and initialize the recorder against an HTML element using its id.

Load from cdn.flipbase.com. That is the CDN itself, so the request goes straight to the nearest edge. app.flipbase.com serves the same file through a reverse proxy on a single instance — existing integrations pointing at it keep working, but it is one more thing between the browser and the file.

<!-- Load the JavaScript Recorder V2 library.
     The repeated `recorder/recorder/` segment is correct — see the note below. -->
<script src="https://cdn.flipbase.com/recorder/recorder/recorderv2/recorder.js"></script>

<!-- Place an element at the spot where you would like to show the Recorder -->
<div id="recorder1"></div>

<!-- Initialize the Recorder and provide your 'recorderId' -->
<script>
  FlipbaseV2.recorder({
    selector: 'recorder1',
    recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407'
  });
</script>

Open the recorder playground

Opens in a new tab. Runs the published bundle from the CDN — the same bytes you would embed.

When the user has successfully saved the video, your callback receives the video's UUID. Store it in your database to play back the video later using the Flipbase Player.

Why the path says recorder twice

https://cdn.flipbase.com/recorder/recorder/recorderv2/recorder.js is the correct URL. The repeated segment looks like a mistake and is not: shortening it to /recorder/recorderv2/ returns 403, and an embed that was working stops working. https://app.flipbase.com/recorder/recorderv2/recorder.js serves the byte-identical bundle if you would rather load it from the application host.

Settings

The recorderId and selector are required. All other parameters listed below are optional.

Parameter	Type	Default	Description
recorderId	String	—	UUID provided by Flipbase. Required.
selector	String	—	The `id` of the element to mount the recorder into. Required.
allowUploadMethod	Boolean	`true`	When `true`, users can upload a video file in addition to recording with their webcam. Set to `false` to disable the upload option.
maxTakes	Number	`0`	Maximum number of recording takes a user can make. `0` means unlimited.
duration	Number	`30`	Maximum duration in seconds of a single take.
primaryColor	String	—	Color of the most prominent buttons. HEX format.
secondaryColor	String	—	Secondary button color. HEX format.
backgroundColor	String	—	Background color of the application. HEX format.
textColor	String	—	Text color. HEX format.
locale	String	`nl-NL`	See supported languages below.
maxWidth	Number	—	Maximum width in pixels. The recorder always maintains a 16:9 aspect ratio — it picks the most conservative dimension.
maxHeight	Number	—	Maximum height in pixels. See `maxWidth` description.
output	String	—	Decides what the callback's first argument contains. Leave undefined for the video's UUID. Set to `embedCode` for an embeddable iframe instead — it replaces the UUID, it is not an extra argument.
outputOptions	Object	—	Object with optional `pageName` and `privacy` properties. `pageName` is required when `output` is `embedCode`.
callback	Function \| String	—	Called when the upload finishes. Invoked with `(output, element)` — see The callback. A string is treated as the name of a function on `window`.

The callback

The option is named callback. There is no onSubmit — a recorder initialised with one registers no callback at all and never tells you the video exists.

It is called once the upload has finished, with two arguments:

FlipbaseV2.recorder({
  selector: 'recorder1',
  recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
  callback: function (output, element) {
    // `output` is a string, not an object. With no `output` option set it is
    // the video's UUID — this is the value to store.
    // `element` is the DOM element the recorder was mounted into.
    console.log('video UUID:', output);
  },
});

Argument	Type	What it is
`output`	String	The video's UUID, or the embed code when `output: 'embedCode'` is set.
`element`	HTMLElement	The element the recorder was mounted into.

The first argument is a string, so output.uuid is undefined; use the value itself.

callback also accepts a string, which is treated as the name of a function on window and called with the same two arguments.

Flipbase and FlipbaseV2 are the same object

The bundle assigns window.FlipbaseV2 and then window.Flipbase = window.FlipbaseV2, so Flipbase.recorder(...) and FlipbaseV2.recorder(...) call the same function. Examples here use FlipbaseV2; existing integrations on Flipbase do not need changing.

Default behaviour

If you initialize the recorder without allowUploadMethod or maxTakes, the defaults apply:

FlipbaseV2.recorder({
  selector: 'recorder1',
  recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
  // allowUploadMethod: true  (default — upload option is visible)
  // maxTakes: 0              (default — unlimited takes)
});

Disable upload method

To hide the upload option and force users to record with their webcam:

FlipbaseV2.recorder({
  selector: 'recorder1',
  recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
  allowUploadMethod: false,
});

Limit the number of takes

To restrict how many recording attempts a user can make:

FlipbaseV2.recorder({
  selector: 'recorder1',
  recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
  maxTakes: 2, // user can record at most 2 takes
});

Full example

An example of a fully customized recorder:

FlipbaseV2.recorder({
  selector: 'recorder1',
  recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
  duration: 15,
  allowUploadMethod: false,
  maxTakes: 3,
  primaryColor: '#aeb00a',
  secondaryColor: '#e0e0e0',
  backgroundColor: '#242b3c',
  textColor: '#FFFFFF',
  locale: 'en-US',
  output: 'embedCode',
  outputOptions: {
    pageName: 'my-page',
    privacy: 'public',
  },
  maxWidth: 640,
  callback: function (output, element) {
    // `output: 'embedCode'` is set above, so `output` here is the embed code,
    // not the UUID.
    console.log('Video saved. Embed code:', output);
  }
});

Multiple recorders on a single page

Each recorder instance requires a unique selector. Use the returned object's destroy method to remove an instance.

<div id="recorder1"></div>
<div id="recorder2"></div>

<script>
  var rec1 = FlipbaseV2.recorder({
    selector: 'recorder1',
    recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
    primaryColor: '#aeb00a',
  });

  var rec2 = FlipbaseV2.recorder({
    selector: 'recorder2',
    recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
  });

  // Destroy an instance when you no longer need it
  // rec1.destroy();
</script>

Check if upload is in progress

The isUploading method returns true while the user is uploading a video (not while recording). It requires the selector property to be set.

var recorder = FlipbaseV2.recorder({
  selector: 'recorder1',
  recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
});

console.log('Is uploading?', recorder.isUploading()); // false

setTimeout(function () {
  console.log('Is uploading?', recorder.isUploading()); // true if user started uploading
}, 30000);

Limitations

Keep the recorder interface at least 244 pixels wide at all times, including on mobile.
The recorder is fully responsive and fills its parent element by default. Use maxWidth to constrain it.
If the parent element is a <table>, the table must have a minimum width set, otherwise webcam recording will not work.
The recorder always maintains a 16:9 aspect ratio.

Browser support

Supported languages

Below you will find a list of all supported languages and their locale configuration property values.

Dutch: nl-NL, nl-BE, nl
English: en-US, en-GB, en-AU, en-CA, en-NZ, en-JM, en-ZA, en-IE, en
German: de, DE, de-CH, de-AT, de-LU, de-LI
Spanish: es, es-ES, es-CR, es-GT, es-PA, es-DO, es-MX, es-VE, es-CO, es-PE, es-CL, es-EC, es-UY, es-PY, es-BO, es-SV, es-HN, es-NI, es-PR
Portugues: pt, pt-PT
Portuguese Brazil: pt-BR
French: fr, fr-BE, fr-CA, fr-MC, fr-CH, fr-LU, fr-FR
Italian: it, it-IT, it-CH
Turkish: tr, tr-TR
Czech: cz, cz-CZ
Thai: th
Arabic: ar, ar-SA, ar-IQ, ar-EG, ar-LY, ar-DZ, ar-MA, ar-TN, ar-OM, ar-YE, ar-SY, ar-JO, ar-LB, ar-KW, ar-AE, ar-BH, ar-QA
Polish: pl
Slovakian: sk
Ukranian: uk
Russian: ru
Indonesian: id
Simplified Chinese: zh-CN
Japanese: ja
Swedish: sv
Serbian: sr
East Armenian: hy
Kirghiz: ky
Romanian: ro, ro-RO

Webcam

Chrome 24.0+
Firefox 16.0+
Safari 4+
Opera 10.6+

Mobile

Android browser 4.1+
Chrome for Android 46+
iOS Safari 7.1+

Upload

Safari iOS 7.1+
Android 4.0+
Internet Explorer 10+
Chrome 35.0+
Firefox 31.0+
Safari 5.1+
Opera 25+

Getting started​

Settings​

The callback​

Default behaviour​

Disable upload method​

Limit the number of takes​

Full example​

Multiple recorders on a single page​

Check if upload is in progress​

Limitations​

Browser support​

Supported languages​

Webcam​

Mobile​

Upload​