15 August 2018 / Product Updates

New Pipe Embed Code v2.0 Is Released In Beta

Today we are finally ready to release our new 2.0 embed code in beta to all our client and trial accounts.

This new embed code is one of the most important changes we’ve done to the Pipe platform since it’s launch more than 2 years ago. The new HTML and JS embed codes are the result of months of research, development, and testing. Work started in December 2017.

We had a ton of feedback and evolving requirements to build upon. In the end, we managed to develop an embed code that’s easy to use when building both simple web apps with pure JavaScript and HTML or advanced single page web apps using React, Angular, and Vue.js.

Multiple Recorders Per Page

One of the big features in the Pipe Embed v2.0 is that you can add multiple recorders to the same page. Having more than one recorder on the page enables new use cases which were previously technically challenging to achieve. For example, if you are integrating Pipe in a form you can now add a video response to several questions without the need to make a different HTML page for each question.

Adding more than one recorder per page is as simple as adding multiple <piperecorder...> tags with unique IDs in your page, or, if you are using the new JavaScript version of the 2.0 embed code, you simply need to call PipeSDK.insert() along with the specific parameters for each <div> element that you wish to be replaced with a Pipe recorder. For more information about adding multiple recorders to the same page with the 2.0 embed code check out the documentation.

External CSS File

The new 2.0 embed code loads an external CSS file that contains all the CSS classes used by the desktop HTML and mobile recorders. The classes can be easily targeted and changed according to your needs. In v1.0 the CSS classes were inline and were relying on ids.

We now use classes instead of ids because the embed code 2.0 allows the user to have multiple recorders per page, so all the elements that are common for all recorders will have the same CSS class applied to them and all the changes made by you will immediately affect all the recorders in your page. You can still use ids to target a specific recorder though.

You can have a look at all the CSS classes in more detail in the v2 CSS documentation.

Resources Are Loaded Independently

The loading of pipe.js andpipe.cssis now separate from the actual insertion of the recorder in the page. You can thus load pipe.js in the page so that the library is ready whenever you have all the (payload) data needed to add the recorders to the page or whenever you are ready. You can also loadpipe.js at the end of the page to prevent any page rendering/dom loading delay.

Better Control Of The Recorders Through JavaScript

The new JavaScript version of the 2.0 embed code gives you more granular control of when and where to insert a recorder through the new PipeSDK.insert() function.

Thus you can now:

Mount and unmount the Pipe recorder as needed to any <div> element in the page
You can reset the video recording client using a combination of the remove() and PipeSDK.insert() control API methods.

Improved JavaScript Control and Events API

Both the control and events API have been remade from the ground up. These were the requirements:

It needs to work flawlessly with one or multiple recorders
It should allow easier integration with frameworks like Angular, React and Vue.js
No more global vars and functions

The actual control API methods and events API function names have largely remained unchanged and allow for a quick and easy transition from v1.0 to v2.0 of the embed code, with a couple of exceptions:

The newly added remove() control API method, which will remove the Pipe recorder HTML/Flash elements from the page and releases any in use resources (webcam, connection to the media server) without removing the <div> in which it was first inserted, so the <div> can be reused to re-insert the recorder in the page
The event function onRecorderInit()has been replaced by the callback function of the PipeSDK.insert() method and PipeSDK.onRecordersInserted() method, for the JavaScript and HTML embed respectively
The event function onRecorderReady() has been renamed to onReadyToRecord()
The event functions onDesktopVideoSelected() and onDesktopVideoSubmitted()have been combined in a single event function named onDesktopVideoUploadStarted()
For the Mobile Events API, the event functions onVideoRecorded() and onClickUpload()have been combined in a single event function named onVideoUploadStarted()as a result of single button mobile UI
A new mobile event function,onVideoUploadProgress() triggers every time upload progress is made

Fewer HTTP Calls

We bundled up all our code in a single pipe.js file. That lowers the number of HTTPS calls for JS libraries from 5 to 1 and the total number of HTTP calls from 14 to 10 when recording using our HTML5 recorder on desktop. We plan on lowering the number of HTTP calls even more and with all recorders ( desktop HTML5, desktop Flash and mobile one), that’s one thing we’ll be working on during the beta.

Changed Requirements

The requirements have changed a bit, the minimum version of Internet Explorer is now IE 11 instead of 9, otherwise, the requirements remain vastly the same.

High DPI Icons

Version 2.0 of the embed code makes use of high DPI .svg icons. This means that all 14 icons used in the Pipe recorders will look sharper on high DPI screens like retina displays.

HTML Embed and JavaScript Embed

The v2.0 of the embed code now provides 2 ways for embedding Pipe in your website:

The HTML Embed

This is a pure HTML embed code that does not require you to have any prior knowledge of programming. You simply paste it in your page and you are good to go.

To embed using the HTML version you simply add to your page a custom tag named piperecorder that contains all the needed attributes. Once the page is loaded pipe.js will replace the tag with a Pipe recorder, here’s an example embed:

<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="custom-id"
    pipe-width="400"
    pipe-height="330"
    pipe-qualityurl="avq/300p.xml"
    pipe-accountHash="2044b9efed932689c4081a749a877413"
    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>

You can insertpipe.js and pipe.css anywhere in your page. If you put them at the bottom of the page before the closing tag, it will not block page rendering.

The JavaScript Embed

This version makes the Pipe recorder easy to work with in JavaScript heavy applications, regardless if they are pure JavaScript or based on React, Angular or Vue.js. You can easily insert, remove and control all the Pipe recorders on the page using JavaScript.

The embed works by inserting the Pipe recorder in an existent <div> element identified by its ID attribute. The specific parameters of the recorder need to be declared in a JavaScript object that will further be passed to the PipeSDK.insert() method. Let’s have a look at an example:

<link rel="stylesheet" href="//s1.addpipe.com/2.0/pipe.css"/>
    <script type="text/javascript" src = "//s1.addpipe.com/2.0/pipe.js"></script>
    <div id="custom-id" ></div>
</pre>
<script type="text/javascript">
var pipeParams = {
    size: {
        width: 400,
        height: 330
    },
    qualityurl: "avq/300p.xml",
    accountHash: "2044b9efed932689c4081a749a877413",
    eid: 1,
    showMenu: "true",
    mrt: 120,
    sis: 0,
    asv: 1,
    mv: 0,
    dpv: 0,
    ao: 0,
    dup: 0
};
PipeSDK.insert("custom-id", pipeParams, function(recorderObject) {});
</script>

In the above example, PipeSDK is the main object that is automatically initialized and accessible after pipe.js has loaded in the browser.

In the callback function of PipeSDK.insert() we get our recorder object named in this case recorderObject. On this object we can call the control API and the events API.

As with the HTML embed, you can insertpipe.js and pipe.css anywhere in your page. If you put them at the bottom of the page before the closing tag, it will not block page rendering, but in this case, you will have to move all the PipeSDK code after it.

What We’ll Be Working On

We still have a few things we want to work on before moving this new embed code to production:

Lower the number of HTTP calls
Improved Accessibility
A new feature to allow the user to cancel a mobile upload
Fine-tuned SVG icons

Closing Thoughts

Over the last few weeks, we’ve thoroughly tested the new embed codes in a lot of common scenarios and situations together with a dozen early adopters who had access to the alpha. There are no known issues. If we find any issues in the following period, during your implementation, etc. we are committed to quickly solving them, the 2.0 embed code is here to stay for years to come.

The inner workings of the recording clients remained mostly untouched. Only the delivery mechanism changed which is why we expect no problems with the webcam access/connection/recording mechanism. The types of issues we expect are the kind of problems that arise during implementation.

If you have any suggestions or issues that you encounter let us know at hello@addpipe.com.