Call Components

[Simbaclaws]

Summary

Would love to see some sort of call UI

Detailed Description

Dear Preline team,

Currently at my dayjob, we work with an application that uses communication calling from azure sdk. This is a library from microsoft which has all sorts of call like features. Microsoft has it's own UI library which is currently written in react and react-native called Fluent UI, which is their Design System.

I was hoping that preline would have their own calling components, so that developers can implement their calling solution into a calling ui made with preline. In other words, I would like to request a feature for having call UI be a part of preline.

Here is some inspiration (Microsoft's Fluent UI Design System): storybook communication ui react library communication ui figma design kit for communication ui example web app communication ui

But there are obviously many places where you can find different calling UI's. I hope this can be taken into consideration.

Use Cases

This would allow developers to use different video sdk libraries to build their own video experiences using preline components.

It would be nice to have features such as:

• screen sharing button
• microphone mute button
• end call button
• start call button
• video element
• username caption
• transcriptions
• camera switch button
• join room or meeting button or dropdowns
• before call start permission check screen (browser permissions)
• after permission check screen a camera and microphone selection and preview screen (with start call button)

Word of caution: In some video sdk's there are some issues getting the video to get setup correctly. Sometimes the camera or microphone can still be in use before setting up the call. They should be checked using the following: MediaDevices Browser API

Specifically in some cases when a call is abruptly stopped somehow, by for example navigating to a different page. This could cause the camera or microphone to become locked. It could also be that the camera or microphone is currently being used by other applications on the device of the user.

This could cause errors such as 480 errors from microsoft to appear.

Specifically you'll want to open up a device, go through all of it's tracks, close them and then also look for the onended callback to properly dispose any tracks before setting up a new call. This could also mean that because the browser does not natively support a feature of waiting for the camera to be released from the OS and drivers, that you might need to build in a timeout or promise of some sort in-between. This could obviously, based on hardware, differ...