Integrate the Flipbase recorder

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.

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 library  -->
<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. Runs the published bundle from the CDN — the same bytes you would embed.

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​