Draggable Picture-in-Picture

[ddematheu2]

In many cases, video calls tends to be a focused experience. You schedule a call with your doctor, you join the call, and the call experience covers most of your window. You want the video streams to be big; if you have multiple participants, you want to see as many as possible. But there are cases, where during a call you need to navigate to another page, review a document or sign a contract. You want to continue the call, as the person on the other side is guiding you, but you want you minimize the call experience.

With this scenario in mind, we explored using different methods of minimizing the call experience. Namely:

• React Draggable
• W3C Picture in Picture

We found that W3C PiP didn’t work for our purposes, as the UI Library doesn’t directly expose the video stream or HTML video element. In addition, the W3C PiP, only works for video, meaning any call controls would need to be handled outside of the PiP making for a less desirable experience.

We then went ahead, and test React Draggable. The library was easy to use, we simply placed the entire Call Composite component inside of the draggable wrapper and enabled and disabled dragging depending on the state of the page. If we wanted to have the call experience full screen, we disabled. If we wanted PiP, we enabled.

For the PiP experience, we went a one step further, disabling some buttons to make the experience more compact.

[alkwa-msft]

Closing this discussion due to inactivity. Feel free to re-open if this is still an issue.