Using Your Own Video Controls

As of version 4.2.0 of the plugin, you can now hide Pipe's video controls menu (record, stop, play, pause etc) and use your own Bubble buttons and order controls instead.

Important Notes:

  1. It is important to note that if you choose to take this approach, you will be responsible for showing/hiding and/or enabling/disabling your controls as and when appropriate to do so. The plugin now provides events, actions and states that will enable you to do this.

  2. Hiding the Pipe controls and using the related methods and properties apply only to Pipe's desktop recorder (which can also be enabled for Chrome for Android) so again, you will be responsible for hiding your controls when a user is not on a browser/device that supports Pipe's desktop recorder. You can read more about Pipe's browser and device support here.

  3. You can see a demo of most of the relevant features here.

Steps Required

  1. The first step in using your own controls is to hide \pipe's controls. You do this by setting the new "Show menu" property of the plugin to No. This is a dynamic field so you can set it to Yes/No based on a condition such as whether the end-user is on Safari or Chrome, for example.

  2. Add your own buttons/icons to the page for the record, stop recording, play and pause functions. You should bind these to workflows with the corresponding actions for record, stop, play and pause. See the Element Actions page for the various actions that are supported.

  3. Show/hide, enable/disable these controls using conditionals based on the recorders states. For example, you will only want to show/enable your record button/icon when the recorder is ready (which is a state that is now available to check) and you will only want to show/enable the stop (recording) button/icon when the recorder is recording etc. The various states that are available are listed on Element States page.

  4. The Pipe menu also shows a running count of how long a recording has been going on for versus how much time is remaining for the recording. It does something similar for playback time when playing back a recording. If you want to show these, you can add one more text boxes to show the elapsed/remaining/total recording times and/or playback time. These are available as states in seconds (a number state) as well as in the format HH:MM:SS (text). In order to get the recording and/or playback times that will be published to these states, you will need to run actions to get recording and playback times. You can use Bubble's Do ever x seconds event to call these actions at a frequency of your choosing, e.g. every second. Note that this is a call to Pipe and a response back, so there will understandably be a little lag

Check out our demo for a more practical guide.

Last updated