music & video

Dolby.io: A platform for streaming and communication app development

UI components for embedding decades of Dolby sound and sight technology

2021

Prologue

Think of the decades of Dolby sight and sound technology contained in intuitive tools optimised for hyper-efficient app development. That’s the idea behind Dolby.io – a new developer platform by Dolby Labs that enables businesses to build high-quality real-time streaming, communications, and media processing solutions. The extraordinary Dolby experiences: real-time content delivery with near-zero latency, spatial and dynamic audio are now available in an intuitive and affordable subscription model.

During our cooperation with the music industry pioneer, Miquido delivered Android and iOS SDKs allowing developers to implement high-quality audio and video features in mobile, web and desktop applications. The UIKit, design system and a sample event app developed by our team complemented the company’s offer with all-in-one conference app development solutions. Read on and discover how we assisted Dolby in entering the next chapter of live audio and video streaming advancements.

Native-like performance

2 project phases

Already completed

80%

Unit test coverage

Challenges

Balancing different user needs

Audio and video solutions designed by Dolby are used in world-class enterprises, such as SoundCloud, Mural, Amazon Prime Video, NBC, CBS and NASA, and across multiple industries – including entertainment, social media, collaboration, e-learning or telehealth. Miquido aimed to create universal UI components with built-in logic for the most widely used video call features while tailoring the solution to specific industry needs. Therefore, it was crucial to carefully select the most popular patterns of video conferencing and streaming applications and re-design them. We prioritised delivering universal yet customisable UI components that can be easily embedded into any mobile, web or desktop applications.

Efficient development for web, mobile and desktop

The project scope included developing voice/video calls, recording and messaging app features for web, desktop and mobile, and preparing comprehensive technical documentation. Therefore, it was crucial to balance the extensive work scope, time, and budget while ensuring top-notch quality. Throughout our cooperation with Dolby, we prioritised strict adherence to the tight schedule of releases based on the detailed roadmap. Therefore, our mobile development team had to choose a solution enabling the dynamic, time-effective and faultless development of modules for multiple platforms.

Perfect user & developer experience

Extensive target groups covering individual and business users are always a hard nut to crack. On the one hand, Dolby.io aims at other businesses that want to develop their own mobile and web applications. On the other – the ultimate goal of conference apps powered by Dolby is to delight millions of users. Therefore, we had to take care of excellent user and developer experience. As a result, each component designed, built and implemented by the Miquido team was optimised to streamline the development process for Dolby.io clients while delivering value for their users.

Video call controls – Documentation

Default component

Icon button component has a Greyscale 600 color used as a background, 6 points corner radius, and contains only of an icon. It is used to activate various functions of the application.

01. Types

We distinguish 14 different types of icon buttons – each one represents a different function of the app, such as rotating the camera, turning on/off the microphone, recording, etc.

Solution

Identifying universal user needs

Even though Dolby.io’s clients come from different industries, voice and video call technologies address similar challenges. In the first phase of the project, the Miquido experts focused on identifying the business and user needs behind the conference, collaboration or event software development. The established goals included increased engagement, improved attention, and reduced communication fatigue, and were immediately addressed by tangible solutions: enhancing real-time communication through multi-party voice and video calls, voice processing with dialogue levelling, activity detection, and static noise and echo suppression.

Leaving space for the app personalisation

Knowing that Dolby.io wants to provide comprehensive solutions for companies across different industries, the Miquido development team suggested creating UIKit for React with customisable video call components. As a result, companies can adjust and embed Dolby Lab solutions into new or existing applications with minimal effort. The package consists of elements with built-in logic for the most widely used video call features – ready to use and adaptable to platform or company-specific needs thanks to the well-thought design system.

Cross-platform development with React Native

React Native proved an unequivocal help while developing web, mobile and desktop video and audio streaming software modules. The open-source, cross-platform framework allows businesses to use the same codebase for iOS, Android, web and desktop, saving development time and reducing costs. Covering many platforms with one code is a challenging task. Features like image sharing, camera, and activity feed work differently on each platform. However, the frontend and mobile development teams at Miquido delivered all components right on time. As a result, choosing a cross-platform framework enabled Dolby.io to quickly develop native-like app features for multiple platforms and dynamically expand their business offer.

Let’s work together

Services & tech stack

Services

Cross-platform development

Web development

Android & iOS development

UX & UI Design (Design System)

Tech stack

Typescript, React Native

Typescript, React

Kotlin, Swift

Figma

TestCafe

Results

An Interactive SDK created with React Native

Access to Dolby Labs audio & video technologies for users

The goal of Dolby.io is to deliver accessible, standardised tools to build conference applications using Dolby Labs-powered audio and video technologies. In the first phase of the project, the Miquido team created a comprehensive package of ready-made solutions enabling the seamless implementation of the functionalities such as:

multi-party voice and video calls,
notifications, including subscribe, unsubscribe, invite, invite with permissions and decline options,
voice processing with dialog levelling and activity detection,
static noise and echo suppression,
Dolby.io Spatial Audio, powered by Dolby Atmos technology,
optimised device management,
customisable streaming and recording layouts,
metadata and connection statistics from conferences,
client SDKs for web, mobile, desktop, and server applications.

UIKit with hands-on design system

Effective development and customisation of conference applications

In the second phase of the project, we focused on developing the UIKit for React
with ready-made, customisable video call components that can be easily embedded into an existing application. The package includes components necessary to construct the core infrastructure of conference iOS, Android, desktop and web apps, including:

Providers: The main components for initialising integration with Dolby.io Communications APIs and state management,
Hooks: Functions responsible for video call logic of video call applications,
UI components: Components that cover the most popular patterns of video conferencing applications,
Video call components: UI components with built-in logic for the most widely used video call features.

To provide Dolby.io’s clients with the ability to personalise components, our design team created a comprehensive design system that covers the rules regarding colours, graphic elements, navigation, interfaces, forms, the size of components and their dependencies. The extensive system based on refined, reusable elements allows Dolby.io’s users to save time & costs while working on new digital products while strengthening visual identity and establishing good design practices within an organisation.

Sample event app

Showcase of Dolby.io solutions that boosts sales

The last project phase aimed to prepare an open-source sample app demonstrating Dolby.io solutions for event applications. An interactive demo prepared by the Miquido team shows all the major features that can be implemented using the SDK and UIKit, including Dolby-quality audio and video, ultra-low latency, screen share and recording. The showcase video meetings app perfectly visualises the comprehensive solution delivered by Miquido and successfully promotes Dolby.io’s role in revolutionising the virtual events industry.