Documentation

Embedding your first video recorder

To embed your first video recorder on your website follow these simple steps:

1. Sign in to your Pipe account area
2. The lower right panel contains the embed code, copy it
3. Paste the code in your HTML page.
4. Refresh the page in your browser on your desktop or mobile

Pipe will detect mobile and desktop browsers automatically and the proper interface will be loaded.

Viewing your recorded videos

You can see all the recorded videos on your account under the Recorded Videos tab.

Every recorded video will appear here along with other useful information.

The following information will be shown for each video:

Once the video is converted, all the information will be available

You can preview the recording by clicking on its filename and you can generate an embed code by clicking the "Embed" link:

Changing the video recorder size

The video recorder size is different on desktop and mobile devices.

Video recorder size on desktop devices

The size of the video recorder on desktop devices can be changed directly from the embed code or using our embed tool as shown below.

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

Use the 2 inputs to specify the size of the embedded video recorder in pixels as it will be shown by desktop devices.

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

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

Video recorder size on mobile devices

On mobile devices the video recorder is included in a div. The width of the div containing the mobile recording area is relative to its parent element. The div will have a 100% width. The height is fixed at 120px.

Limiting the length of the recording

By default, the recordings are limited to 2 minutes (120 seconds). You can easily change this from your account area:

Set the desired length in seconds and press the "Generate Embed Code" for the changes to take effect.

You can also change the maximum length of recorded videos on desktop directly from the embed code.

Video quality options in Pipe

With Pipe you have full control over the video quality recorded on desktop devices. However what you configure Pipe to record at might not be what you finally get. Factors like webcam quality and available light always affect the final video. On mobile devices the quality depends 100% on the device.

Video quality on desktop devices

On desktop computers the quality depends on the configuration you specify in your embed code but also on the quality of the webcam (affects resolution and fps) and light available in the room (affects 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 HD ), all you have to do is to select it:

You can also create and use your own quality profiles. More information at Using your own quality profiles

The video quality is not affected by the recorder size. So you can have a 640x480 recorder embedded on your page, recording at a 720p resolution.

Note that the quality settings you change here will only affect the desktop video recorder.

Video quality on mobile devices

The video quality for the recordings made with a mobile device depends on the device itself.

For example, iOS handles videos in different ways depending on when they are recorded:

• If when prompted you choose an existing video, that video will be compressed but the resolution will remain the same
• If when prompted you choose to record a new video, that video will be recorded at 360x480 (portrait) and 480x360 (landscape).

Using your own quality profiles

Pipe allows you to use your own video quality profile (XML file hosted your website) by linking directly to it, in the embed code, using the qualityurl parameter.

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

Here are the 3 video quality profiles available through the Pipe account area: 240p, 300p, 480p and 720p. Download one, make your changes and upload it to your website. You can change the resolution, frames per second, picture quality and more.

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

Setup the qualityurl parameter to automatically load the .xml file through http or https depending on where Pipe is embedded. Here's an example code:

var flashvars = {qualityurl: ('https:' == document.location.protocol ? 'https://' : 'http://') +"yourdomain.com/quality_profile.xml",accountHash:"your_account_hash", eid:1, showMenu:"true", mrt:5,sis:0,asv:1};

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 "*"

   For more details on how to configure CORS on other servers see https://enable-cors.org/server.html

Video recorder looks

Control menu

You can opt to hide the control menu of the recorder. You may want to do this if you decide to control the video recorder using the JavaScript Control API

Colors

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

These can be changed from your account area or from the embed code directly

To change the colors from you account area, you will have to access the Advanced Options panel:

This will open up the design customization panel. Now you will be able to change the colors. Once you're done, press the "Generate Embed Code" to see the changes.

Corners

You can change the corner radius of the desktop recorder by changing the value of the "Corner Radius" field:

Working directly with the embed code

You can change settings directly in your embed code. Size, quality, colors or maximum recording time and payload data can be set here directly. This allows you to configure Pipe directly on your website.

You can change the size of the recorder directly in this code without the need to use the generator in your account area everytime you want to change it.

var size = {width:320, height:270}; this line must be edited in order to change the size of the video recorder.

var flashvars will contain an array of different settings that you can change:

Pushing videos 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 videos 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 video 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:

Pushing videos 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 video 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:

Not storing videos on Pipe's storage

Pipe gives you to the option to not store your videos on the Pipe storage. This option is available per environment in the environment settings.

If you activate this option, Pipe will delete the original video, the .mp4 video and the snapshot as soon as the .mp4 video file 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 recorded videos 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 5 minutes. Once the push to all configured storage options succeeds the files will be removed from our servers.

Setting up webhooks

Webhooks can be used to get notified whenever someone records a video using an embedded video 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 5 types of webhooks that can be sent:

1. video_recorded: sent each time a video is recorded.
2. video_transcoded: sent each time a video is transcoded.
3. video_copied_ftp: sent each time a video is copied to (S)FTP.
4. video_copied_s3: sent each time a video is copied to your Amazon S3.
5. video_copied_dbox: sent each time a video 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 variable will be specific for each event.

Here are the different types of values:

• video_recorded
• video_transcoded
• video_copied_ftp
• video_copied_s3
• video_copied_dbox

{
	"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://site_from_where_video_was_recorded.com"
	}
}

{
	"version":"1.0",
	"event":"video_transcoded",
	"data":{
		"videoName":"video 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",
		"url":"https://addpipevideos.s3.amazonaws.com/b8e2f5bfd04a93b434bd8c740bff744d/vid.mp4",
		"snapshotUrl":"https://addpipevideos.s3.amazonaws.com/b8e2f5bfd04a93b434bd8c740bff744d/vid.jpg",
		"payload":"your payload data string",
		"httpReferer":"http://site_from_where_video_was_recorded.com"
	}
}

{
	"version":"1.0",
	"event":"video_copied_ftp",
	"data":{
		"ftpUploadStatus":"upload success",
		"videoName":"vs1457013120534_862",
		"duration":7,
		"audioCodec":"AAC",
		"videoCodec":"H.264",
		"type":"MP4",
		"size":493534,
		"width":320,
		"height":240,
		"orientation":"landscape",
		"id":"123",
		"payload":"your payload data string",
		"httpReferer":"http://site_from_where_video_was_recorded.com"
	}
}

{
	"version":"1.0",
	"event":"video_copied_s3",
	"data":{
		"s3UploadStatus":"upload success",
		"videoName":"vs1457013120534_862",
		"duration":7,
		"audioCodec":"AAC",
		"videoCodec":"H.264",
		"type":"MP4",
		"size":493534,
		"width":320,
		"height":240,
		"orientation":"landscape",
		"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",
		"httpReferer":"http://site_from_where_video_was_recorded.com"
	}
}

{
	"version":"1.0",
	"event":"video_copied_dbox",
	"data":{
		"dboxUploadStatus":"upload success",
		"videoName":"vs1457013120534_862",
		"duration":7,
		"audioCodec":"AAC",
		"videoCodec":"H.264",
		"type":"MP4",
		"size":493534,
		"width":320,
		"height":240,
		"orientation":"landscape",
		"id":"123",
		"payload":"your payload data string",
		"httpReferer":"http://site_from_where_video_was_recorded.com"
	}
}

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 is the current version of the Pipe's webhook API.

event is the name of the event that triggered this call

videoName is the name of the video

duration is the duration in seconds with two decimals

audioCodec is the used audio codec namely AAC

videoCodec is the used video codec namely H.264

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 desktop recorder will produce .flv files)

size is the size in bytes

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.

orientation represents the orientation of the device when the recording was made. This could be either "landscape" or "potrait".

id is the ID of the video as you will find it in your Pipe account area and as it is stored on our servers.

dateTime is the date and time relative to your timezone settings at which the video has finished converting.

timeZone represents your selected time zone in the account settings.

url

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

snapshotUrl

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

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 video was recorded.

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));
  }
          

Receiving webhooks

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

$webhookData = json_decode($_POST["payload"], true);

The code above will make the data easily accesible in an associative array similar to the one shown here:

Array
(
    [version] => 1.0
    [event] => video_transcoded
    [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
            [url] =>  https://pipe-eu1.s3.eu-central-1.amazonaws.com/2044b9efed932689c4081a749a877413/vsrtc1501002174_491.mp4
            [snapshotUrl] =>  https://pipe-eu1.s3.eu-central-1.amazonaws.com/2044b9efed932689c4081a749a877413/vsrtc1501002174_491.jpg
            [doNotStore] => 0
            [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"}
            [httpReferer] => https://hdfvr.com/pipeTest/test.php
        )

)

So if you wish to get the videoName value for example you simply access it like this:
$vidName = $webhookData["data"]["videoName"].

Sending custom data

flashvar's payload property can be used to send data in string format to Pipe along with the recorded video. This can be useful if you wish to tunnel data - like user id or form id - from your embed code all the way to your webhooks.

Here's how to add the payload property to the flashvar object.

Default embed code:

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

Embed code with the payload property added:

var flashvars = {qualityurl: "avq/240p.xml",accountHash:"your_account_hash",showMenu:"true", 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 video as the value of the payload name/value pair from the data object.

{
	"version":"1.0",
	"event":"video_transcoded",
	"data":{
		"videoName":"video 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",
		"url":"http://s1.addpipe.com/v/b8e2f5bfd04a93b434bd8c740bff744d/vid.mp4",
		"snapshotUrl":"https://s1.addpipe.com/v/b8e2f5bfd04a93b434bd8c740bff744d/vid.jpg",
		"payload":"your_payload_data_string"
	}
}

JavaScript Control API (Desktop)

These are the functions used to control the recorder's interface using JavaScript functions.

These methods need to be called like this:

where VideoRecorder is the id of the object/embed containing the video recorder .swf file.

What you can do with it

For example you could hide the default controls of the recorder and create your own controls using the Control API.

Here is the list of methods that you can call on the Pipe video recorder:

Remove Pipe Recorder From Page

When the Pipe HTML5 recorder is used and it's part of a modal window that the user closes (either through CSS' display: none or by removing the modal DIV from the DOM) the webcam will continue to be acessed and it's light will continue to be turned on.

For this scenario we've built the following JS function that closes the media server connection, turns off the webcam access and clears the contents of the #hdfvr-content DIV returning the HTML source code to its initial state:removePipeRecorder();.

Execute it before closing the modal window. It works for both the Flash recorder and the HTML5 one.

JavaScript Events API (Desktop)

Every time something happens with the recorder (a button is pressed, the connection succeeds, etc.) a call is made to a JavaScript function with lots of info about the event.

What you can do with it

Here are some of the things you can trigger using the Event API

• 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

Desktop recorder events and associated JS functions

Here is the list of events and associated JavaScript functions:

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

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

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

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

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

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

function onUploadDone(streamName, streamDuration, userId, recorderId, audioCodec, videoCodec, fileType){
	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 video 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 video 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 video 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 video 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 - variable sent via flash vars

Example:

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

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

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

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

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

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

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

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

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

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

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

JavaScript Events API (Mobile)

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

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

function onVideoUploadSuccess(filename,filetype,videoId){
	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(', ')+")");
}

Requirements and supported browsers

Pipe in different languages

Using your own language file

Differences between HTML5 client and the Flash one

Pipe API https://api.addpipe.com

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

Using the API Key

The API Key can be found in your Account Settings and it should be kept in a safe place, like any other password. If compromised, a new API key can be generated automatically from your Account Settings.

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",
         "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",
         "datetimeAdjusted":"2016-03-21 17:39:22",
         "pipeS3Link":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458574806017_16.mp4",
	  "snapshotURL":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458574806017_16.jpg"
      },
      {
         "id":"60373",
         "name":"vs1458574990422_278",
         "length":"6.00",
         "datetime":"2016-03-21 17:42:26",
         "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",
         "datetimeAdjusted":"2016-03-21 17:42:26",
         "pipeS3Link":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458574990422_278.mp4",
	  "snapshotURL":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458574990422_278.jpg"
      },
      {
         "id":"60382",
         "name":"vs1458578379324_24",
         "length":"16.00",
         "datetime":"2016-03-21 18:39:05",
         "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",
         "datetimeAdjusted":"2016-03-21 18:39:05",
         "pipeS3Link":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458578379324_24.mp4",
	  "snapshotURL":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458578379324_24.jpg"
      },
      {
         "id":"60384",
         "name":"vs1458578462703_775",
         "length":"7.00",
         "datetime":"2016-03-21 18:40:20",
         "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",
         "datetimeAdjusted":"2016-03-21 18:40:20",
         "pipeS3Link":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458578462703_775.mp4",
	  "snapshotURL":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458578462703_775.jpg"
      },
      {
         "id":"60385",
         "name":"vs1458578985192_39",
         "length":"7.00",
         "datetime":"2016-03-21 18:49:02",
         "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",
         "datetimeAdjusted":"2016-03-21 18:49:02",
         "pipeS3Link":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458578985192_39.mp4",
	  "snapshotURL":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458578985192_39.jpg"
      },
      {
         "id":"61071",
         "name":"mvs556696771",
         "length":"9.00",
         "datetime":"2016-03-23 15:48:57",
         "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",
         "datetimeAdjusted":"2016-03-23 15:48:57",
         "pipeS3Link":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/mvs556696771.mp4",
	  "snapshotURL":"https:\/\/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",
      "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",
      "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",
      "datetimeAdjusted":"2016-03-23 16:23:19",
      "timezone":"Europe\/Bucharest",
      "pipeS3Link":"https:\/\/addpipevideos.s3.amazonaws.com\/2123b9efed932689c4081a749a877413\/vs1458578985192_39.mp4",
      "snapshotURL":"https:\/\/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"
      },
      {
         "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"
      },
      {
         "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"
      },
      {
         "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"
      },
      {
         "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"
      },
      {
         "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"
      },
      {
         "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"
      }
   ]
}
                                            

{
   "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"
      }
   ]
}
                                            

{
  "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}'