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.
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
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.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 load
pipe.js at the end of the page to prevent any page rendering/dom loading delay.
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
PipeSDK.insert()control API methods.
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
- The event function
onRecorderReady()has been renamed to
- The event functions
onDesktopVideoSubmitted()have been combined in a single event function named
- For the Mobile Events API, the event functions
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.
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.
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:
You can insert
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 embed works by inserting the Pipe recorder in an existent
PipeSDK.insert() method. Let’s have a look at an example:
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 insert
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
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 firstname.lastname@example.org.