Integrate the Flipbase recorder

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

Gettings 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 the JavaScript Recorder library  -->
<script src="//app.flipbase.com/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: "your_unique_recorderId"
      });
</script>

The code above will result into this:

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.

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: "your_unique_recorderId"
    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: "your_unique_recorderId"
    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.

Why a minimum width of 244 pixels?! Well, that's because of Flash. The Flash Player will automatically deny all access to the microphone and webcam if the interface is smaller then 244 pixels wide. If the interface is smaller than 244 pixels wide, there is not enough room for the Flash Player to show the access dialogue to the user to accept microphone and webcam access. Therefore Flash will automatically block all access and it is not possible to record a video using the webcam. This access dialogue looks something like this:

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. We differentiate recording functionality using the webcam (which requires Flash) and video upload functionality (which is used on smartphones and tablets, when Flash is not supported). Video upload functionality uses HTML5 and therefore is not supported on older browsers.

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

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+