← All changelog entries

Slight change to how the 2.0 HTML code inserts the recorder into the page

Improvement
Alexandru

Previously, with the 2.0 HTML code, the recording client was inserted using a newly created <div> element with an id attribute matching the id of the <piperecorder> tag.

This was problematic because:

  1. you ended up with 2 HTML elements with the same id on the page
  2. any width/height properties on the initial <piperecorder> tag would take up space separate from the space occupied by the actual recording client. This made any effort to avoid layout shift impossible.

We are now inserting the recording client HTML code directly inside the <piperecorder> tag.

This is how the HTML structure looked previously after insertion:

<div id="custom-id">
    <div id="pipeRecordRTC-custom-id"></div>
</div>
<piperecorder id="custom-id">

This is how it looks now:

<piperecorder id="custom-id">
    <div id="pipeRecordRTC-custom-id"></div>
</piperecorder>

The 2.0 JS insertion mechanism remains unchanged as it is similar to the new 2.0 HTML mechanism.

A documentation article on how to avoid layout shift will also be available soon.