Documentation

Embedding your first recorder

Embeding from the Pipe account area

To embed your first recorder on your website follow these 4 steps:

1. Sign in to your Pipe account area and go to the Embed Recorder section
2. In the lower right area you'll find the 1.0 and 2.0 beta embed codes. Copy the preferred one
3. Paste the code in your HTML page and make sure to save or upload the modified page back to your website
4. Refresh the page in your browser on your desktop or mobile device

The Pipe recording client will detect mobile and desktop browsers and load the corresponding video recorder client.

3 types of embed code

You'll find 3 types of embed codes in the embed section of the account area.

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

Adding multiple recorders to the page

One of the new things you can do with our new v2.0 embed code is to add multiple recorders to the HTML page.

v2.0 HTML

To do this with the v2.0 HTML embed code you must simply add multiple <piperecorder...> tags to your HTML page, with unique IDs, one for each recorder you want on the page. You can change the attributes for each recorder to fit your needs.

Here's an example with 3 recorders of different sizes, different recording resolutions and different max recording time:

<link rel="stylesheet" href="//s1.addpipe.com/2.0/pipe.css"/>
<script type="text/javascript" src = "//s1.addpipe.com/2.0/pipe.js"></script>
<piperecorder id="tag-recorder1" pipe-width="640" pipe-height="510" pipe-qualityurl="avq/480p.xml" pipe-accountHash="ACCOUNT_HASH" pipe-eid="1" pipe-showMenu="1" pipe-mrt="60" pipe-sis="0" pipe-asv="0" pipe-mv="1" pipe-st="1" pipe-ssb="1" pipe-dpv="0" pipe-ao="0" pipe-dup="1" pipe-cornerradius="8" pipe-bgCol="0xf6f6f6" pipe-menuCol="0xe9e9e9" pipe-normalCol="0x334455" pipe-overCol="0x556677" pipe-payload='{"userId":"55a95eeb936dd30100e0aff6","jobId":"55a7e6555f1bdc010014d6a1"}'></piperecorder>
<piperecorder id="tag-recorder2" pipe-width="1280" pipe-height="720" pipe-qualityurl="avq/720p.xml" pipe-accountHash="ACCOUNT_HASH" pipe-eid="1" pipe-showMenu="1" pipe-mrt="120" pipe-sis="0" pipe-asv="0" pipe-mv="1" pipe-st="1" pipe-ssb="1" pipe-dpv="0" pipe-ao="0" pipe-dup="1" pipe-cornerradius="8" pipe-bgCol="0xf6f6f6" pipe-menuCol="0xe9e9e9" pipe-normalCol="0x334455" pipe-overCol="0x556677" pipe-payload='{"userId":"55a95eeb936dd30100e0aff6","jobId":"55a7e6555f1bdc010014d6a1"}'></piperecorder>
<piperecorder id="tag-recorder3" pipe-width="320" pipe-height="240" pipe-qualityurl="avq/240p.xml" pipe-accountHash="ACCOUNT_HASH" pipe-eid="1" pipe-showMenu="1" pipe-mrt="180" pipe-sis="0" pipe-asv="0" pipe-mv="1" pipe-st="1" pipe-ssb="1" pipe-dpv="0" pipe-ao="0" pipe-dup="1" pipe-cornerradius="8" pipe-bgCol="0xf6f6f6" pipe-menuCol="0xe9e9e9" pipe-normalCol="0x334455" pipe-overCol="0x556677" pipe-payload='{"userId":"55a95eeb936dd30100e0aff6","jobId":"55a7e6555f1bdc010014d6a1"}'></piperecorder>

You can move the insertion of pipe.js and pipe.css to the bottom of the page (after the <piperecorder...> tags) to avoid the page stopping from rendering until pipe.js and pipe.css are loaded.

After pipe.js and the rest of the page elements load (DOMContentLoaded), pipe.js will automatically replace the 3 tags with 3 recorders (divs with the same id) in the HTML DOM and fire PipeSDK.onRecordersInserted() if present.

Any JS events and control API implementation that relies on PipeSDK.onRecordersInserted() needs to be placed AFTER the code for inserting pipe.js in the page. Otherwise you'll get a Uncaught ReferenceError: PipeSDK is not defined error in the browser console.

v2.0 JavaScript

To add a video recorder to the page using JavaScript just insert pipe.css and pipe.js in the page and use PipeSDK.insert("div-id",config-object) every time you want to insert a recorder.

Here's for example how to insert 3 video recorders in the page. Each will replace a different DIV and have a different size (as specified in the config object).

<div id="custom-id1" ></div>
<div id="custom-id2" ></div>
<div id="custom-id3" ></div>

<link rel="stylesheet" href="//s1.addpipe.com/2.0/pipe.css"/>
<script type="text/javascript" src = "//s1.addpipe.com/2.0/pipe.js"></script>

<script type="text/javascript">
var pipeParams1 = {size: {width:400,height:330}, qualityurl: "avq/300p.xml",accountHash:"ACCOUNT_HASH", eid:1, showMenu:"true", mrt:60,sis:0,asv:1,mv:0, dpv:0, ao:0, dup:0};
var pipeParams2 = {size: {width:640,height:430}, qualityurl: "avq/480p.xml",accountHash:"ACCOUNT_HASH", eid:1, showMenu:"true", mrt:120,sis:0,asv:1,mv:0, dpv:0, ao:0, dup:0};
var pipeParams3 = {size: {width:1280,height:750}, qualityurl: "avq/720p.xml",accountHash:"ACCOUNT_HASH", eid:1, showMenu:"true", mrt:180,sis:0,asv:1,mv:0, dpv:0, ao:0, dup:0};

PipeSDK.insert('custom-id1', pipeParams1, function(myRecorderObject){ });
PipeSDK.insert('custom-id2', pipeParams2, function(myRecorderObject){ });
PipeSDK.insert('custom-id3', pipeParams3, function(myRecorderObject){ });
</script>

You can move the insertion of pipe.js and pipe.css to the bottom of the page to avoid the page stopping from rendering until pipe.js and pipe.css are loaded but any code involving PipeSDK will have to made after the code that inserts pipe.js in the page.

Viewing recordings on your account

Once a recording is made it will show up in your Pipe account area. You can see all the recordings for an environment on your account by clicking on the Recordings tab.

Here's how the list of recordings looks like:

Every recording appears on a table row along with useful information grouped in 7 columns:

Requirements and supported browsers

Changing the recorder size

The space occupied by the recorder client differs between the desktop and mobile recorder client because the technology used is different and thus the UI is different.

Recorder size on desktop devices

The size of the recorder on desktop devices can be changed directly from the embed code or, when generating new embed codes, from our embed panel as shown below.

Changing when generating new embed codes

In your Pipe account area, under the "Embed Recorder" tab, you will find the following panel with the width and height options:

Use the 2 inputs to specify the width and height of the black video area inside the recorder. The values are in pixels.

The height value you specify here does not include the bottom control menu which will add 30px to the height. If you set a 320x240 size for the video area and keep the bottom menu you'll end up with a 320x270 recorder in pages opened on desktop devices.

After you enter your desired size, press the "Generate Embed Code" button to update the preview and the size values in the embed code to the right of the page.

The size of the recorder won't affect the resolution & quality of the videos recorded.

Changing directly in the embed code

If you have a recorder already embedded in your web pages or if you're in the editor and you want to do a quick change you can easily change the size of the recorder on desktop devices.

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

var size = {width:400,height:330};

<piperecorder... pipe-width="400" pipe-height="330" ... >

var pipeParams = {size: {width:320,height:270}, qualityurl: "avq/300p.xml", accountHash:"1edfef4c4967d69b7129ec3ffa534002"};

Recorder size on mobile devices

• Embed Code v1.0
• Embed Code v2.0 via HTML or JS

Colors and rounded corners

Desktop recorder

Pipe's desktop recorder can be customised in terms of size (see above), colors and square/rounded corners. These styling options are available across our HTML5 and Flash recorders regardless of the embed code used (1.0 or 2.0).

Colors & rounded corners

You can change the colors of the desktop recorder to better fit your website design.

These can be changed from your account area for new recorders/embed codes or from the embed code directly.

Changing from the Pipe account area for new embed codes

To change the colors from you account area, you will have to open the design options panel:

From here you will be able to change from top to bottom:

1. the radius of the 4 corners of the recorder
2. the background color shown in the inital screen
3. the bottom menu background color
4. the normal and muse over colors for the text buttons in the initial screen

Once you're done, press the "Generate Embed Code" to see the changes and get the new embed code which includes these changes.

Changing in existing embed codes

For existing embed codes that you have in your website or blog posts you can edit the code directly. Here's what you have to do depending on your embed code version and type:

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

var flashvars = {qualityurl: "avq/300p.xml",accountHash:"1edfef4c4967d69b7129ec3ffa534002", eid:1, showMenu:"false", mrt:120,sis:0,asv:1,mv:0, dpv:0, ao:0, dup:0, cornerradius:40, bgCol:"0xff0000", menuCol:"0xff00e3", normalCol:"0x00ff77", overCol:"0xffda00"};

<piperecorder id="custom-id" pipe-width="400" pipe-height="300" pipe-qualityurl="avq/300p.xml" pipe-accountHash="1edfef4c4967d69b7129ec3ffa534002" pipe-eid="1" pipe-showMenu="false" pipe-mrt="120" pipe-sis="0" pipe-asv="1" pipe-mv="0" pipe-dpv="0" pipe-ao="0" pipe-dup="0" pipe-cornerradius=40 pipe-bgCol="0xff0000" pipe-menuCol="0xff00e3" pipe-normalCol="0x00ff77" pipe-overCol="0xffda00" ></piperecorder>

var pipeParams = {size: {width:400,height:300}, qualityurl: "avq/300p.xml",accountHash:"1edfef4c4967d69b7129ec3ffa534002", eid:1, showMenu:"false", mrt:120,sis:0,asv:1,mv:0, dpv:0, ao:0, dup:0, cornerradius:40, bgCol:"0xff0000", menuCol:"0xff00e3", normalCol:"0x00ff77", overCol:"0xffda00"};

Mobile recorder

Pipe's mobile recorder can be customised in terms of size (see above) and colors.

Since the mobile recorder is made of 1 or 2 HTML buttons you can easily overwrite the CSS classes that apply to those elements.

1.0 embed code

When using the 1.0 embed code the user is presented with 2 buttons. As soon as the user clicks the top button the OS takes over.

Safari on iOS

Chrome on Android

2.0 embed code

When using the 2.0 embed code the user is only presented with one button. As soon as the user clicks the button the OS takes over.

For the CSS classes used byb the 2.0 embed code for the recorder button shown on mobile browsers see below.

Hiding the bottom control menu

You can opt to hide the lower control menu of the desktop recorder. You may want to do this if you decide to control the recorder using the JavaScript Control API. The menu has a height of 30px.

When generating an embed code from the Pipe account area you can hide the menu by unchecking the option shown in the image below:

Here's how the newer HTML5 recorder looks without the bottom menu:

Here's how the legacy Flash recorder looks without the bottom menu:

Limiting the length of recordings

Recordings from desktop devices

Recordings from desktop devices made on the spot using a webcam and/or microphone can be limited in length. Once the length is hit, the recorder stops the recording as if the STOP button had been clicked.

New embed codes

When generating a new embed code from the Pipe account area you can easily change the default length (120 seconds) by editing the Max Recording Time value and pressing the green Generate Embed Code.

The new embed code will create a recorder that will limit the length of the videos recorded on the spot from desktop devices to your specified length.

The value is in seconds.

Existing embed codes

For existing embed codes that you have in your website or blog posts you can edit the code directly. Here's what you have to do depending on your embed code version and type:

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

var flashvars = {qualityurl: "avq/300p.xml",accountHash:"1edfef4c4967d69b7129ec3ffa534002", eid:1, showMenu:"true", mrt:120,sis:0,asv:1,mv:0, dpv:0, ao:0, dup:0};

<piperecorder id="custom-id" pipe-width="400" pipe-height="330" pipe-qualityurl="avq/300p.xml" pipe-accountHash="1edfef4c4967d69b7129ec3ffa534002" pipe-eid="1" pipe-showMenu="true" pipe-mrt="120" pipe-sis="0" pipe-asv="1" pipe-mv="0" pipe-dpv="0" pipe-ao="0" pipe-dup="0" ></piperecorder>

var pipeParams = {size: {width:400,height:330}, qualityurl: "avq/300p.xml",accountHash:"1edfef4c4967d69b7129ec3ffa534002", eid:1, showMenu:"true", mrt:120,sis:0,asv:1,mv:0, dpv:0, ao:0, dup:0};

Recordings from mobile devices

When recording from mobile browsers like Safari on iOS and Chrome on Android we can not control the length of the recorded video. The HTML Media Capture standard we're using relies on the OS capabilities to handle the video recording and it does not have an option to limit the length.

Cut mobile videos to length

However, in Pipe, there is an option to cut mobile videos to the max length specified in the embed code (as shown above in the desktop section) if the video uploaded from mobile is longer.

The option can be found in the environment's settings which can be reached by clicking the cog wheel on the right side of the top tabbed menu.

When relying on this mechanism you should advise your mobile users that their videos will be cut to length.

You will only be charged for the processed portion of the recording, you will not be charged for the entire length.

Allowing file uploads from desktop

By default, on desktop, users can only record a new video or audio file using their webcam and/or microphone.

You can allow users to upload an existing audio or video file they have on their desktop device by turning on the file upload feature in the embed code.

Once the feature is enabled in the embed code the desktop recorder will show a new option to upload an existing recording:

New embed codes

For new embed codes you can turn on the feature from the Pipe account area. Activate the checkbox highlighted in the image below and press the green Generate Embed Code. Now copy and paste that embed code in your website.

Existing embed codes

For existing embed codes that you have in your website or blog posts you can edit the code directly. Here's what you have to do depending on your embed code version and type:

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

<piperecorder id="custom-id" pipe-width="400" pipe-height="330" pipe-qualityurl="avq/300p.xml" pipe-accountHash="1edfef4c4967d69b7129ec3ffa534002" pipe-eid="1" pipe-showMenu="true" pipe-mrt="120" pipe-sis="0" pipe-asv="1" pipe-mv="0" pipe-dpv="0" pipe-ao="0" pipe-dup="1" ></piperecorder>

var pipeParams = {size: {width:400,height:330}, qualityurl: "avq/300p.xml",accountHash:"1edfef4c4967d69b7129ec3ffa534002", eid:1, showMenu:"true", mrt:120, sis:0, asv:1, mv:0, dpv:0, ao:0, dup:1};

Supported file types (containers)

We’re currently allowing users to upload the following video & audio file types:

When audio only is turned ON (ao:1) users will only be allowed to upload audio files.

This feature is currently in beta.

Audio and video quality

With Pipe you have strong control over the quality of the videos recorded on desktop devices while on mobile devices the quality depends 100% on the device.

Picture quality on desktop devices

On desktop computers the picture quality depends on the audio/video quality profile you selected for your embed code but also on the quality of the webcam (affects resolution and fps) and light available in the room (low light results in lower fps).

Pipe offers 4 predefined quality profiles:

• 240p : 320x240px @ 30 FPS
• 300p : 400x300px @ 30 FPS (default)
• 480p : 640x480px @ 30 FPS
• 720p : 1280x720px @ 30 FPS (HD)

To use one of the predefined quality profiles (240p, 300p, 480p and 720p) just select it when generating the embed code in the Pipe account area:

The 720p (HD) video quality profile is only available with trial and PRO accounts

If you'd like more control over the resolution (like for example if you want to record square videos) you can also create and use your own quality profiles. See using your own quality profiles for more information.

The resolution is not affected by the recorder size in the HTML page. You can have a 640x480 recorder embedded on your page that records videos at 1280x720 resolution.

On desktop, all videos (from both the HTML 5 recorder and the legacy Flash recorder) are converted by Pipe to 30 FPS.

Audio quality on desktop devices

The legacy Flash recorder will record mono Nellymoser ASAO audio at 44.1 kHz.

The newer HTML5 recorder will record mono or stereo Opus audio at 48 kHz. Stereo audio will only be recorded from capable devices (Logitech C920, Logitech C925e, MacBook PRO with 3 mics, etc) on newer browsers (Chrome 63+ and Firefox 55+). Chrome and Firefox will also apply noise suppression, audio echo cancellation and auto gain filters.

Both ASAO and Opus audio will be converted by Pipe to AAC for the final .mp4 file.

Picture quality on mobile devices

The picture quality and resolution for recordings made with a mobile device depend on the device capabilities and the video recording settings on the device.

For example, from iOS, a user could upload videos in various resolutions, depending on how that video is recorded:

• If, when prompted,the user records a new video, that video will be recorded at 360x480 (portrait) and 480x360 (landscape) at 30 FPS
• If, when prompted, the user chooses an existing video, that video will be compressed by iOS in terms of bitrate (the resolution and FPS will remain the same)

High framerate videos (60 FPS) from mobile devices will keep their FPS value after being processed by Pipe.

When uploading slow motion videos (120 FPS videos played back at 30 FPS), in some cases (iOS, Lenovo Vibe P2 with Android 7.0) the OS compresses the video down to 30 FPS while keeping the slow motion effect, in others (Huawei P20 Lite with Android 8.0) the original FPS value (120) is untouched.

Audio quality on mobile devices

When uploading a video from mobile devices the audio codec and sample rate will depend on the device itself and the OS. We've mostly seen AAC audio at 48kHz but ocasionally we do get AMR audio in 3GP container and other exotic audio codecs and containers.

Non AAC audio will be converted by Pipe to AAC for the final .mp4 file.

Using your own quality profiles

Pipe allows you to use your own quality profile (XML file hosted on your website) by linking directly to it, in the embed code, using the qualityurl parameter. This ability comes in handy if for example you want to record square videos from desktop devices.

Step 1: create your own quality profile file and host it

Here are the 4 quality profiles available through the Pipe account area: 240p, 300p, 480p and 720p. Download one, make your changes and upload it to your website.

Here's what you can change and what recorder it will affect:

• Flash desktop recorder:
  • bytes/second
  • picture quality
  • fps and kfps
  • width and height
• HTML5 desktop recorder:
  • width and height

Step 2: link to the new .xml file in your Pipe embed

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

Step 3: allow Pipe to load the .xml file from your website

In order for Pipe to be able to load your custom .xml video quality profile, you will need to do the following:

1. Create a crossdomain.xml policy file (necessary for the Flash client) and put it in the root of your website. Here is the cross domain policy file that allows Pipe to load video quality profiles from your website:

   <cross-domain-policy>
   <allow-access-from domain="*.addpipe.com"/>
   </cross-domain-policy>

   Put the code above in a text file named crossdomain.xml. It should be acessible at http://yourwebsite.com/crossdomain.xml.
2. Enable CORS on the server on which you are hosting the custom .xml video quality profile (necessary for the HTML5 client). For example on Apache, one of the most commonly used webservers, to add the CORS authorization to the header you must simply add the following line in either the Directory, Location, Files or VirtualHost sections of your server config (usually located in a *.conf file, such as httpd.conf or apache.conf), or within a .htaccess file:

   Header set Access-Control-Allow-Origin "https://s1.addpipe.com"

   or if you are using the CDN

   Header set Access-Control-Allow-Origin "https://cdn.addpipe.com"

   Also make sure you are using the same protocol depending if your site has SSL enabled or not.
   
   For more details on how to configure CORS on other servers see https://enable-cors.org/server.html

CSS classes in the v2 embed code

Our newer 2.0 embed code uses this CSS file to control the look and feel of the HTML5 recorder and Mobile recorder. Overwriting the CSS classed below will have no effect on our legacy Flash recorder which is used on Safari, IE and Edge.

We use classes instead of ids to target HTML UI elements because the 2.0 embed code allows for multiple recorders on the same page. All the recorders on a page will have these CSS classes applied to them.

These are the most important CSS classes:

How to override the CSS classes

To override the classes you can simply add !important to your own implementation of the CSS class, for example let's take the following Pipe CSS class:

.pipeRecordRTC span{
    position:absolute;
    margin: 0;
    left:50%;
    top:50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-family:sans-serif;
    font-size:18px;
    cursor: pointer;
}

Let's say you wish to make the text a little bit smaller, just 15px. To do this you simply re-declare the CSS class in your custom CSS file that you already probably have and just add the font-size:12px !important; property:

.pipeRecordRTC span{
    font-size:15px !important;
}

That's it. Now the text in the initial record screen will have a smaller font size.

Working directly with the embed code

You can change most of the recorder settings directly in your embed code. Size, quality, colors, the maximum recording time, payload data and more can all be changed by editing the embed code.

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

PipeSDK.insert('my_ID', parametersObject, function(recorderObject){
    //custom code goes here
}

Pipe in different languages

The Pipe recording clients default to English, supports 3 other languages and can also use custom wording or a different language by using an external language file hosted by you.

The Pipe client supports the following languages: English (default), French, German and Spanish.

Desktop

The Pipe desktop client auto-detects the preferred language setting of the browser in which it is run (using HTTP Accept Language Headers) and will use that language if available.

Mobile

The Pipe mobile client auto-detects the preferred language setting of the mobile OS in which it is run (using HTTP Accept Language Headers) and will use that language if available.

Using your own language file

HTML5 and Flash clients compared

Troubleshooting connection issues

Screen Recording

Record audio only

How to enable it

From the UI

You can easily enable Pipe to record audio only:

1. Sign into your account
2. Go to the Embed Recorder page
3. On the left in the Options panel check Record audio only
4. Click Generate Embed Code
5. Copy and paste the newly generated code in your website

From code

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

Alternatively you can also add the new parameter ao and set it to 1 in your existing embed code like so:

Add the pipe-ao="1" attribute to the piperecorder tag

Add the ao property to your custom javascript object like so ao:1. Your custom object will be passed as a parameter to PipeSDK.insert()

How it looks

Once audio only recording is enabled the recorder will look as follows:

On Desktop

On Mobile

Support

On Desktop

Both the HTML 5 and Flash recorders support audio only recording.

On Mobile Android Devices

Recording just audio from Android devices is supported.

On Mobile iOS Devices

It is not possible to record just audio from iOS devices at this time because Safari on iOS does not support audio capture through the HTML Media Capture standard. When asked to record only audio it will give the user the (wrong) option to record a video or take a picture. The latest we've tested is iOS 11.1 .

By looking at our (video recording) data for September 2017 we determined only 0.4% of all recordings were recorded from iOS, the rest were recorded from Android (9.6%) and from desktop devices (90%).

Audio Recording Quality

On Desktop

• The Flash client will record audio using Nellymoser ASAO codec at 44.1 kHz in a .flv container. This is converted to AAC at 44.1 kHz in an .mp4 file.
• The HTML5 client will record audio using Opus codec at 48 kHz in a .webm container. We convert it to AAC at 48 kHz in an .mp4 file.

On Mobile

When recording audio from mobile devices a wide range of containers and audio codecs will be used depending on the device and Android version. As of now the following codecs and containers are supported.

Container	Audio Codec
mp3	mp3
m4a	aac
3gp	amr-nb
3gpp	amr-nb
3gpp2	amr-nb
aac	aac

All of them are converted to .mp4 files with AAC while keeping the original sampling frequency.

Pushing recordings to Pipe's S3 storage

By default Pipe will push the resulting .mp4 file and its associated snapshot (in case of video recordings) to our Amazon S3 buckets. Depending on the region setting (US, EU, auto) for the environment you're recording with the recording and its snapshot will be pushed to one of 2 buckets:

• EU (Frankfurt, eu1-addpipe.s3.eu-central-1.amazonaws.com)
• US (N. California, s3-us-west-1.amazonaws.com)

Not storing recordings on Pipe's S3 storage

Pipe gives you to the option to not store your recordings on the Pipe storage. This option is available independently for each environment and you can find it in the environment settings.

If you activate this option, Pipe will delete the original recording, the final .mp4 recording and the snapshot from our US/EU transcoding server as soon as the .mp4 recording and .jpg snapshot are pushed to all your configured storage options ((S)FTP, S3, Dropbox).

This affects only the videos recorded after the setting is on. Prior recordings won't be removed.

If you have more than one storage option configured and one of them fails, the files will be kept and another attempt to push the files to the failed storage option will be made every 2 minutes for 3 days. Once the push to all configured storage options succeeds the files will be removed from our US/EU transcoding server.

CORS headers

Both buckets we use to store recordings have CORS enabled meaning if in your GET requets you send the Origin header the S3 bucket will reply with the actual recording together with the following headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000

Here's how the request/response CORS headers look in Postman

These CORS headers come in handy if for example you want to load a video in the browser and apply effects to it using Seriously.js.

Pushing recordings to FTP/SFTP

Configuring

Videos can be pushed to any server using FTP or SFTP after conversion. You will just need the host address and a user with writing permissions.

To set this up, just fill in the form in the "SFTP or FTP" page with the required credentials and you're good to go.

(S)FTP Logs

In this page you will also find the latest 100 attempts to push to the FTP account you povided.

FTP Upload Status Types

SFTP Upload Status Types

Pushing recordings to Amazon S3

After conversion, the final .mp4 videos can be pushed to your own Amazon S3 bucket for storage and delivery. You'll need an S3 bucket and security credentials.

Creating an Amazon S3 bucket

The 1st thing you need is an S3 bucket so let's create one:

1. First of all, create an Amazon S3 account. Go to aws.amazon.com/s3/ and press the "Sign in to the Console" button:
2. After you log in click the "Create Bucket" button:
3. Type in the bucket name and select the region and press the "Create" button:

Obtaining the security credentials

The converted mp4 files can be uploaded to an Amazon S3 bucket after the recording is uploaded and converted. Setting this up will require the following information:

• Access Key ID
• Secret Access Key
• S3 Bucket Name
• S3 Bucket Region

To obtain these informations, log into your Amazon AWS account.

Then go to Security Credentials in the top right menu under your name.

Press Access Keys (Access Key ID and Secret Access Key)

Click on the button

then press the link.

Your access keys will show

Configuring Pipe to push to your bucket using your credentials

After you get all the required information, go to the Amazon S3 tab in your Pipe account and paste all the info in the form.

After you click Save all new videos will be pushed to your S3 bucket.

Be advised: We are using S3 with ACL uploading, so if you are using Amazon's IAM system and you've created a costum policy for your Amazon user that is doing the upload to S3 and you are using a public Canned ACL, add the following permission/action for it: s3:PutObjectAcl. All policies require the s3:PutObject permission, regardless of the type of Canned ACL that you selected.

S3 Logs

The log containing information about the latest 100 attempts to push the converted files to the S3 bucket will show the following:

S3 Upload Status Types

Pushing recordings to Dropbox

After conversion, the final .mp4 videos can be pushed to your own Dropbox folder for storage. You'll need a Dropbox account and access token.

Creating your Dropbox application

The 1st thing you need is a Dropbox app so let's create one:

1. First of all, sign in to your Dropbox account at dropbox.com
.
2. After you log in, go to the Developer Page and click [Create App] in the top right corner under your name:
3. In the next page:
   • select Dropbox API
   • select App folder access
   • Name your app and click [Create App]

Obtaining the Dropbox access token

The converted mp4 files can be uploaded to your Dropbox folder after the recording is uploaded and converted. Setting this up will require the following information:

• Dropbox Access token
• Dropbox Folder name

After the app is created you will be redirected to the app settings page. Scroll down a bit and in the OAuth 2 section
click [Generate] for the access token.

Configuring Pipe to push to your Dropbox folder using your credentials

After you get the acces token, go to the Dropbox tab in your Pipe account and paste it in the form.

For the Dropbox Folder, you can choose any name you wish. The videos and snapshots will be pushed to /Apps/your app name/folder name .

After you click [Save Dropbox Credentials] all new videos will be pushed to your Dropbox folder.

Dropbox Logs

The log containing information about the latest 100 attempts to push the converted files to the Dropox folder will show the following:

Dropbox Upload Status Types

Setting up webhooks

Webhooks can be used to get notified whenever a new recording is made using an embedded recorder registered with your account. Multiple webhooks can be set per account.

Setting up the link

Go to your account and click on the Webhooks tab.
To add a new webhook simply click on the Create New Webhook button. You will be taken to the webhook setup page:

Webhook types

There are 6 types of webhooks that can be sent:

1. video_recorded: sent each time a recording is made.
2. video_converted: sent each time a recording is converted.
3. video_copied_pipe_s3: sent each time a recording is stored to the Pipe S3 storage.
4. video_copied_ftp: sent each time a recording is copied to (S)FTP.
5. video_copied_s3: sent each time a recording is copied to your Amazon S3.
6. video_copied_dbox sent each time a recording is copied to Dropbox.

Data sent

With every webhook event a variable named payload will be POSTed to the specified URL with the application/x-www-form-urlencoded content type. The value of the payload variable will be specific for each event as follows:

• video_recorded
• video_converted
• video_copied_pipe_s3
• video_copied_ftp
• video_copied_s3
• video_copied_dbox

payload={
	"version":"1.0",
	"event":"video_recorded",
	"data":{
		"videoName":"vs1457013120534_862",
		"audioCodec":"NellyMoser ASAO",
		"videoCodec":"H.264",
		"type":"FLV",
		"id":"123",
		"dateTime":"2016-03-03 15:51:44",
		"timeZone":"Europe/Bucharest",
		"payload":"your payload data string",
		"httpReferer":"http://site_from_where_video_was_recorded.com",
		"cam_name":"Logitech HD Pro Webcam C920 (046d:082d)",
		"mic_name":"Default",
		"ip":"91.16.93.181",
		"ua":"Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Mobile Safari/537.36"
	}
}

payload={
	"version":"1.0",
	"event":"video_converted",
	"data":{
		"videoName":"vs1457013120534_862",	
		"duration":7,
		"audioCodec":"AAC",
		"videoCodec":"H.264",
		"type":"MP4",
		"size":194373,
		"width":320,
		"height":240,
		"orientation":"landscape",
		"id":"0",
		"dateTime": "2015-10-10 16:00:36",
		"timeZone":"Europe/Bucharest",
		"payload":"your payload data string"
	}
}

payload={
	"version":"1.0",
	"event":"video_copied_pipe_s3",
	"data":{
	    "storedStatus":"stored successful",
		"videoName":"video name here",	
		"size":194373,
		"checksum_md5": "md5 file hash",
		"checksum_sha1": "sha1 file hash",
		"id":"0",
		"url":"https://addpipevideos.s3.amazonaws.com/b8e2f5bfd04a93b434bd8c740bff744d/vid.mp4",
		"snapshotUrl":"https://addpipevideos.s3.amazonaws.com/b8e2f5bfd04a93b434bd8c740bff744d/vid.jpg",
		"bucket":"Pipe bucket name",
		"region": "Pipe bucket region",
		"payload":"your payload data string",
	}
}

payload={
	"version":"1.0",
	"event":"video_copied_ftp",
	"data":{
		"ftpUploadStatus":"upload success",
		"videoName":"vs1457013120534_862",
		"type":"MP4",
		"size":493534,
		"id":"123",
		"payload":"your payload data string"
	}
}

payload={
	"version":"1.0",
	"event":"video_copied_s3",
	"data":{
		"s3UploadStatus":"upload success",
		"videoName":"vs1457013120534_862",
		"type":"MP4",
		"size":493534,
		"id":"123",
		"url":"https://bucketname.s3.amazonaws.com/vs1457013120534_862.mp4",
		"snapshotUrl":"https://bucketname.s3.amazonaws.com/vs1457013120534_862.jpg",
		"bucket":"bucketname",
		"region":"us-east-1",
		"acl":"public-read",
		"payload":"your payload data string"
	}
}

payload={
	"version":"1.0",
	"event":"video_copied_dbox",
	"data":{
		"dboxUploadStatus":"upload success",
		"videoName":"vs1457013120534_862",
		"type":"MP4",
		"size":493534,
		"id":"123",
		"payload":"your payload data string"
	}
}

Handling the data

The data is URL encoded in transit. This means that depending on the specific function of the programming language you are using, you will either be working with the raw URL encoded data or the URL decoded data.

Some examples:

In PHP if you are using php://input for receiving the data you will be working with the raw URL encoded data, but if you are using $_POST["payload"] for receiving the data, it will automatically be URL decoded.

In .NET Request.InputStream will receive the raw URL encoded data while Request.Form["payload"] will automatically URL decode the data.

In Ruby on Rails request.raw_post will receive the raw URL encoded data while params["payload"] will automatically URL decode the data

Here's an example of the video_recorded event data being received in the two possible ways.

payload%7B%22version%22%3A%221.0%22%2C%22event
%22%3A%22video_recorded%22%2C%22data%22%3A%7B%22
videoName%22%3A%22vs1457013120534_862
%22%2C%22audioCodec%22%3A%22NellyMoser%20ASAO
%22%2C%22videoCodec%22%3A%22H.264%22%2C%22
type%22%3A%22FLV%22%2C%22orientation%22%3A%22
landscape%22%2C%22id%22%3A%22123%22%2C%22d
ateTime%22%3A%222016-03-03%2015%3A51%3A44%22%2C%22
timeZone%22%3A%22Europe%2FBucharest%22%2C%22
payload%22%3A%22your%20payload%20data%20string%22%2C%22
httpReferer%22%3A%22http%3A%2F%2F
your_site.com%22%7D%7D

{
	"version":"1.0",
	"event":"video_recorded",
	"data":{
		"videoName":"vs1457013120534_862",
		"audioCodec":"NellyMoser ASAO",
		"videoCodec":"H.264",
		"type":"FLV",
		"orientation":"landscape",
		"id":"123",
		"dateTime":"2016-03-03 15:51:44",
		"timeZone":"Europe/Bucharest",
		"payload":"your payload data string",
		"httpReferer":"http://your_site.com"
	}
}

Every parameter explained

Let's talk about the information sent by these webhooks

version contains the current version of the Pipe's webhook API.

event contains the name of the event that triggered this call

videoName contains the name of the recording

duration contains the duration in seconds with two decimals

audioCodec contains the audio codec used in the original video (video_recorded) or in the final video (video_converted)

videoCodec contains the video codec used in the original video (video_recorded) or in the final video (video_converted). It is not sent for an audio only recording.

type is the original's recording file type. This can give you a clue on where this recording is coming from. For example, an iPhone will produce .mov files while the Flash desktop recorder will produce .flv files and the HTML5 recorder will produce .webm files.

size is the size in bytes

checksum_md5 contains the 32 characters md5 hash checksum of the final recording file

checksum_sha1 contains the 40 characters md5 hash checksum of the final recording file

width and height represents the size of the original recording. This can also give you a clue about the device the recording is coming from. These are not sent for an audio only recording.

orientation represents the orientation of the device when the recording was made. This could be either "landscape" or "potrait". This is not sent for an audio only recording.

id is the ID of the recording as you will find it in your Pipe account area and as it is stored in our database.

dateTime is the date and time relative to your set timezone at which the recording has been inserted in the db (video_recorded) or has finished converting (video_converted).

timeZone represents your selected time zone in the account settings.

url

• For thevideo_copied_pipe_s3 event, it is the full path to where the recording is located on our S3 storage.
• For thevideo_copied_s3 event, it is the full path to where the recording is located on your S3 bucket.

snapshotUrl

• For thevideo_copied_pipe_s3 event, it is the full path to where the snapshot is located on our S3 storage. This is not sent for an audio only recording.
• For thevideo_copied_s3 event, it is the full path to where the snapshot is located on your S3 bucket. This is not sent for an audio only recording.

payload is the payload data in string format that can be set initially in the embed code of Pipe. Find out more at: Sending custom data using payload.

ftpUploadStatus is the status of the (S)FTP upload.

s3UploadStatus is the status of the S3 upload.

bucketname is the name of the S3 bucket.

region is the server region of the S3 bucket.

acl is the Amazon S3 Access Control Lists type.

dboxUploadStatus is the status of the Dropbox upload.

httpReferer is the link to the site from which the recording was made.

Logs

The Webhook log will show the latest 100 requests to send data via Webhook.

The following information is available in this table:

Authenticating webhooks

Pipe automatically signs the webhook requests so you can (optionally) verify that the requests are coming from Pipe and not a third-party. This is usefull if your application exposes sensitive data, but it is not required. It just adds an additional layer of protection.

Pipe adds an additional HTTP header with the webhook POST requests, X-Pipe-Signature, which contains the specific signature for the request. To verify this request, you will need to generate a signature using the same key that Pipe uses (the one in your account webhook tab) and compare the value obtained with the value sent via header.

Getting your webhook authentication key

In the webhook tab of your account, a key is automatically generated. You can use this one or reset it to generate a new one at any time. Pipe will automatically use the newest one.

Generating your own signature for comparison

In the code that receives and processes the webhook request:

1. Create a string of the webhook's URL, exactly as your entered it in Pipe. Pipe will always sign the webhook requests with the exact URL, so any small difference will prevent the signature from validating.
2. Append the JSON POST data received via webhook to the URL string.
3. Hash the resulting string with HMAC-SHA1, using the webhook authentication key from your account and generate a binary signature. Pipe uses binary signatures so be careful not to generate a hexadecimal signature.
4. Base64 encode the binary signature.
5. Compare the generated signature with the one provided by X-Pipe-Signature HTTP header.

Example of a PHP implementation of the steps above

  /**
  * Generates a base64-encoded signature for a Pipe webhook request.
  * @param string $webhook_key the webhook's authentication key
  * @param string $url the webhook url
  * @param array $jsonData the data in JSON format received via $_POST["payload"].
  */
  function generateSignature($webhook_key, $url,  $jsonData){

  $signed_data = $url;
  $signed_data .= $jsonData;

  return base64_encode(hash_hmac('sha1', $signed_data, $webhook_key, true));
  }
          

Handling webhook data on the server side

Handling webhook data is very simple, here's an example in PHP:

//we get the payload data from the POST 
$payload = $_POST["payload"];

//the data is JSON encoded, so we must decode it in an associative array
$webhookData = json_decode($payload, true);

//you can get the webhook type by accessing the event element in the array
$type = $webhookData["event"];

//if you wish to get the name of the video you simply access it like this
$vidName = $webhookData["data"]["videoName"]

Decoding the JSON data of the video_converted webhook, like in the example above, will make it easily accesible in an associative array similar to the one shown here:

Array
(
    [version] => 1.0
    [event] => video_converted
    [data] => Array
        (
            [videoName] => vsrtc1501002174_491
            [duration] => 3.48
            [audioCodec] => AAC
            [videoCodec] => H.264
            [type] => MP4
            [size] => 442101
            [width] => 1280
            [height] => 720
            [orientation] => landscape
            [id] => 451464
            [dateTime] => 2017-07-25 20:03:05
            [timeZone] => Europe/Bucharest
            [payload] => {"userId":"55a95eeb936dd30100e0aff6","jobId":"55a7e6555f1bdc010014d6a1", "email":"asdasd@adasdae.com", "link":"https://www.amazon.com/D-G-P-4-W/dp/ref=as_li_ss_tl?ie=UTF8"}
        )

)

Custom data in webhooks

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via JavaScript

var flashvars = {qualityurl: "avq/240p.xml",accountHash:"your_account_hash",showMenu:"true", mrt:120};

var flashvars = {qualityurl: "avq/240p.xml",accountHash:"your_account_hash",showMenu:"true", mrt:120, payload:"your_payload_data_string"};

<piperecorder id="test-div" pipe-width="640" pipe-height="510" pipe-qualityurl="avq/480p.xml" pipe-accountHash="your_account_hash" pipe-eid="1" pipe-showMenu="1" pipe-mrt="120"></piperecorder>

<piperecorder id="test-div" pipe-width="640" pipe-height="510" pipe-qualityurl="avq/480p.xml" pipe-accountHash="your_account_hash" pipe-eid="1" pipe-showMenu="1" pipe-mrt="120" pipe-payload="your_payload_data_string" ></piperecorder>

var YOUR_CUSTOM_OBJECT_NAME = {qualityurl: "avq/240p.xml",accountHash:"your_account_hash",showMenu:1, mrt:120};

var YOUR_CUSTOM_OBJECT_NAME = {qualityurl: "avq/240p.xml",accountHash:"your_account_hash",showMenu:1, mrt:120, payload:"your_payload_data_string"};

Sending custom data in JSON format

The payload property can be used to send JSON as well. You have two formating options in order to send the JSON correctly:

• enclose the JSON in quotes and write the JSON normally: payload:'{"a":"b"}'
• enclose the JSON in double quotes and escape the double quotes from inside the JSON payload:"{\"a\":\"b\"}"

Retrieving the data

The payload data you've sent will be sent back to you with all the webhooks associated with the recording as the value of the payload name/value pair from the data object.

{
	"version":"1.0",
	"event":"video_converted",
	"data":{
		"videoName":"recording name here",
		"duration":"7.56",
		"audioCodec":"AAC",
		"videoCodec":"H.264",
		"type":"MP4",
		"size":194373,
		"width":320,
		"height":240,
		"orientation":"landscape",
		"id":"123",
		"dateTime": "2015-10-10 16:00:36",
		"timeZone":"Europe/Bucharest",
		"payload":"your_payload_data_string"
	}
}

JavaScript Control API (Desktop)

The JavaScript Control API allows you to control Pipe's desktop recording clients using JavaScript.

With it you can for example create your own UI by hiding the lower menu of the desktop Pipe recorder and control the recording process through the JS Control API using your own buttons.

• Embed Code v1.0
• Embed Code v2.0 via HTML
• Embed Code v2.0 via Javascript

<input type="button" class="btn" value="Record" id="recordbtn" />
<script>
//wait for onRecorderReady before attaching the click event to the button above
function onRecorderReady(recorderId,recorderType){
 document.getElementById("recordbtn").onclick = function (){
      document.VideoRecorder.record();
 }
}
</script>

<input type="button" class="btn" value="Record" id="recordbtn" />
<script>
PipeSDK.onRecordersInserted = function(){	
    myRecorder =  PipeSDK.getRecorderById('UNIQUE_ID_OF_THE_PIPERECORDER_TAG');
    myRecorder.onReadyToRecord(id, type){
    	document.getElementById("recordbtn").onclick = function (){
    		myRecorder.record();
    	}
    }
}
</script>

<input type="button" class="btn" value="Record" id="recordbtn" />
<script>
PipeSDK.insert('UNIQUE_ID_OF_THE_REPLACED_DIV', paramsObject, function(myRecorderObject){
    myRecorderObject.onReadyToRecord(id, type){
        document.getElementById("recordbtn").onclick = function (){
            myRecorderObject.record();
        }
    }
}
</script>

JavaScript Events API (Desktop)

Every time something happens with the desktop recorder (a button is pressed, the connection succeeds, etc.), the recorder will execute a specific JavaScript function with information about the event.

You can add these event functions to your HTML/JS app and extend them with your own code to do your bidding.

Here are some of the things you can do by extending these event functions:

• show a message, a warning or a timer in the HTML page
• activate an input field or button in the HTML page
• redirect the user to another page

• Embed Code v1.0
• Embed Code v2.0 HTML & JavaScript

When using the v1 embed code you can just add these JS event functions to your HTML page. The Pipe recorder client will detect their presence and execute them when needed.

Try adding the code below immediately after your v1 Pipe recorder embed code:

<script>
function onRecorderInit(recorderId){
    var args = Array.prototype.slice.call(arguments);
    alert("onRecorderInit("+args.join(', ')+")");
}
</script>

An alert will pop up in your web page whenever the Pipe recording client finishes initializing. You can replace onRecorderInit(recorderId) with any of the event functions below.

On desktop there are 2 different set of events and corresponding event functions:

• Event functions executed when recording a new video from desktop
• Event functions executed when uploading an existing file from desktop

Event functions executed when recording a new video from desktop

This is the list of JavaScript event functions the Pipe client will execute when the user is recording from a desktop device using his webcam or microphone.

onRecorderInit(recorderId);

Description: Triggers after the initial [Record Video] or [Record Audio] screen is drawn.

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function onRecorderInit(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("onRecorderInit("+args.join(', ')+")");
}

onRecorderReady(recorderId, recorderType);

Description: The Pipe recorder is ready to start recording videos (the interface has been built, you have allowed access to your webcam and you can see yourself in the browser)

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code
recorderType - a string representing the type of the recorder (flash or HTML5).

Example 1: show a browser alert when onRecorderReady is executed

<script>
function onRecorderReady(recorderId, recorderType){
    var args = Array.prototype.slice.call(arguments);
    alert("onRecorderReady("+args.join(', ')+")");
}
</script>

Example 2: wait for onRecorderReady before allowing a HTML button to trigger the recording process

<input type="button" class="btn" value="Record" id="recordbtn" />
<script>
//wait for onRecorderReady before adding the onclick event to the button above
function onRecorderReady(recorderId,recorderType){
 console.log("onRecorderReady executed")
 //when the button is clicked
 document.getElementById("recordbtn").onclick = function (){
      //trigger the recording process
      document.VideoRecorder.record();
 }
}
</script>

userHasCamMic(cam_number,mic_number, recorderId);

Description: Pipe detects the number of cams and mics a user has

Passed Parameters:
cam_number - number of web cam drivers the user has installed on his computer
mic_number - number of sound card and sound sources the user has installed on his computer
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function userHasCamMic(cam_number,mic_number, recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("userHasCamMic("+args.join(', ')+")");
}

btRecordPressed(recorderId);

Description: RECORD button is pressed

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function btRecordPressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("btRecordPressed("+args.join(', ')+")");
}

btStopRecordingPressed(recorderId);

Description: STOP RECORD button is pressed

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function btStopRecordingPressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("btStopRecordingPressed("+args.join(', ')+")");
}

btPlayPressed(recorderId);

Description: PLAY button is pressed

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function btPlayPressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("btPlayPressed("+args.join(', ')+")");
}

btPausePressed(recorderId);

Description: PAUSE button is pressed

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function btPausePressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("btPausePressed("+args.join(', ')+")");
}

onUploadDone(streamName, streamDuration, userId, recorderId, audioCodec, videoCodec, fileType, audioOnly, location);

Description: Recorded data finishes streaming/uploading to the media server

Passed Parameters:
streamName - a string representing the name of the stream WITHOUT the file extension
streamDuration - the duration of the recording/audio file in seconds but accurate to the millisecond (like this: 4.322)
userId - the userId sent via flash vars
recorderId - value of recorderId property of flashvars object in the embed code
audioCodec - the audio codec used for the recording
videoCodec - the video codec used for the recording
fileType - the initial file extension for the recording: flv or webm
audioOnly - true if it is an audio only recording, false otherwise
location - the subdomain of the Amazon S3 region where the final video and snapshot will be stored by Pipe, for example addpipevideos.s3.amazonaws.com. The final video will be stored at https://addpipevideos.s3.amazonaws.com/ACCOUNT_HASH/FILE_NAME.mp4. The snapshot will be at the same location but with the .jpg extension. If Do Not Store Files is turned on the final video will not be stored in this location.

Example:

function onUploadDone(streamName, streamDuration, userId, recorderId, audioCodec, videoCodec, fileType, audioOnly,location){
	var args = Array.prototype.slice.call(arguments);
	alert("onUploadDone("+args.join(', ')+")");
}

onCamAccess(allowed, recorderId);

Description:

onCamAccess is triggered:

1. when clicking the Allow or Deny radio buttons in Flash Player's camera/microphone Privacy panel. The Privacy panel will be brought up by the Pipe recorder but it can also be manually brought up by the user by right clicking on the Pipe client - your code should cope with onCamAccess being called at any time during Pipe client's lifetime. The function is triggered even if the user clicks the selected/active radio button.
2. automatically if the [ ] Remember checkbox was previously selected in Flash Player's Privacy panel

Flash Player's Privacy Panel when presented by the Pipe recorder client:

Internet browsers like Chrome will ask again for permission to use the webcam through a separate dialog box:

At the moment there is no way to catch the user's response to Chrome's dialog box.

Chrome pausing Flash animations to save battery life

Chrome will intelligently pause Flash content to save battery life.

This applies to smaller Pipe embeds too.

When Pipe is paused by Chrome, onCamAccess will be called, while the Pipe recorder is apparently paused, if all these 3 conditions are met:

1. skip initial screen is on (sis:1 in the embed code)
2. the user has only 1 webcam and 1 microphone
3. you have previously checked [ ] Remember in FP's Privacy panel

In this scenario onCamAccess will be called, followed by onFlashReady, while the Pipe recorder is apparently paused.

Here's how Pipe looks when it's paused by Chrome:

Use 400x300px size or bigger for Pipe embeds to prevent it from being paused by Chrome.

Passed Parameters:
allowed is true if:

• the user clicked the [Allow] button OR
• clicked [Allow] + [Remember] in a previous session (in which case Flash Player's Privacy dialog box is not shown)

and false if

• the user clicked the [Deny] button OR
• if a user clicked [Deny] + [Remember] in a previous session (in which case Flash Player's Privacy dialog box is not shown)

recorderId - value of recorderId property of flashvars object in the embed code

Example:

function onCamAccess(allowed, recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("onCamAccess("+args.join(', ')+")");
}

onPlaybackComplete(recorderId);

Description: Pipe finishes playback of recording stream

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function onPlaybackComplete(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("onPlaybackComplete("+args.join(', ')+")");
}

onRecordingStarted(recorderId);

Description: the Pipe desktop client started recording

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function onRecordingStarted(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("onRecordingStarted("+args.join(', ')+")");
}

onConnectionClosed(recorderId);

Description: the connection to the media server was disconnected

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function onConnectionClosed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("onConnectionClosed("+args.join(', ')+")");
}

onFPSChange(recorderId,currentFPS);

This function is not triggered by the HTML 5 recorder, only by the Flash one.

Description: called by the Pipe desktop Flash client every second with the current FPS value

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code
currentFPS - the current frames-per-second that the Pipe desktop client reports (during recording, playback, uploading or saving) depending of the state of the Pipe desktop client

Example:

function onFPSChange(recorderId,currentFPS){
	var args = Array.prototype.slice.call(arguments);
	alert("onFPSChange("+args.join(', ')+")");
}

onConnectionStatus(status, recorderId);

Description: Called by the Pipe desktop client for every connection event

Passed Parameters:
status - the actual connection status: (connected, rejected, invalid app, closed, failed)
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function onConnectionStatus(status, recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("onConnectionStatus("+args.join(', ')+")");
}

onMicActivityLevel(recorderId, currentActivityLevel);

Description: the fucntion is called by the Pipe desktop client every 10th of a second (100 miliseconds) with the current microphone level.

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code
currentActivityLevel - The amount of sound the microphone is detecting in numeric values between 0 and 100. From our experience it's hard to get values over 50 though.

Example:

function onMicActivityLevel(recorderId, currentActivityLevel){
	var args = Array.prototype.slice.call(arguments);
	alert("onMicActivityLevel("+args.join(', ')+")");
}

onSaveOk(streamName, streamDuration, userId, cameraName, micName, recorderId, audioCodec, videoCodec, fileType, videoId, audioOnly, location);

Description: The recording data has been fully streamed to our media servers for further processing.

This is not a confirmation that the recorded file is ready for delivery as the recording will take a few seconds to be processed (conversion to .mp4, snapshot extraction, rotation, push to storage location).

Use Pipe's webhooks to be notified when the recording is fully processed and ready for delivery.

Passed Parameters:
streamName - a string representing the name of the stream WITHOUT the file extension
streamDuration - the duration of the recorded video/audio file in seconds but accurate to the millisecond (like this: 4.322)
userId - variable sent via flash vars
cameraName - the name of the webcam driver the user has selected for capturing video data
micName - the name of the sound card/mic driver the user has selected for capturing audio data
recorderId - value of recorderId property of flashvars object in the embed code
audioCodec - the audio codec used for the recording
videoCodec - the video codec used for the recording
fileType - the initial file extension for the recording: flv or webm
videoId - a string representing the recording id in Pipe's database (same recording id that is sent through the webhook)
audioOnly - true if it is an audio only recording, false otherwise
location - the subdomain of the Amazon S3 region where the final video will be stored by Pipe, for example addpipevideos.s3.amazonaws.com. The final video will be stored at https://addpipevideos.s3.amazonaws.com/ACCOUNT_HASH/FILE_NAME.mp4. The snapshot will be at the same location but with the .jpg extension. If Do Not Store Files is turned on the final video will not be stored in this location.

Example:

function onSaveOk(streamName, streamDuration, userId, cameraName, micName, recorderId, audioCodec, videoCodec, fileType, videoId, audioOnly,location){
	var args = Array.prototype.slice.call(arguments);
	alert("onSaveOk("+args.join(', ')+")");
}

onFlashReady(recorderId);

This function is deprecated

Description: onFlashReady(recorderId); is called when the recording UI has been built (after clicking "Record Video or Record Audio" on both the initial screen and on the camera/mic selection screen which shows up if you have more than 1 cam/mic) and Flash is ready to accept calls to the JS Control API from HTML/JS

Chrome pausing Flash animations to save battery life

Chrome will intelligently pause Flash content to save battery life.

This applies to smaller Pipe embeds too.

When Pipe is paused by Chrome, onFlashReady will be called, while the Pipe recorder is apparently paused, if these 2 conditions are met:

1. skip initial screen is on (sis:1 in the embed code)
2. the user has only 1 webcam and 1 microphone

In this scenario onFlashReady will be called while the Pipe recorder is apparently paused.

If the user has also previously checked [ ] Remember in FP's Privacy panel onCamAccess will be called, followed by onFlashReady, while the Pipe recorder is apparently paused.

Here's how Pipe looks when it's paused by Chrome:

Use 400x300px size or bigger for Pipe embeds to prevent it from being paused by Chrome.

Passed Parameters:
recorderId - value of recorderId property of flashvars object in the embed code

Example:

function onFlashReady(recorderId){
	var args = Array.prototype.slice.call(arguments);
	alert("onFlashReady("+args.join(', ')+")");
}

Event functions when uploading an existing file from desktop

Below is the list of JavaScript functions the Pipe client will execute when the user is UPLOADING an existing video from a desktop device. You can turn on the feature from your embed code or from the Pipe account area when generating an embed code, details here.

onDesktopVideoSelected(filename, filetype, audioOnly);

Description: The user has selected a recording from the computer's library and the recording is ready for upload.

Passed Parameters:
filename - the (automatically generated) name of the recording without extension
filetype - the file extension of the uploaded video, it can be mp4, mov, 3gp, m4v, mkv, avi, mp3, wma etc.
audioOnly - true if we're expecting an audio only recording, false otherwise

Example:

function onDesktopVideoSelected(filename,filetype, audioOnly){
	var args = Array.prototype.slice.call(arguments);
	alert("onDesktopVideoSelected("+args.join(', ')+")");
}

onDesktopVideoSubmitted();

Description: Triggered when the recording is auto-submitted.

Passed Parameters: None

Example:

function onDesktopVideoSubmitted(){
	var args = Array.prototype.slice.call(arguments);
	alert("onDesktopVideoSubmitted("+args.join(', ')+")");
}

onDesktopVideoUploadSuccess(filename, filetype, videoId, audioOnly, location);

Description: The recording has finished uploading successfully.

Passed Parameters:
filename - the automatically generated name of the recording
filetype - the file extension of the uploaded video, it can be mp4, mov, 3gp, m4v, mkv, avi, mp3, wma etc.
videoId - a string representing the recording id in Pipe's database (same recording id that is sent through the webhook)
audioOnly - true if it is an audio only recording, false otherwise
location - the subdomain of the Amazon S3 region where the final video will be stored by Pipe, for example addpipevideos.s3.amazonaws.com. The final video will be stored at https://addpipevideos.s3.amazonaws.com/ACCOUNT_HASH/FILE_NAME.mp4. The snapshot will be at the same location but with the .jpg extension. If Do Not Store Files is turned on the final video will not be stored in this location.

Example:

function onDesktopVideoUploadSuccess(filename,filetype,videoId,audioOnly,location){
	var args = Array.prototype.slice.call(arguments);
	alert("onDesktopVideoUploadSuccess("+args.join(', ')+")");
}

onDesktopVideoUploadFailed(error);

Description: There was an error while uploading the recording.

Passed Parameters:
error - The error thrown when the upload failed to complete

Example:

function onDesktopVideoUploadFailed(error){
	var args = Array.prototype.slice.call(arguments);
	alert("onDesktopVideoUploadFailed("+args.join(', ')+")");
}

Since the v2 embed code supports multiple recorders on the same page, to override a recoder's event functions, we need to get the desired recorder object 1st.

Getting the recorder object

This is done differently depending on what version of the embed code you are using.

• v2.0 HTML
• v2.0 JavaScript

When using the v2.0 HTML embed code you can use the PipeSDK.getRecorderById() method to get a reference to a recorder object.

For example:

var myRecorderObject = PipeSDK.getRecorderById('UNIQUE_ID_OF_THE_RECORDER');

will get a reference to the recorder which replaced the <piperecorder...> HTML element with the id UNIQUE_ID_OF_THE_RECORDER.

To make sure all the recorder object/objects have been initialized and they're ready you must execute PipeSDK.getRecorderById() only once the PipeSDK.onRecordersInserted() method fires.

Example: add this JS code to your HTML page to be notified when the user clicks the record button in the desktop recorder:

<script>
PipeSDK.onRecordersInserted = function(){
    myRecorderObject =  PipeSDK.getRecorderById('UNIQUE_ID_OF_THE_RECORDER');  
    myRecorderObject.btRecordPressed = function(id){
        var args = Array.prototype.slice.call(arguments);
        console.log("btRecordPressed("+args.join(', ')+")");
    }
}
</script>

When using the v2.0 JavaScript version of the embed code, the recorder object is retrieved in the callback function of the PipeSDK.insert() method. This is where you can override the event functions.

Example: add this JS code to your app to insert a recorder in the app and get notified via console.log when the user clicks the record button in the desktop recorder:

PipeSDK.insert('UNIQUE_ID_OF_THE_RECORDER', paramsObject, function(myRecorderObject){
    myRecorderObject.btRecordPressed = function(id){
        var args = Array.prototype.slice.call(arguments);
        console.log("btRecordPressed("+args.join(', ')+")");
    }
});

On desktop there are 2 different set of events and corresponding event functions:

• Event functions when recording a new video from desktop
• Event functions when uploading an existing file from desktop

Event functions when recording a new video from desktop

Below is the list of JavaScript event functions that the Pipe client will trigger when the user is recording a video from a desktop device.

onReadyToRecord(recorderId, recorderType)

Description: The Pipe recorder is ready to start recording videos(the interface has been built, you have allowed access to your webcam and you can see yourself in the browser)

Passed Parameters:
recorderId - the recorder id
recorderType - a string representing the type of the recorder (flash or HTML5).

Example:

myRecorderObject.onReadyToRecord = function (recorderId, recorderType) {
    var args = Array.prototype.slice.call(arguments);
    console.log("onReadyToRecord("+args.join(', ')+")");
});

userHasCamMic(recorderId,cam_number,mic_number)

Description: Pipe detects the number of cams and mics a user has

Passed Parameters:
recorderId - the recorder id
cam_number - number of web cam drivers the user has installed on his computer
mic_number - number of sound card and sound sources the user has installed on his computer

Example:

myRecorderObject.userHasCamMic(recorderId,cam_number,mic_number){
	var args = Array.prototype.slice.call(arguments);
	console.log("userHasCamMic("+args.join(', ')+")");
}

btRecordPressed(recorderId)

Description: RECORD button is pressed

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.btRecordPressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("btRecordPressed("+args.join(', ')+")");
}

btStopRecordingPressed(recorderId)

Description: STOP RECORD button is pressed

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.btStopRecordingPressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("btStopRecordingPressed("+args.join(', ')+")");
}

btPlayPressed(recorderId)

Description: PLAY button is pressed

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.btPlayPressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("btPlayPressed("+args.join(', ')+")");
}

btPausePressed(recorderId)

Description: PAUSE button is pressed

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.btPausePressed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("btPausePressed("+args.join(', ')+")");
}

onUploadDone(recorderId, streamName, streamDuration, audioCodec, videoCodec, fileType, audioOnly, location)

Description: Recorded data finishes streaming/uploading to the media server

Passed Parameters:
recorderId - the recorder id
streamName - a string representing the name of the stream WITHOUT the file extension
streamDuration - the duration of the recording/audio file in seconds but accurate to the millisecond (like this: 4.322)
audioCodec - the audio codec used for the recording
videoCodec - the video codec used for the recording
fileType - the initial file extension for the recording: flv or webm
audioOnly - true if it is an audio only recording, false otherwise
location - the subdomain of the Amazon S3 region where the final video and snapshot will be stored by Pipe, for example addpipevideos.s3.amazonaws.com. The final video will be stored at https://addpipevideos.s3.amazonaws.com/ACCOUNT_HASH/FILE_NAME.mp4. The snapshot will be at the same location but with the .jpg extension. If Do Not Store Files is turned on the final video will not be stored in this location.

Example:

myRecorderObject.onUploadDone(recorderId, streamName, streamDuration, audioCodec, videoCodec, fileType, audioOnly, location){
	var args = Array.prototype.slice.call(arguments);
	console.log("onUploadDone("+args.join(', ')+")");
}

onCamAccess(recorderId, allowed)

Description:

onCamAccess is triggered:

1. when clicking the Allow or Deny radio buttons in Flash Player's camera/microphone Privacy panel. The Privacy panel will be brought up by the Pipe recorder but it can also be manually brought up by the user by right clicking on the Pipe client - your code should cope with onCamAccess being called at any time during Pipe client's lifetime. The function is triggered even if the user clicks the selected/active radio button.
2. automatically if the [ ] Remember checkbox was previously selected in Flash Player's Privacy panel

Flash Player's Privacy Panel when presented by the Pipe recorder client:

Internet browsers like Chrome will ask again for permission to use the webcam through a separate dialog box:

At the moment there is no way to catch the user's response to Chrome's dialog box.

Chrome pausing Flash animations to save battery life

Chrome will intelligently pause Flash content to save battery life.

This applies to smaller Pipe embeds too.

When Pipe is paused by Chrome, onCamAccess will be called, while the Pipe recorder is apparently paused, if all these 3 conditions are met:

1. skip initial screen is on (sis:1 in the embed code)
2. the user has only 1 webcam and 1 microphone
3. you have previously checked [ ] Remember in FP's Privacy panel

In this scenario onCamAccess will be called, followed by onFlashReady, while the Pipe recorder is apparently paused.

Here's how Pipe looks when it's paused by Chrome:

Use 400x300px size or bigger for Pipe embeds to prevent it from being paused by Chrome.

Passed Parameters:
recorderId - the recorder id
allowed is true if:

• the user clicked the [Allow] button OR
• clicked [Allow] + [Remember] in a previous session (in which case Flash Player's Privacy dialog box is not shown)

and false if

• the user clicked the [Deny] button OR
• if a user clicked [Deny] + [Remember] in a previous session (in which case Flash Player's Privacy dialog box is not shown)

Example:

myRecorderObject.onCamAccess(recorderId, allowed){
	var args = Array.prototype.slice.call(arguments);
	console.log("onCamAccess("+args.join(', ')+")");
}

onPlaybackComplete(recorderId)

Description: Pipe finishes playback of recording stream

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.onPlaybackComplete(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("onPlaybackComplete("+args.join(', ')+")");
}

onRecordingStarted(recorderId)

Description: the Pipe desktop client started recording

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.onRecordingStarted(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("onRecordingStarted("+args.join(', ')+")");
}

onConnectionClosed(recorderId)

Description: the connection to the media server was disconnected

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.onConnectionClosed(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("onConnectionClosed("+args.join(', ')+")");
}

onFPSChange(recorderId,currentFPS)

This function is not triggered by the HTML 5 recorder, only by the Flash one.

Description: called by the Pipe desktop Flash client every second with the current FPS value

Passed Parameters:
recorderId - the recorder id
currentFPS - the current frames-per-second that the Pipe desktop client reports (during recording, playback, uploading or saving) depending of the state of the Pipe desktop client

Example:

myRecorderObject.onFPSChange(recorderId,currentFPS){
	var args = Array.prototype.slice.call(arguments);
	console.log("onFPSChange("+args.join(', ')+")");
}

onConnectionStatus(recorderId, status)

Description: Called by the Pipe desktop client for every connection event

Passed Parameters:
recorderId - the recorder id status - the actual connection status: (connected, rejected, invalid app, closed, failed)

Example:

myRecorderObject.onConnectionStatus(recorderId, status){
	var args = Array.prototype.slice.call(arguments);
	console.log("onConnectionStatus("+args.join(', ')+")");
}

onMicActivityLevel(recorderId, currentActivityLevel)

Description: the fucntion is called by the Pipe desktop client every 10th of a second (100 miliseconds) with the current microphone level.

Passed Parameters:
recorderId - the recorder id
currentActivityLevel - The amount of sound the microphone is detecting in numeric values between 0 and 100. From our experience it's hard to get values over 50 though.

Example:

myRecorderObject.onMicActivityLevel(recorderId, currentActivityLevel){
	var args = Array.prototype.slice.call(arguments);
	console.log("onMicActivityLevel("+args.join(', ')+")");
}

onSaveOk(recorderId, streamName, streamDuration, cameraName, micName, audioCodec, videoCodec, filetype, videoId, audioOnly, location)

Description: The recording data has been fully streamed to our media servers for further processing.

This is not a confirmation that the recorded file is ready for delivery as the recording will take a few seconds to be processed (conversion to .mp4, snapshot extraction, rotation, push to storage location).

Use Pipe's webhooks to be notified when the recording is fully processed and ready for delivery.

Passed Parameters:
recorderId - the recorder id
streamName - a string representing the name of the stream WITHOUT the file extension
streamDuration - the duration of the recorded video/audio file in seconds but accurate to the millisecond (like this: 4.322)
cameraName - the name of the webcam driver the user has selected for capturing video data
micName - the name of the sound card/mic driver the user has selected for capturing audio data
audioCodec - the audio codec used for the recording
videoCodec - the video codec used for the recording
fileType - the initial file extension for the recording: flv or webm
videoId - a string representing the recording id in Pipe's database (same recording id that is sent through the webhook)
audioOnly - true if it is an audio only recording, false otherwise
location - the subdomain of the Amazon S3 region where the final video will be stored by Pipe, for example addpipevideos.s3.amazonaws.com. The final video will be stored at https://addpipevideos.s3.amazonaws.com/ACCOUNT_HASH/FILE_NAME.mp4. The snapshot will be at the same location but with the .jpg extension. If Do Not Store Files is turned on the final video will not be stored in this location.

Example:

myRecorderObject.onSaveOk(recorderId, streamName, streamDuration, cameraName, micName, audioCodec, videoCodec, fileType, videoId, audioOnly, location){
	var args = Array.prototype.slice.call(arguments);
	console.log("onSaveOk("+args.join(', ')+")");
}

onFlashReady(recorderId)

This function is deprecated

Description: onFlashReady(recorderId); is called when the recording UI has been built (after clicking "Record Video or Record Audio" on both the initial screen and on the camera/mic selection screen which shows up if you have more than 1 cam/mic) and Flash is ready to accept calls to the JS Control API from HTML/JS

Chrome pausing Flash animations to save battery life

Chrome will intelligently pause Flash content to save battery life.

This applies to smaller Pipe embeds too.

When Pipe is paused by Chrome, onFlashReady will be called, while the Pipe recorder is apparently paused, if these 2 conditions are met:

1. skip initial screen is on (sis:1 in the embed code)
2. the user has only 1 webcam and 1 microphone

In this scenario onFlashReady will be called while the Pipe recorder is apparently paused.

If the user has also previously checked [ ] Remember in FP's Privacy panel onCamAccess will be called, followed by onFlashReady, while the Pipe recorder is apparently paused.

Here's how Pipe looks when it's paused by Chrome:

Use 400x300px size or bigger for Pipe embeds to prevent it from being paused by Chrome.

Passed Parameters:
recorderId - the recorder id

Example:

myRecorderObject.onFlashReady(recorderId){
	var args = Array.prototype.slice.call(arguments);
	console.log("onFlashReady("+args.join(', ')+")");
}

Event functions when uploading an existing file from desktop

Below is the list of JavaScript events that the Pipe client will dispatch when the user is UPLOADING an existing video from a desktop device. You can turn on the feature from your embed code or from the Pipe account area when generating an embed code, details here.

onDesktopVideoUploadStarted(recorderId, filename, filetype, audioOnly)

Description: The user has selected a recording from the computer's library and the recording is ready for upload.

Passed Parameters:
recorderId - the recorder id
filename - the (automatically generated) name of the recording without extension
filetype - the file extension of the uploaded video, it can be mp4, mov, 3gp, m4v, mkv, avi, mp3, wma etc.
audioOnly - true if we're expecting an audio only recording, false otherwise

Example:

myRecorderObject.onDesktopVideoUploadStarted(recorderId, filename,filetype, audioOnly){
	var args = Array.prototype.slice.call(arguments);
	console.log("onDesktopVideoUploadStarted("+args.join(', ')+")");
}

onDesktopVideoUploadSuccess(recorderId, filename, filetype, videoId, audioOnly, location)

Description: The recording has finished uploading successfully.

Passed Parameters:
recorderId - the recorder id
filename - the automatically generated name of the recording
filetype - the file extension of the uploaded video, it can be mp4, mov, 3gp, m4v, mkv, avi, mp3, wma etc.
videoId - a string representing the recording id in Pipe's database (same recording id that is sent through the webhook)
audioOnly - true if it is an audio only recording, false otherwise
location - the subdomain of the Amazon S3 region where the final video will be stored by Pipe, for example addpipevideos.s3.amazonaws.com. The final video will be stored at https://addpipevideos.s3.amazonaws.com/ACCOUNT_HASH/FILE_NAME.mp4. The snapshot will be at the same location but with the .jpg extension. If Do Not Store Files is turned on the final video will not be stored in this location.

Example:

myRecorderObject.onDesktopVideoUploadSuccess(recorderId, filename,filetype,videoId,audioOnly,location){
	var args = Array.prototype.slice.call(arguments);
	console.log("onDesktopVideoUploadSuccess("+args.join(', ')+")");
}

onDesktopVideoUploadFailed(recorderId, error)

Description: There was an error while uploading the recording.

Passed Parameters:
recorderId - the recorder id
error - The error thrown when the upload failed to complete

Example:

myRecorderObject.onDesktopVideoUploadFailed(recorderId, error){
	var args = Array.prototype.slice.call(arguments);
	console.log("onDesktopVideoUploadFailed("+args.join(', ')+")");
}

JavaScript Events API (Mobile)

Every time something happens with the mobile recording client (a video is starting to upload, an upload has finished, etc.) the recorder will execute a specific JavaScript function with information about the event.

You can add these mobile event functions to your HTML/JS app and extend them with your own code to do your bidding.

• Embed Code v1.0
• Embed Code v2.0 HTML & JavaScript

<script>
function onVideoRecorded(filename,filetype, audioOnly){
    var args = Array.prototype.slice.call(arguments);
    alert("onVideoRecorded("+args.join(', ')+")");
}
</script>

function onVideoRecorded(filename,filetype, audioOnly){
	var args = Array.prototype.slice.call(arguments);
	alert("onVideoRecorded("+args.join(', ')+")");
}

function onClickUpload(){
	var args = Array.prototype.slice.call(arguments);
	alert("onClickUpload("+args.join(', ')+")");
}

function onVideoUploadSuccess(filename,filetype,videoId,audioOnly,location){
	var args = Array.prototype.slice.call(arguments);
	alert("onVideoUploadSuccess("+args.join(', ')+")");
}

function onVideoUploadFailed(error){
	var args = Array.prototype.slice.call(arguments);
	alert("onVideoUploadFailed("+args.join(', ')+")");
}

var myRecorderObject = PipeSDK.getRecorderById('UNIQUE_ID_OF_THE_RECORDER');

<script>
PipeSDK.onRecordersInserted = function(){
    myRecorderObject =  PipeSDK.getRecorderById('UNIQUE_ID_OF_THE_RECORDER');  
    myRecorderObject.onVideoUploadStarted = function(id, filename, filetype, audioOnly){
        var args = Array.prototype.slice.call(arguments);
        console.log("btRecordPressed("+args.join(', ')+")");
    }
}
</script>

PipeSDK.insert('UNIQUE_ID_OF_THE_RECORDER', paramsObject, function(myRecorderObject){
    myRecorderObject.onVideoUploadStarted = function(id, filename, filetype, audioOnly){
        var args = Array.prototype.slice.call(arguments);
        console.log("btRecordPressed("+args.join(', ')+")");
    }
});

myRecorderObject.onVideoUploadStarted(recorderId, filename,filetype, audioOnly){
	var args = Array.prototype.slice.call(arguments);
	console.log("onVideoUploadStarted("+args.join(', ')+")");
}

myRecorderObject.onVideoUploadSuccess(recorderId, filename,filetype,videoId,audioOnly,location){
	var args = Array.prototype.slice.call(arguments);
	console.log("onVideoUploadSuccess("+args.join(', ')+")");
}

myRecorderObject.onVideoUploadProgress(recorderId, percent){
	var args = Array.prototype.slice.call(arguments);
	console.log("onVideoUploadProgress("+args.join(', ')+")");
}

myRecorderObject.onVideoUploadFailed(recorderId, error){
	var args = Array.prototype.slice.call(arguments);
	console.log("onVideoUploadFailed("+args.join(', ')+")");
}

REST API

The REST API allows any user with an addpipe.com account to request information from our servers programmatically and in a standardized manner, using JSON.

All requests are made against https://api.addpipe.com.

Using the API Key

The API Key can be found in your Pipe account settings and it should be kept in a safe place, like any other password. If compromised, a new API key can be generated.

Authentication will be made with the custom header X-PIPE-AUTH, followed by your Api Key.

API endpoints

{
  "status": "OK",
  "message": "Request successful",
  "request_method": "GET",
  "total_videos": 35,
  "videos": [
    {
         "id":"60372",
         "name":"vs1458574806017_16",
         "length":"5.00",
         "datetime":"2016-03-21 17:39:22",
	  "ip": "93.81.19.151",
         "ua":"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0",
         "http_referer":"https://addpipe.com/home",
         "converted":"1",
         "size":"417346",
         "original_container":"flv",
         "width":"320",
         "height":"240",
         "hasAudio":"1",
         "source":"DESK",
         "ftped":"0",
         "s3ed":"1",
         "sftped":"1",
         "dboxed":"1",
         "ytubed":"0",
         "rotation":"0",
         "payload":"",
         "camera_name":"Logitech HD Pro Webcam C920",
         "microphone_name":"Microphone (HD Pro Webcam C920)",
         "not_stored":"0",
	  "env_id": "1",
	  "audio_only": "0",
	  "recovered": "0",
	  "checksum_md5": "311dbcd10a590c79cce3d3ccb8733560",
	  "checksum_sha1": "b8fb07eb4b18e891800535278f8493ce045d4f3c",
	  "region": "us1",
         "datetimeAdjusted":"2016-03-21 17:39:22",
         "pipeS3Link":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458574806017_16.mp4",
	  "snapshotURL":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458574806017_16.jpg"
      },
      {
         "id":"60373",
         "name":"vs1458574990422_278",
         "length":"6.00",
         "datetime":"2016-03-21 17:42:26",
	  "ip": "93.81.19.151",
         "ua":"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0",
         "http_referer":"https://addpipe.com/home",
         "converted":"1",
         "size":"282309",
         "original_container":"flv",
         "width":"320",
         "height":"240",
         "hasAudio":"1",
         "source":"DESK",
         "ftped":"0",
         "s3ed":"1",
         "sftped":"1",
         "dboxed":"1",
         "ytubed":"0",
         "rotation":"0",
         "payload":"",
         "camera_name":"Logitech HD Pro Webcam C920",
         "microphone_name":"Microphone (HD Pro Webcam C920)",
         "not_stored":"0",
	  "env_id": "1",
	  "audio_only": "0",
	  "recovered": "0",
	  "checksum_md5": "311dbcd10a590c79cce3d3ccb8733560",
	  "checksum_sha1": "b8fb07eb4b18e891800535278f8493ce045d4f3c",
	  "region": "us1",
         "datetimeAdjusted":"2016-03-21 17:42:26",
         "pipeS3Link":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458574990422_278.mp4",
	  "snapshotURL":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458574990422_278.jpg"
      },
      {
         "id":"60382",
         "name":"vs1458578379324_24",
         "length":"16.00",
         "datetime":"2016-03-21 18:39:05",
	  "ip": "93.81.19.151",
         "ua":"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0",
         "http_referer":"https://addpipe.com/home",
         "converted":"1",
         "size":"958462",
         "original_container":"flv",
         "width":"320",
         "height":"240",
         "hasAudio":"1",
         "source":"DESK",
         "ftped":"0",
         "s3ed":"1",
         "sftped":"1",
         "dboxed":"1",
         "ytubed":"0",
         "rotation":"0",
         "payload":"",
         "camera_name":"Logitech HD Pro Webcam C920",
         "microphone_name":"Microphone (HD Pro Webcam C920)",
         "not_stored":"0",
	  "env_id": "1",
	  "audio_only": "0",
	  "recovered": "0",
	  "checksum_md5": "311dbcd10a590c79cce3d3ccb8733560",
	  "checksum_sha1": "b8fb07eb4b18e891800535278f8493ce045d4f3c",
	  "region": "us1",
         "datetimeAdjusted":"2016-03-21 18:39:05",
         "pipeS3Link":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578379324_24.mp4",
	  "snapshotURL":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578379324_24.jpg"
      },
      {
         "id":"60384",
         "name":"vs1458578462703_775",
         "length":"7.00",
         "datetime":"2016-03-21 18:40:20",
	  "ip": "93.81.19.151",
         "ua":"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0",
         "http_referer":"https://addpipe.com/home",
         "converted":"1",
         "size":"600022",
         "original_container":"flv",
         "width":"320",
         "height":"240",
         "hasAudio":"1",
         "source":"DESK",
         "ftped":"0",
         "s3ed":"1",
         "sftped":"1",
         "dboxed":"1",
         "ytubed":"0",
         "rotation":"0",
         "payload":"",
         "camera_name":"Logitech HD Pro Webcam C920",
         "microphone_name":"Microphone (HD Pro Webcam C920)",
         "not_stored":"0",
	  "env_id": "1",
	  "audio_only": "0",
	  "recovered": "0",
	  "checksum_md5": "311dbcd10a590c79cce3d3ccb8733560",
	  "checksum_sha1": "b8fb07eb4b18e891800535278f8493ce045d4f3c",
	  "region": "us1",
         "datetimeAdjusted":"2016-03-21 18:40:20",
         "pipeS3Link":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578462703_775.mp4",
	  "snapshotURL":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578462703_775.jpg"
      },
      {
         "id":"60385",
         "name":"vs1458578985192_39",
         "length":"7.00",
         "datetime":"2016-03-21 18:49:02",
	  "ip": "93.81.19.151",
         "ua":"Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0",
         "http_referer":"https://addpipe.com/home",
         "converted":"1",
         "size":"579632",
         "original_container":"flv",
         "width":"320",
         "height":"240",
         "hasAudio":"1",
         "source":"DESK",
         "ftped":"0",
         "s3ed":"1",
         "sftped":"0",
         "dboxed":"1",
         "ytubed":"0",
         "rotation":"0",
         "payload":"",
         "camera_name":"Logitech HD Pro Webcam C920",
         "microphone_name":"Microphone (HD Pro Webcam C920)",
         "not_stored":"0",
	  "env_id": "1",
	  "audio_only": "0",
	  "recovered": "0",
	  "checksum_md5": "311dbcd10a590c79cce3d3ccb8733560",
	  "checksum_sha1": "b8fb07eb4b18e891800535278f8493ce045d4f3c",
	  "region": "us1",
         "datetimeAdjusted":"2016-03-21 18:49:02",
         "pipeS3Link":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578985192_39.mp4",
	  "snapshotURL":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578985192_39.jpg"
      },
      {
         "id":"61071",
         "name":"mvs556696771",
         "length":"9.00",
         "datetime":"2016-03-23 15:48:57",
	  "ip": "93.81.19.151",
         "ua":"Mozilla/5.0 (iPhone; CPU iPhone OS 9_3 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13E234 Safari/601.1",
         "http_referer":"https://addpipe.com/home",
         "converted":"1",
         "size":"2348347",
         "original_container":".mov",
         "width":"480",
         "height":"480",
         "hasAudio":"1",
         "source":"MOB",
         "ftped":"0",
         "s3ed":"1",
         "sftped":"1",
         "dboxed":"1",
         "ytubed":"0",
         "rotation":"0",
         "payload":"",
         "camera_name":"mobile_device",
         "microphone_name":"mobile_device",
         "not_stored":"0",
	  "env_id": "1",
	  "audio_only": "0",
	  "recovered": "0",
	  "checksum_md5": "311dbcd10a590c79cce3d3ccb8733560",
	  "checksum_sha1": "b8fb07eb4b18e891800535278f8493ce045d4f3c",
	  "region": "us1",
         "datetimeAdjusted":"2016-03-23 15:48:57",
         "pipeS3Link":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/mvs556696771.mp4",
	  "snapshotURL":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/mvs556696771.jpg"
      }
  ]
}
                                            

{
  "status": "OK",
  "status_code": 200,
  "message": "Request successful",
  "request_method": "GET",
  "total_videos": 1,
  "videos": [
    {
      "id": "13360",
      "name": "vs1458578985192_39",
      "length": "3.00",
      "datetime": "2015-10-08 16:23:19",
      "ip": "93.81.19.151",
      "ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36",
      "http_referer": "https://site.com/test/test2.php",
      "converted": "1",
      "size": "145695",
      "original_container": "flv",
      "width": "640",
      "height": "480",
      "hasAudio": "1",
      "source": "DESK",
      "ftped": "0",
      "s3ed": "0",
      "sftped": "0",
      "dboxed": "0",
      "ytubed": "0",
      "rotation": "0",
      "payload": "bc5cq87vt3yv4t94t325af97c9e836e7bd2,1",
      "camera_name": "Built-in iSight (05ac:8502)",
      "microphone_name": "Default",
      "not_stored": "0",
      "env_id": "1",
      "audio_only": "0",
      "recovered": "0",
      "checksum_md5": "311dbcd10a590c79cce3d3ccb8733560",
      "checksum_sha1": "b8fb07eb4b18e891800535278f8493ce045d4f3c",
      "region": "us1",
      "datetimeAdjusted":"2016-03-23 16:23:19",
      "timezone":"Europe/Bucharest",
      "pipeS3Link":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578985192_39.mp4",
      "snapshotURL":"addpipevideos.s3.amazonaws.com/2123b9efed932689c4081a749a877413/vs1458578985192_39.jpg"
    }
  ]
}
                                            

{
  "subscribed": "1"
}                       

{
  "status": "OK",
  "status_code": 200,
  "message": "Request successful",
  "request_method": "GET",
  "account_details": [
    {
      "api_requests": "13",
      "email": "myAwesome@Email.com",
      "subscribed": "1"
    }
  ]
}
                                            

{
   "status":"OK",
   "status_code":200,
   "message":"Request successful",
   "request_method":"GET",
   "environment_details":[
      {
         "id":"64",
         "env_id":"1",
         "env_name":"Production",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"0",
         "cut_to_size":"0",
         "send_video_email":"0",
         "recorder_client":"html5",
         "region": "us1"
      },
      {
         "id":"1110",
         "env_id":"2",
         "env_name":"Dev-test",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"0",
         "cut_to_size":"0",
         "send_video_email":"0",
         "recorder_client":"flash",
         "region": "us1"
      },
      {
         "id":"1120",
         "env_id":"3",
         "env_name":"test-dev-azi",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"1",
         "cut_to_size":"1",
         "send_video_email":"0",
         "recorder_client":"flash",
         "region": "us1"
      },
      {
         "id":"1140",
         "env_id":"4",
         "env_name":"test-env",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"0",
         "cut_to_size":"1",
         "send_video_email":"1",
         "recorder_client":"flash",
         "region": "us1"
      },
      {
         "id":"1141",
         "env_id":"5",
         "env_name":"website-new",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"1",
         "cut_to_size":"1",
         "send_video_email":"1",
         "recorder_client":"flash",
         "region": "us1"
      },
      {
         "id":"1144",
         "env_id":"6",
         "env_name":"supermegaazi",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"0",
         "cut_to_size":"0",
         "send_video_email":"0",
         "recorder_client":"flash",
         "region": "us1"
      },
      {
         "id":"1537",
         "env_id":"7",
         "env_name":"test-rtc",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"1",
         "cut_to_size":"0",
         "send_video_email":"0",
         "recorder_client":"flash",
         "region": "us1"
      }
   ]
}
                                            

{
   "status":"OK",
   "status_code":200,
   "message":"Request successful",
   "request_method":"GET",
   "environment_details":[
      {
         "id":"1537",
         "env_id":"7",
         "env_name":"test-rtc",
         "acchash":"1044b9efed932689c4081a749a877413",
         "do_not_store":"1",
         "cut_to_size":"0",
         "send_video_email":"0",
         "recorder_client":"flash",
         "region": "us1"
      }
   ]
}
                                            

{
  "status": "OK",
  "status_code": 200,
  "message": "Request successful",
  "request_method": "GET",
  "webhook_details": [
    {
      "id":"69",    
      "webhook": "https://dev.yourDomain.tld/",
      "webhook_recorded": "0",
      "webhook_transcoded": "1",
      "webhook_copied_s3": "0",
      "webhook_copied_ftp": "0",
      "webhook_copied_dbox": "0",
      "env_id":"1"
    }
  ]
}
                                            

{	
  "webhook": "http://your-fancy-website.com/webhook",
  "webhook_recorded": "0",
  "webhook_transcoded": "1",
  "webhook_copied_s3": "0",
  "webhook_copied_ftp": "0",
  "webhook_copied_dbox": "0",
  "env_id":"2"
}                           

{
  "status": "OK",
  "status_code": 200,
  "message": "Request successful",
  "request_method": "GET",
  "amazon_details": [
    {
      "id":"69",	    
      "amz_bucket": "",
      "amz_bucket_region": "",
      "env_id":"1"
    }
  ]
}
                                            

{
  "amz_key": "YourAmazonKey",
  "amz_secret": "YourAmazonSecret",
  "amz_bucket": "TheBucket",
  "amz_bucket_region": "AndTheRegion",
  "env_id": "1"
}                       

{
  "status": "OK",
  "status_code": 200,
  "message": "Request successful",
  "request_method": "GET",
  "ftp_details": [
    {
      "id":"69",    
      "ftp_host": "",
      "ftp_port": "21",
      "ftp_username": "",
      "ftp_dir": "",
      "sftp_host": "",
      "sftp_port": "22",
      "sftp_username": "",
      "sftp_dir": "",
      "env_id":"1"
    }
  ]
}
                                            

{
  "ftp_host": "FtpHost",
  "ftp_port": "21",
  "ftp_username": "FtpUsername",
  "ftp_password": "FtpPass",
  "ftp_dir": "/dir/to/saved_videos",
  "sftp_host": "SftpHost",
  "sftp_port": "22",
  "sftp_username": "SftpUser",
  "sftp_password": "SftpPass"
  "sftp_dir": "/dir/to/saved_videos",
  "env_id": "1"
}                       

{
  "status": "OK",
  "status_code": 200,
  "message": "Request successful",
  "request_method": "GET",
  "dropbox_details": [
    {
      "id":"69",    
      "dbox_folder": "",
      "env_id":"1"
    }
  ]
}
                                            

{
  "dbox_token": "YourDropboxToken",
  "dbox_folder": "YourDropboxFolder",
  "env_id": "1"
}                       

Code Examples

PHP

$client = new http\Client;
$request = new http\Client\Request;

$body = new http\Message\Body;
$body->append('{
  "amz_key": "",
  "amz_secret": "",
  "amz_bucket": "",
  "amz_bucket_region": ""
  "env_id": "1"
}');

$request->setRequestUrl('https://api.addpipe.com/amazon');
$request->setRequestMethod('PUT');
$request->setBody($body);

$request->setHeaders(array(
  'cache-control' => 'no-cache',
  'content-type' => 'application/json',
  'x-pipe-auth' => 'your-Pipe-Api-Key'
));

$client->enqueue($request)->send();
$response = $client->getResponse();

echo $response->getBody();

cURL

curl -X PUT -H "X-PIPE-AUTH: Your-Pipe-Api-Key" -H "Content-Type: application/json" -H "Cache-Control: no-cache" -H -d '{
  "amz_key": "",
  "amz_secret": "",
  "amz_bucket": "",
  "amz_bucket_region": "",
  "env_id": "1"
}' 'https://api.addpipe.com/amazon'

JavaScript

var data = JSON.stringify({
  "amz_key": "",
  "amz_secret": "",
  "amz_bucket": "",
  "amz_bucket_region": ""
  "env_id": "1"
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open("PUT", "https://api.addpipe.com/amazon");
xhr.setRequestHeader("x-pipe-auth", "Your-Pipe-Api-Key");
xhr.setRequestHeader("content-type", "application/json");
xhr.setRequestHeader("cache-control", "no-cache");

xhr.send(data);

Go

package main

import (
	"fmt"
	"strings"
	"net/http"
	"io/ioutil"
)

func main() {

	url := "https://api.addpipe.com/amazon"

	payload := strings.NewReader("{\n  \"amz_key\": \"\",\n  \"amz_secret\": \"\",\n  \"amz_bucket\": \"\",\n  \"amz_bucket_region\": \"\"\, \n  \"env_id\": \"1\"n}")

	req, _ := http.NewRequest("PUT", url, payload)

	req.Header.Add("x-pipe-auth", "Your-Pipe-Api-Key")
	req.Header.Add("content-type", "application/json")
	req.Header.Add("cache-control", "no-cache")

	res, _ := http.DefaultClient.Do(req)

	defer res.Body.Close()
	body, _ := ioutil.ReadAll(res.Body)

	fmt.Println(res)
	fmt.Println(string(body))

}

Python

import http.client

conn = http.client.HTTPConnection("api.addpipe.com")

payload = "{\n  \"amz_key\": \"\",\n  \"amz_secret\": \"\",\n  \"amz_bucket\": \"\",\n  \"amz_bucket_region\": \"\",\n  \"env_id\": \"1\"\n}"

headers = {
    'x-pipe-auth': "Your-Pipe-Api-Key",
    'content-type': "application/json",
    'cache-control': "no-cache"
    }

conn.request("PUT", "/account", payload, headers)

res = conn.getresponse()
data = res.read()

print(data.decode("utf-8"))

Ruby

require 'uri'
require 'net/http'

url = URI("https://api.addpipe.com/amazon")

http = Net::HTTP.new(url.host, url.port)

request = Net::HTTP::Put.new(url)
request["x-pipe-auth"] = 'Your-Pipe-Api-Key'
request["content-type"] = 'application/json'
request["cache-control"] = 'no-cache'
request.body = "{\n  \"amz_key\": \"\",\n  \"amz_secret\": \"\",\n  \"amz_bucket\": \"\",\n  \"amz_bucket_region\": \"\", \n  \"env_id\": \"1\"\n}"

response = http.request(request)
puts response.read_body

Bash (wget)

wget --quiet \
  --method PUT \
  --header 'x-pipe-auth: Your-Pipe-Api-Key' \
  --header 'content-type: application/json' \
  --header 'cache-control: no-cache' \
  --body-data '{\n  "amz_key": "",\n  "amz_secret": "",\n  "amz_bucket": "",\n  "amz_bucket_region": "", \n  "env_id": "1"\n}' \
  --output-document \
  - https://api.addpipe.com/amazon

Bash (cURL)

curl --request PUT \
  --url https://api.addpipe.com/amazon \
  --header 'cache-control: no-cache' \
  --header 'content-type: application/json' \
  --header 'x-pipe-auth: Your-Pipe-Api-Key' \
  --data '{\n  "amz_key": "",\n  "amz_secret": "",\n  "amz_bucket": "",\n  "amz_bucket_region": "", \n  "env_id": "1"\n}'