Integrating Picture-in-Picture with Vonage Video Web Integrating Picture-in-Picture with Vonage Video Web

Integrating Picture-in-Picture with Vonage Video Web

Vonage API Support

Objective

Picture-in-Picture (PiP) mode enhances user experience by allowing videos to be viewed in a floating window while users interact with other applications on supported browsers. Here’s a sample code snippet demonstrating this integration.

Applies To

  • Video API
  • JS SDK

Procedure

This code snippet shows how to use the Vonage Video API to create a video session and then enable Picture-in-Picture mode with a button click.

<html>
<body>
<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

<h3>Picture in picture test</h3>
<div id="player" style="width: fit-content;"></div>
<button id="pipButton">Open Picture-in-Picture window</button>

<script>
const API_KEY = ''; // Paste your API key here
const SESSION_ID = ''; // Paste your session ID here
const TOKEN = ''; // Paste your token here
const player = document.querySelector('#player');
const session = OT.initSession(API_KEY, SESSION_ID);
const publisher = OT.initPublisher(player, { insertMode: 'append' });

session.connect(TOKEN, () => {
session.publish(publisher);
});

session.on('streamCreated', (event) => {
session.subscribe(event.stream, player, { insertMode: 'append' });
});

if (!document.pictureInPictureEnabled) {
console.log("Your browser cannot use picture-in-picture right now");
}

pipButton.addEventListener('click', async () => {
const pipWindow = await documentPictureInPicture.requestWindow({
width: player.clientWidth,
height: player.clientHeight,
});

[...document.styleSheets].forEach((styleSheet) => {
try {
const cssRules = [...styleSheet.cssRules]
.map((rule) => rule.cssText).join('');
const style = document.createElement('style');

style.textContent = cssRules;
pipWindow.document.head.appendChild(style);
} catch (e) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = styleSheet.type;
link.media = styleSheet.media;
link.href = styleSheet.href;
pipWindow.document.head.appendChild(link);
}
});
pipWindow.document.body.append(player);
});
</script>
</body>
</html>

Related to:

Video API

Articles in this section