Skip to main content

Picture in Picture

Picture-in-Picture API allows you to render participant's video as a floating tile outside of the current page/app's context.

Usage​

Initialise
Core
​

Check browser support​

Use meeting.participants.pip.isSupported to check if the browser supports Picture-in-Picture. The property will return a boolean value.

Call meeting.participants.pip.init() to activate PIP mode. Optionally you can pass height and width the configure the size of the PIP tile

const { meeting } = useDyteMeeting();

meeting.participants.pip.init({
  width: 360,
  height: 360,
});

Enable / Disable
Core
​

Use meeting.participants.pip.enable() to enable PIP mode if disabled or meeting.participants.pip.disable() to disable PIP mode if enabled.

Components​

Toggle Button
UI Kit
​

Our UI Kit contains a button that can enable or disable the PIP

<dyte-pip-toggle id="pip-toggle" />
<script>
  const toggle = document.getElementById('pip-toggle');
  toggle.meeting = meeting;
</script>