Picture in picture throwing errors

[abhijith26]

Expected Behavior

Enter picture in picture on press of a button/ when calling requestPictureInPicure()

Actual Behavior

Not entering , console error => Uncaught (in promise) DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture.

Steps to Reproduce

create an angular app => create vimeo player using sdk => enter pictureInPicture using player.requestPictureInPicture() method after checking player.getPictureInPicture() ( on line player.js:22)

angular version - 10.1.2 vimeo sdk version - 2.15.3

code

player-component.html

<div [attr.data-vimeo-id]="vimeoVideoId" id="playerDiv"></div> <button (click)="triggerPip()">PIP</button> <button (click)="leavePIp()">leave pip</button>

player-component.ts

import { AfterViewInit, Component, OnInit } from '@angular/core'; import player from '@vimeo/player';

@Component({ selector: 'app-vimeo-player', templateUrl: './vimeo-player.component.html', styleUrls: ['./vimeo-player.component.css'] }) export class VimeoPlayerComponent implements OnInit, AfterViewInit {

constructor() { }

public vimeoVideoId; public vimeoPlayer; public isPlaying;

ngOnInit(): void { this.vimeoVideoId = 258498657;

}

ngAfterViewInit() { this.vimeoPlayer = new player('playerDiv', { id: this.vimeoVideoId, pip: true, responsive: true }) this.registerVimeoEventLIsteners();

}

private registerVimeoEventLIsteners() { this.vimeoPlayer.on('play', () => { this.isPlaying = true; console.log('video started'); }) }

public async triggerPip() { try { const isPip = await this.vimeoPlayer.getPictureInPicture(); if (!isPip) { this.vimeoPlayer.requestPictureInPicture().then(() => { console.log('pip success'); }).catch((err) => { console.log(err); }) } } catch(err) { console.log(err); } }

public async leavePIp() { try { const isPip = await this.vimeoPlayer.getPictureInPicture(); if (isPip) { this.vimeoPlayer.exitPictureInPicture(() => { console.log('leaving pip'); }).catch((err) => { console.log('errro'); }) } } catch (err) { console.log(err); } } }

[bdougherty]

Have you tried removing the this.vimeoPlayer.getPictureInPicture() call? It might be losing the user gesture because that requires a round-trip postMessage. There shouldn't be any issues with requesting PiP while it's already open.