Adding Multiple Recorders to the Page
One of the things you can do with the 2.0 embed code is to add multiple recorders to the same HTML page.
2.0 HTML
To do this with the 2.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 times:
<head>
<link rel="stylesheet" href="https://cdn.addpipe.com/2.0/pipe.css"/>
<script type="text/javascript" src = "https://cdn.addpipe.com/2.0/pipe.js"></script>
</head>
<body>
<piperecorder id="recorder1" pipe-width="640" pipe-height="510" pipe-qualityurl="avq/480p.xml" pipe-accounthash="ACCOUNT_HASH" pipe-eid="ENVIRONMENT_CODE" pipe-mrt="60" pipe-avrec="1"></piperecorder>
<piperecorder id="recorder2" pipe-width="1280" pipe-height="720" pipe-qualityurl="avq/720p.xml" pipe-accounthash="ACCOUNT_HASH" pipe-eid="ENVIRONMENT_CODE" pipe-mrt="120" pipe-avrec="1"></piperecorder>
<piperecorder id="recorder3" pipe-width="80%" pipe-height="240" pipe-qualityurl="avq/240p.xml" pipe-accounthash="ACCOUNT_HASH" pipe-eid="ENVIRONMENT_CODE" pipe-mrt="180" pipe-avrec="1"></piperecorder>
</body>
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 not 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 insert the recorder HTML code inside the three piperecorder tags and fire PipeSDK.onRecordersInserted() if present.
Any JS Events API or JS 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 an Uncaught ReferenceError: PipeSDK is not defined error in the browser console.
Important:
PipeSDK.onRecordersInserted() will not be called if the recorder is not correctly initialized.
This will happen on the following occasions:
- The recording platform is in maintenance.
- The connection to Pipe database is not possible.
- The daily limit of saved and unsaved recordings has been reached.
- The Origin header is missing.
- The Pipe recorder is not allowed to be embedded in the specific host.
- The Pipe account hash belongs to an expired trial account or to an account with an expired subscription.
- The Pipe environment id value is missing or incorrect.
- The Pipe account hash value is missing or incorrect.
2.0 JavaScript
To add multiple recorders to the page using the 2.0 JavaScript embed code 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 three recorders on the page. Each will use a different div element as an insertion point and have a different size and maximum recording time (as specified in the config object).
<head>
<link rel="stylesheet" href="https://cdn.addpipe.com/2.0/pipe.css"/>
<script type="text/javascript" src = "https://cdn.addpipe.com/2.0/pipe.js"></script>
</head>
<body>
<div id="custom-id1" ></div>
<div id="custom-id2" ></div>
<div id="custom-id3" ></div>
<script type="text/javascript">
var pipeParams1 = {size: {width:400,height:330}, qualityurl: "avq/360p.xml",accountHash:"ACCOUNT_HASH", eid:"ENVIRONMENT_CODE", showMenu:"true", mrt:60, avrec:1};
var pipeParams2 = {size: {width:640,height:430}, qualityurl: "avq/480p.xml",accountHash:"ACCOUNT_HASH", eid:"ENVIRONMENT_CODE", showMenu:"true", mrt:120, avrec:1};
var pipeParams3 = {size: {width:"80%",height:750}, qualityurl: "avq/720p.xml",accountHash:"ACCOUNT_HASH", eid:"ENVIRONMENT_CODE", showMenu:"true", mrt:180, avrec:1};
PipeSDK.insert('custom-id1', pipeParams1, function(myRecorderObject){ });
PipeSDK.insert('custom-id2', pipeParams2, function(myRecorderObject){ });
PipeSDK.insert('custom-id3', pipeParams3, function(myRecorderObject){ });
</script>
</body>
You can move the insertion of pipe.js and pipe.css to the bottom of the page to avoid the page not rendering until pipe.js and pipe.css have loaded, but any code involving PipeSDK will have to be made after the code that inserts pipe.js in the page.