Integrate the Flipbase recorder (V1)

This bundle is frozen — do not build a new integration on it

https://cdn.flipbase.com/recorder/recorder.js is unversioned and receives no fixes, no features and no browser-support work. It stays live indefinitely, because pages have loaded it for years and changing it would change what all of them get — that is the same reason it cannot be fixed.

This page is here so that an integration already on it has documentation, and for nothing else. For anything new, and to receive fixes, use Recorder V2, which pins an exact version — and see If your page loads an unversioned bundle for the one part of this bundle that is not frozen.

Getting started
Settings
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 app, place the HTML-code in your code, as shown below. The recorder.js application is based on a HTML <input type="flipbase"/> element and the JavaScript recorder.js library.

This is an unversioned path, and it is frozen. It serves the same bytes it served the day you integrated and will keep doing so — but it never receives a fix, because a fix would change a URL thousands of pages already load. Both cdn.flipbase.com and app.flipbase.com serve it, so an integration on either host keeps working untouched. To receive fixes you have to pin a version instead.

<!--  Load the JavaScript Recorder library.
      Unversioned and frozen: these bytes are what you get, permanently.
      `https://app.flipbase.com/recorder.js` is the byte-identical file on the
      application host — note the path there has no `/recorder/` segment.  -->
<script src="https://cdn.flipbase.com/recorder/recorder.js" ></script>

<!-- Place an HTML input element at the spot were you would like to show the Recorder -->
<form>
    <input type="flipbase"/>
</form>

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

Open the recorder playground

Opens in a new tab. Loads this frozen unversioned bundle — the same bytes your page loads today. Use the playground's version picker to compare it against a released version.

When the user has succesfully saved the video, the input node will be provided with a videoId, as shown below:

<form>
    <input type="flipbase" value="63341990-a44e-11e3-bdf9-891861f38674"/>
</form>

To playback videos you will need to store the videoId in your database. The videoId is a 'Universally Unique IDentifier', better known as UUID. Using the videoId and the Player application you will be able to playback the recorded video.

Settings

Except the recorderId options, all parameters listed below are optional.

Parameter	Type	Description
recorderId	String	UUID provided by Flipbase. This is the only mandatory setting.
duration	Number	Maximum duration in seconds of a single take. `30` is default.
selector	String	The element ID to create the recorder application for (only necessary when using multiple recorder instances on a single page).
primaryColor	String	Change the color of most prominent buttons. Color in HEX format.
secondaryColor	String	Color in HEX format.
backgroundColor	String	Change the background color of the application. Color in HEX format.
textColor	String	Change the color of the text. Color in HEX format.
locale	String	Here can you find a list of all supported locales. The values `nl_nl` and `en_us` are deprecated.
maxWidth	Number	By default the recorder application will fill up it's parentNode. However, if you want to make sure the height or width of the interface does not exceed a certain number of pixels you can provide it using these 2 properties. Please note, that the recorder ALWAYS keep the 16:9 aspect ratio, even if you provide other dimensions using the maxWidth and maxHeight properties. The application will always choose to most conservative width and height dimension.
maxHeight	Number	See `maxWidth` description.
output	String	Using the output property you can change what the application will output and insert into the input element. Leaving the output undefined will make sure the application inserts a UUID into the `<input type="flipbase" />` element. However, if you set it embedCode the application will 1) set a embedCode as value of the `<input type="flipbase" />` element and 2) will provide the embed code as second argument when invoking the callback function (if provided). Change the default output (the video id) to `embedCode` to receive an actual iframe which can be embedded on an external page.
outputOptions	Object	Object literal with `pageName` and `privacy` as optional properties.
callback	Function	Once the user saves a video this callback will be triggered. The callback function will be invoked with 2 arguments: the videoId and the output (depending on)

An example of a fully customized recorder can look something like this:

Flipbase.recorder({
  recorderId: 'xxxxxxxx-xxxxx-xxxxx-xxxxx-xxxxxxxxx',
  duration: 15, // 15 seconds video max
  primaryColor: '#aeb00a', // green button background color
  secondaryColor: '#e0e0e0', // ligt grayish text color of the button
  backgroundColor: '#242b3c', // dark blueish interface background
  textColor: '#FFFFFF', // text color
  locale: 'en-US', // Use English instead of default Dutch
  showFAQButton: false, // Hides the default FAQ button
  outputOptions: {
    privacy: "public"
  },
  maxWidth: 500,
  maxHeight: 400,
  // The callback is triggered everytime the video is saved or updated
  callback: function (id, output) {
    alert('The video has been saved to our server. The video UUID you should store in your database is: ' + id);
    console && console.info && console.info('The video UUID you should store in your database is: ' + id);
  }
});

Multiple recorders on a single page

<input id="recorder1"/>

<script>
  var rec1 = Flipbase.recorder({
    recorderId: "9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407"
    selector: 'recorder1', // !! required when creating multiple instances on 1 page
    primaryColor: '#aeb00a',
    showFAQButton: false,
    secondaryColor: '#e0e0e0',
    backgroundColor: '#242b3c',
    textColor: '#FFFFFF'
  });

  // Invoke the `destroy` method if you want to close the pop-up or tab in which you showed the recorder
  rec1.destroy()
</script>

<!-- Add a second recorder instance -->
<input id="recorder2"/>

<script>
  var rec2 = Flipbase.recorder({
    recorderId: "9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407"
    selector: 'recorder2'
  });

  // Invoke the `destroy` method if you want to close the pop-up or tab in which you showed the recorder
  rec2.destroy()
</script>

Check if upload is in progress

To check if the user is currently uploading a video we have implemented to isUploading method that is returned by the Flipbase.recorder function. Note: this method is only returned when the Flipbase.recorder function is invoked with the selector property. Please note that isUploading only returns true when the user is uploading video; it will return false when the user is recording a video. See also the example below.

<div>
  <input id="recorder1"/>
</div>
<script>
  var recorder = Flipbase.recorder({
    recorderId: '9eaf41fd-4f3f-4fdb-b8ca-de84eeaed407',
    selector: 'recorder1', // required to use the `isUploading` method
  });

  console.log("Is user uploading a video?", recorder.isUploading()) // false

  setTimeout(function ( ) {
    console.log("Is user uploading a video?", recorder.isUploading()) // true if user started uploading
  }, 30000)
</script>

Limitations

What you should know before implementating the recorder interface:

We strongly advice you to make sure that the recorder interface is not smaller then 244 pixels wide, in all cases (even on mobile phones).
The recorder is fully responsive and automatically fills up the parent element node. If you do not want this, please use a maxWidth setting.
Caution: if the parentNode element of the recorder is a table node, this table needs to have a minimum width. Otherwise, it's not possible to record a video using the webcam.

** Responsive by design**

The recorder application interface will always keep a 16:9 aspect ratio. By default the recorder.js interface will always fill up its parent element. Besides the recorder interface is fully responsive.

Browser support

Flipbase is supported in the browsers listed below.

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

IE7 +
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​

Multiple recorders on a single page​

Check if upload is in progress​

Limitations​

Browser support​

Supported languages​

Webcam​

Mobile​

Upload​