{"id":383481,"date":"2024-06-29T04:56:11","date_gmt":"2024-06-29T04:56:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=383481"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=383481","title":{"rendered":"\u00abLook what I have!\u00bb \u2014 how we made the feature of screen sharing in the mobile video conferencing app<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\"User
User flow<\/figcaption><\/figure>\n

Hi\u00a0Habr!<\/p>\n

I would like to share the experience of how we implemented screen sharing feature in our app, the difference in implementation for the end-user between iOS and Android and usage compared to other feature in our app. There will be a lot of cool pictures and insights.<\/p>\n

Introduction<\/h3>\n

I am a product manager working on the development of a mobile video conferencing application. Since the world has become a bit isolated, video conferencing apps like Zoom, Teams and Google Meet have become more popular. It worked for us and we found our niche and users.\u00a0<\/p>\n

So, we are smaller, but we have made an excellent and stable media server which includes: a good video resolution, an up-to-date video codec, good audio quality and a good UI. What’s next? Look at the needs of users and narrow the gap from competitors! I began to study the needs of users and saw a large number of requests for the screen sharing feature.\u00a0<\/p>\n

Who are our users? We have very different user segments — IT employees, healthcare workers, students in educational\u00a0institutions, students in sports schools (I’m talking to you who answered our survey that\u00a0you\u00a0use\u00a0our app in dojo). Our users want to show something they have on their phone,\u00a0whether it is\u00a0their homework, photos, notes, etc.<\/p>\n

So, the feature is cool, it’s time to implement it! We groomed this feature with the team and surprisingly it turned out to be quite fast in\u00a0terms of\u00a0implementation. I researched how it\u00a0was\u00a0implemented by\u00a0our\u00a0competitors and we began to create\u00a0design.<\/p>\n

UI and Flow<\/h3>\n
    \n
  1. \n

    Where to place the feature control?<\/p>\n<\/li>\n<\/ol>\n

    It depends on the\u00a0UX\u00a0of the app. We\u00a0have primary and secondary controls,\u00a0and\u00a0decided to separate the implementation on mobile phones and tablets. On mobile phones, we put a feature in the «More menu». On the tablets\u00a0it\u2019s\u00a0a separate primary control.<\/p>\n

    \"Mobile
    Mobile view<\/figcaption><\/figure>\n
    \"Tablet
    Tablet view<\/figcaption><\/figure>\n
      \n
    1. \n

      What system permissions do we need?<\/p>\n<\/li>\n<\/ol>\n

      We need screen sharing permissions and they are works a bit different for iOS and Android. Useful links\/guidelines how screen share works on\u00a0Android<\/u><\/a>\u00a0and\u00a0iOS<\/u><\/a>.\u00a0On Android, we have to open the system settings screen for the user to switch the toggle. On iOS, we show a standard recording screen. The text at the top of the screen cannot be customized.<\/p>\n

      \"Android
      Android permission flow<\/figcaption><\/figure>\n
      \"iOS
      iOS permission flow<\/figcaption><\/figure>\n
        \n
      1. \n

        What will the indication of the active screenshare look like and how to stop it?<\/p>\n<\/li>\n<\/ol>\n

        It may seem strange at first glance, but we do not show the incoming video from cameras to the user when he has an active screenshare. There are several reasons why:<\/p>\n