` 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](https://addpipe.com/docs/introduction/embedding-your-first-recorder/). ### External CSS File The new 2.0 embed code loads an [external CSS file](https://cdn.addpipe.com/2.0/pipe.js) 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](https://addpipe.com/docs/recording-client/change-size-colors/). ### Resources Are Loaded Independently The loading of `pipe.js` and`pipe.css`is 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. ### 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 `

` 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](https://addpipe.com/docs/javascript/js-api-v1/#javascript-control-api-v10-desktop-recorder) and [events API](https://addpipe.com/docs/javascript/js-api-v1/#javascript-events-api-v10-desktop-recorder) 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: 1. 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 `

` in which it was first inserted, so the `

` can be reused to re-insert the recorder in the page 2. 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 3. The event function `onRecorderReady()` has been renamed to `onReadyToRecord()` 4. The event functions `onDesktopVideoSelected()` and `onDesktopVideoSubmitted()`have been combined in a single event function named `onDesktopVideoUploadStarted()` 5. 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 6. 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](https://addpipe.com/docs/introduction/requirements/). ### 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: ``` ``` You can insert`pipe.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 `

` 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: ```

``` 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.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: 1. Lower the number of HTTP calls 2. Improved Accessibility 3. A new feature to allow the user to cancel a mobile upload 4. 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 [contact us](https://addpipe.com/contact/).