October 2022 Summaries

The text discusses the integration of 100ms Live Streaming SDK with a Flutter app to facilitate scalable, interactive live streaming. It highlights the growing demand for live content and presents a detailed guide on setting up a Flutter project using the 100ms SDK. The integration allows for two-way interactive live streams that can scale to millions of users, unlike traditional video calls. The guide provides step-by-step instructions for setting up the project, including installing necessary packages, configuring permissions, and coding the app's main components such as user data handling, joining a live stream, and UI elements for a live meeting screen. The text concludes with a demo of the project, emphasizing the ease of live streaming from a mobile device and offering links to further resources and documentation.

In a post-pandemic world, companies are focusing on improving virtual learning experiences and addressing challenges in various sectors such as telehealth, fitness, and live classrooms. 100ms is an all-around solution that helps businesses launch fast and learn quickly by handling the technical aspects of their products. The company initially focused on solving problems in the education technology (EdTech) space, with a particular emphasis on designing efficient virtual learning experiences. By understanding the needs of various stakeholders, including C-suite executives, product managers, engineering managers, developers, teachers, students, and parents, 100ms has been able to create tailor-made products that "just work." The company's design system is built with a focus on scalability, reusability, and efficiency. By making smart tradeoffs and choosing opinionated defaults, 100ms aims to provide an enjoyable user experience while minimizing the need for customization.

Jotai is a state management library for React that offers simplicity and robustness. It is based on the concept of atoms, which are independent pieces of state. Jotai also provides utilities to integrate with other state management libraries like Immer, Optics, React Query, XState, Valtio, Zustand, Redux, URQL, and more. The library allows developers to create complex applications while maintaining a clear and manageable state structure.

Hacktoberfest is an annual event by DigitalOcean that promotes open-source software contributions through pull requests, events, and donations. Last year, over 600,000 pull requests were made during the event. 100ms is a cloud platform offering low-code SDKs for building interactive experiences with high-quality audio-video. During Hacktoberfest, developers can contribute to 100ms' open-source repositories on Github and earn limited-edition swag based on the number of closed pull requests. The more contributions made, the greater the rewards.

Svelte has gained popularity due to its simplicity and power. It is based on HTML rather than JavaScript and offers built-in animations and simple global stores. Despite the lack of hooks or a vast community like React, Svelte's unique features make it an attractive choice for developers. This article provides a detailed comparison between React patterns and their Svelte equivalents, covering local state, effects, styling, props, and global state management. The author emphasizes that while some concepts may be different in Svelte, the overall developer experience is excellent.

This tutorial demonstrates how to build a video call application with VueJs and Golang using the 100ms SDKs. The application includes features such as creating rooms, generating auth tokens for joining rooms, and displaying video streams of remote peers. The UI is designed using Tailwindcss. The backend functions are written in Golang and deployed on Netlify. The application can be run locally using the Netlify-CLI. This tutorial provides a comprehensive guide to building a video call app with 100ms SDKs, making it an excellent resource for developers looking to integrate video conferencing capabilities into their applications.

This post provides a comprehensive guide on how to build an Omegle-like app in Flutter using the 100ms Live Audio Video package. The tutorial assumes some prior knowledge of Flutter and covers setting up the 100ms SDK, creating rooms, handling audio and video updates, rendering video on UI, sending chat messages, and switching rooms. It also discusses adding AR filters in a video call using Snapchat-like filters and building a FaceTime app for iOS using 100ms. The post is aimed at developers interested in building real-time audio-video engagement experiences with Flutter.

In this article, the author demonstrates how to build a Clubhouse clone using Parcel, 100ms JavaScript SDK, and Tailwind CSS. The author explains how to set up the 100ms credentials, create a room, and handle various actions such as joining, muting, leaving, and changing roles within the room. They also discuss the potential for additional features like screen sharing, RTMP streaming, recording, and chat using the same infrastructure.

In this blog, we discuss implementing Virtual Background in Android with WebRTC using mlkit selfie segmentation. The feature works best under uniform lighting conditions and requires a high-performance mobile device for smooth user experience. We explore various approaches to achieve virtual backgrounds, such as updating the WebRTC MediaStream, creating another virtual video source from the camera source, and using Android CameraX APIs. However, we find that processing on VideoFrame is necessary for our use case. The most challenging part is getting the VideoFrame out for every frame from WebRTC for processing. We utilize setVideoProcessor API available with VideoSource to achieve this. After segmentation, we use Porter.Duff mode to draw the segmented output with the background image on the Canvas and create an updated VideoFrame. The pipeline takes approximately 40-50ms on a 360p resolution as measured on OnePlus6.

The text discusses the differences between React and Svelte, two popular JavaScript frameworks. It highlights that while Svelte is simpler than React, it lacks some features like Hooks and a large community. However, Svelte offers built-in animations and simple global stores. The article then provides translations of common React patterns to their Svelte equivalents, such as useState, useEffect, styling, props, and state management using context API or reducers. It emphasizes that while some concepts may be different in Svelte, the overall developer experience is excellent due to its simplicity and powerful features like Svelte Stores.

In this tutorial, learn how to build an audio room application similar to Clubhouse using the 100ms iOS SDK. The app features a single predefined room with various roles such as audience, speakerwannabe, speaker, and host. Each role has different permissions and abilities within the room. To follow along, you need basic knowledge of iOS development, Xcode, and Swift. The tutorial guides you through setting up an account on 100ms Dashboard, creating custom roles, joining a room, displaying participants, marking active speakers, adding a mute button, and allowing users to raise their hands to become speakers. By the end of this guide, you will have built a feature-rich audio room application with essential functionalities for an engaging user experience.

In this tutorial, we will be building a Clubhouse clone in React using the 100ms React SDKs. The main features of our application include joining and leaving an audio room, displaying participants' tiles with their respective roles, muting or unmuting audio for individual participants, changing participants' roles, and adding chat functionality. We will be utilizing various hooks and selectors provided by the 100ms React SDKs to manage state and interact with the data store. The final code is available in this GitHub repository.

This article provides a step-by-step guide on how to build a basic Clubhouse-like app using Flutter and 100ms' live audio video SDK. The tutorial assumes some prior knowledge of Flutter and covers setting up the project, initializing 100ms in it, creating roles for listeners, speakers, and moderators, joining a room, displaying peers, muting or unmuting the mic, chatting with everyone in a meeting, removing peers from the meeting, and leaving the room. The final app will have features similar to Clubhouse, including an audio-only chat interface and the ability to mute or unmute oneself during a call.

This article provides a step-by-step guide on how to build a basic Zoom-like app using Flutter and the 100ms live audio-video SDK. The tutorial covers setting up the project, initializing 100ms in it, creating a room, joining a meeting, rendering video tiles, handling raised hands, muting/unmuting audio, toggling video, switching camera, leaving the room, and adding chat functionality. By the end of this blog, readers will have learned how to efficiently use 100ms to build a zoom Application.

Video conferencing is becoming an integral part of various applications, allowing people to interact in real time. Developers are looking beyond traditional video conferencing tools and exploring ways to integrate high-quality video calls into their products. However, the complexity of video conferencing increases with the number of participants, leading to issues such as poor quality video calls, device-specific problems, and network constraints. 100ms aims to address these complexities by abstracting them in APIs, allowing developers to focus on building engaging user experiences. The platform also plans to build a real-time database that supports audio/video infrastructure for seamless synchronization of room states and participants.

The Android SurfaceViewRenderer is an essential component in WebRTC applications that manage video rendering from remote peers. However, it can be challenging to use, especially in dynamic apps with many views. This article discusses common issues and best practices for using the SurfaceViewRenderer effectively. Key points include: ensuring proper initialization with a shared EGL context, releasing resources at the right time, handling multiple video sinks, managing resource limits on different devices, and efficiently managing SurfaceViewRenderers in RecyclerViews. Understanding these concepts can help developers create smooth-running video conference calls using WebRTC technology.

In this tutorial, we will be exploring building a popular streaming platform known as Twitch using React and Tailwind CSS with the aid of 100ms, a cloud platform that allows developers to add video and audio features to all types of applications. The Twitch clone will consist of roles such as Viewer and Stage/Host, each having different permissions and functionalities within the room. We will be using the 100ms SDK and packages to build our application, which include two hooks: hmsActions for performing actions like sending messages or joining rooms, and hmsStore for containing the complete state of the room at any given time. The final app will have features such as video display, screen share, chat section, control bar, and a header/footer tab to give a static Twitch-like display.

In October 2022, a tutorial was published on building a Slack Huddle clone using React. The author begins by explaining the features of Slack's Huddle and then proceeds to guide readers through the process of creating an audio conferencing app similar to Clubhouse or Discord stages with the help of 100ms React SDK and Next.js. The tutorial assumes a basic understanding of React principles, and provides step-by-step instructions on setting up the project, integrating 100ms React Store, joining rooms, muting/unmuting audio, displaying participants, and playing music when only one person is in the room.

This blog post guides developers on how to create a Discord Stage Channel clone using the 100ms and Next.js frameworks. The author explains how to build an audio-only room application that mimics features from Discord Stages, such as listener, speaker, handraise, and moderator roles. The tutorial requires a fundamental understanding of Next.js and React hooks but does not require prior knowledge of WebRTC. By the end of this blog post, developers can build an application similar to the one demonstrated in the demo provided.

WebRTC is a powerful technology that powers live video solutions, and using a TURN server in such applications is crucial. Approximately 20% of WebRTC call connections require a TURN server regardless of the application's architecture. The need for STUN/TURN servers arises due to NAT (Network Address Translation) and firewall restrictions that can hinder direct peer-to-peer connections. STUN is a protocol used to retrieve public IP addresses, while TURN is a protocol that enables relaying data packets between peers when no direct connection is possible. In WebRTC applications, the ICE (Interactive Connection Establishment) framework automatically tries to use STUN and/or TURN servers when direct connections fail. TURN servers are usually referred to as Relay Servers and can be used in various scenarios depending on the connectivity issues faced by peers. To set up a TURN server, one can use coTURN, an open-source TURN server implementation. After installation and configuration, testing the TURN server's functionality is essential to ensure its proper functioning.

Developers can now utilize 100ms's server-side APIs to control and manage active sessions in virtual rooms, enabling them to create "admin-less" environments. These new capabilities are powered by the active room APIs, allowing developers to execute various tasks such as updating peer details, removing peers from a room, changing peer roles, sending messages, and ending sessions. The server-side APIs also improve real-time interactivity by retrieving information about active rooms and associated peers in real-time, enabling better responses based on user activities. Additionally, the latest version of server-side APIs features cleaner API design, unified baseURL for all resources, improved documentation, a Postman collection, and extended pagination.

This guide provides a comprehensive comparison between Agora Video JS SDK and 100ms JS SDK from a technical perspective, with a focus on the migration process. The key differences highlighted include concepts of rooms and authentication, handling peers, managing media, permissions and Pub/Sub, and room configuration. The text also outlines the steps involved in migrating an app to 100ms SDK, including creating a project, refactoring code, rendering audio/video, muting and unmuting audio/video, leaving the room, and managing user roles and permissions. Finally, it provides resources for building production-grade apps with 100ms.

100ms is a scalable and reliable alternative for live video solutions, offering feature-rich SDKs for real-time video conferencing and interactive live streaming. It provides a lightweight package with features like live streaming, chat, virtual background, and more. Compared to Twilio and Agora, 100ms supports up to 200X participants in a single room, allows seamless transition from conferencing to live streaming, and is built for developers with quick-start starter kits. It also offers unique features like Roles for managing permissions and Peer Metadata for persistent state of peers.