Comparing Zoom video JS SDK to 100ms

Zoom is a go-to video conferencing tool for a lot of folks. It caters to a diverse range of use cases with its impressive array of features for all sorts of virtual meetings. Its widespread adoption is a testament to its reliability in facilitating seamless virtual communication, making it a preferred choice for numerous individuals and businesses alike.

However, even with its extensive capabilities, it's crucial to acknowledge that Zoom is not without its limitations. The need for custom code handling to make sure it works, adds a layer of complexity to the integration process. Furthermore, Zoom's reliance on a proprietary implementation of the H.264 video codec and its lack of native support for WebRTC can pose hurdles for those seeking more standardized and open solutions.

In this article, we've compared some of the core areas where developers may encounter challenges when integrating Zoom SDK. We will briefly touch upon how 100ms SDK which solves for these challenges so developers spend less time writing low level handling and build high quality applications.

A Brief Summary: Comparing Zoom SDK and 100ms SDK

Feature	Zoom SDK	100ms SDK
SDK size	75MB	4MB without compressing, more details
Max tiles with audio/video on in a single page	9 tiles	49 tiles
Automatic bandwidth management	Custom code required to handle audio and video track degrade.	Automatic bandwidth management with Simulcast control with 100ms dashboard
Max Quality	720p	1080p
Live streaming	Not available	One SDK for both conferencing and livestreaming
Cloud Recording	Limited customisations available	Flexible recording APIs to compose tracks
State Management	Lacks dynamic state management	Real-time component specific state management
Webhooks	Limited to cloud recording scenarios	Real-time notification updates sent to your server
Analytics	Aggregated analytics limited to a session	Rest APIs to build insights on peer and session level

Zooming into SDK feature gaps

Zoom's SDK poses challenges for developers, requiring intricate code handling. From complex video rendering and specifying coordinates to additional code for features and limitations on 720p video rendering, Zoom introduces complexities. Audio issues on Firefox and Safari, along with managing states, add to the developer's workload.

Rendering video tiles is complex application side code

Zoom allows rendering video streams on a canvas based on changes in the peer video state. Key challenges that developers come across:

• Rendering video requires coordinates for rendering on the canvas based on where you want it to appear. The developer ends up computing dynamic coordinates every time the number of tiles changes/for different screen sizes.
• Rendering on canvas is difficult. With absence of <audio> and <video> elements, it robs the developer of the power of HTML that can easily create dynamic tile layouts.
• Developers need to manually specify the desired video quality for optimal display. The best practice is to reduce quality when tile sizes reduce, and vice-versa.

Specify coordinates on canvas to render video tiles

With Zoom’s SDK, developers must handle intricate handling on application side such as canvas rendering, managing participants( who joined, who left, active speaker, where to place them - here’s the math for canvas to render multiple videos with Zoom, and determining the placement of elements.

Unlike Zoom, 100ms SDK automatically attaches the source to video element wherever it is present on the UI. The element can be customised with CSS.

Additional code for rendering Gallery View, Virtual Background and 720p videos

With Zoom SDK, you have to use SharedArrayBuffers which adds another layer of complexity. Without SharedArrayBuffers, features like Gallery View, Virtual Background, and 720p video are unavailable. See one of the developer’s struggling https://devforum.zoom.us/t/struggling-with-sharedbufferarray-and-cors/87881

Setting up ShareArrayBuffers for rendering multiple videos requires one of the following to be setup:

1. Cross-Origin Isolation
2. Credentialless Headers
3. Using Chrome's Origin Trials

Maximum one 720p video

Zoom SDK restricts rendering only one 720p video on a webpage at a time, making grid-style rendering with higher quality challenging (Zoom Video SDK Documentation).

Audio Challenges on Firefox and Safari Desktop

Getting audio started on Firefox and Safari desktops requires additional logic, as outlined in the Zoom Video SDK documentation. This extra step may pose challenges for developers seeking seamless audio functionality across different browsers.

Managing states across your application

Managing state in a web app can be tricky, but it's crucial for things like keeping track of who's in a room and recording user actions to be used across your app.

With Zoom, you have to maintain who is present in the room, which user has performed which action etc.

• The challenge lies in avoiding inconsistent states, depending on how the state is handled.
• Managing this across various pages and components can be challenging.

The provided sample code by Zoom for maintaining the state in a Zoom application is rather basic and has certain limitations:

• It represents a minimal state that lacks the comprehensive information necessary for rendering a true video conferencing UI e.g who’s screensharing, is there a screenshare present etc.
• It lacks dynamic updates, leaving it up to the developers to listen to the correct events and update states. This often causes race conditions (eg. a user removed called without the number of participants having been updated), often resulting in common user errors - “I’ve joined, but others can’t see me”
• The necessity to pass around elements such as zoomClient, mediaStream, and audio/video tracks wherever they are needed introduces complexity, potentially hindering the maintenance of an efficient codebase.

100ms uses HMSReactiveStore as a store for managing reactive state in a video application. It also sets up the store to notify subscribers about changes immediately upon subscription, exports the store's actions and store, making them available for other parts of the application. This store basically aims to solve the limitations of Zoom state management with:

• Real-time Updates - It ensures you always have upto date information across your app, and don’t have to instrument event handlers or deal with race conditions around this management
• Component-Specific State - Attach a particular piece of state to a component, and it automatically reflects the updated state whenever it changes.
• Managed Updates - Only predefined actions can update the store, ensuring internal management and handling potential race conditions (like consecutive audio/video toggles) with precision.

Finally, making a choice

While Zoom’s client is great for video conferencing, in our opinion, Zoom Video SDK leaves a lot of the heavy lifting to developers for an ideal user experience. In practice, this adds several cycles of error handling to just get close to production quality. Their non-standard webRTC implementation also adds a ceiling to the user-experience that can be achieved in a browser.

Custom video SDKs like 100ms, come baked in with sensible defaults (state management, video layouts using HTML, dynamic quality changes) - that allows developers to go live with fewer errors, and higher quality user experiences. Read more on about

Try 100ms now

We believe in empoworing developers to create rich, real-time applications with simplicity and compatibility abstracting low level code handling. Some of the key features of 100ms Web SDK:

• Priorities: Emphasizes simplicity in code and easy debugging
• Customization: Enables customization of video/audio calls, streaming, and collaborative tools
• API Surface: Small, intuitive, TypeScript-based API surface minimizes documentation needs
• Abstraction Layer: Acts as an abstraction layer, handling real-time application complexities
• Flux Architecture: Guides video call breakdown into actions and states for a well-designed codebase
• hmsActions and hmsStore: Links actions and states, streamlining code and reducing errors
• JavaScript Integration: Seamless integration with React, Angular, VueJS, and Svelte

For more details, do check out Web SDK mental model.. Want to start building? Head to JS quickstart guide.