As the sole Real-Time Communication (RTC) and Real-Time Interaction (RTI) vendor at the event, ZEGOCLOUD unveiled its ... of generative AI in improving video production efficiency and reducing ...

Leading the AI Charge: ZEGOCLOUD Debuts Innovative Digital Human Platform at Cloud Expo Asia Singapore

To check out app updates in real-time, developers ... for viewers during video playback. Bitmovin’s dedicated Flutter Player SDK These features include live and on-demand video playback, UI customization, adaptive streaming, content protection with ...

Streamlining Video Playback: Unveiling Bitmovin’s Player SDK for Flutter

Currently, Kasamba doesn’t offer video readings. However, you can opt for live chat ... who prefer written communication. These sessions are often conducted in real-time and offer a transcript ...

5 Best Online Psychic Reading Sites for Phone, Chat, & Video Calls

It was once cancelled by a pandemic. It's been postponed by firestorms and now even the diamond is gone, but Denim endures. Organizers wanted to extend an open invitation to firefighters and other first responders after the summer's devastating firestorm ...

VIDEO: Denim goes off the diamond

VideoCX.io built Multiuser Video Conferencing Workflow using Amazon Chime SDK, a set of real-time communications ... chat, file sharing, and screenshot capture, if a process can be done in a physical meeting, then it should be possible on a video call.

VideoCX.io adds video conferencing to their Video Banking suite with Amazon Chime SDK

Market Overview: The voice chat API market has witnessed significant growth in recent years, driven by the increasing demand for real-time communication solutions in various industries.

Voice Chat API Market 2023-2030 Demands and Value Predication | MirrorFly, Twilio, Plivo, EnableX

The plan also includes affordable housing and housing aimed at seniors and students. Wooldridge stressed that the area needs to be for everyone, not just those who live there. "We need to be sure that the public is getting benefit out of this, and we're ...

VIDEO: New Kelowna waterfront development labelled 'underwhelming'

VideoCX.io (earlier known as WorkApps) launches multiuser video conferencing workflows for the BFSI industry with Amazon Chime SDK

The Band app is a standout in the world of group communication ... You can text chat, video call, and voice call other members. You can even call people on a real phone number with a nominal ...

10 best messenger apps and chat apps for Android

ZEGOCLOUD

zegocloud

Introduction CallKit is a new framework introduced by Apple on iOS10 in 2016 to improve the VoIP experience. This article will explain how to use and to build a Video Call App with a native calling experience. CallKit ZEGOCLOUD Demo download Source code download What is ZEGOCLOUD? is a global cloud communication service provider that was founded in June 2015. It provides high-quality audio/video communication and IM services for more than 4,000 clients around the world. ZEGOCLOUD What is CallKit？ CallKit is a framework that aims to improve the VoIP experience by allowing apps to integrate with the native phone UI. By adopting CallKit, your app will be able to: Use the native incoming call screen in both the locked and unlocked states. Start calls from the native phone app’s Contacts, Favorites, and Recents screens. Interplay with other calls in the system. CXProvider Your app will use to report any out-of-band notifications to the system. These are usually external events, such as an incoming call. CXProvider When such an event occurs, creates a to notify the system. CXProvider CXCallUpdate CXCallUpdate is used to encapsulate new or changing call-related information. The properties included in this class are: CXCallUpdate Caller's name whether a call is video or audio-only. CXAction is an abstract class that represents the phone's action. For different , CallKit will provide different implementations. CXAction action CXAction For example, outgoing calls are represented by , and is used to answer incoming calls. is identified by a unique . CXStartCallAction CXAnswerCallAction Action UUID When the system wants to notify the app that it has received an event, it will inform it in the form of . CXAction The app communicates with through , this protocol defines the life cycle event methods of , and calls . CXProvider CXProviderDelegate CXProvider CXAction CXCallController Apps use to let the system know about user-initiated requests, such as "call" actions. The biggest difference between and is that the job of is to notify the system, while makes requests to the user on behalf of the system. CXCallController CXProvider CXCallController CXProvider CXCallController uses transactions when making requests. Transactions are represented by , which contains one or more instances. sends the transaction to the system, and if everything is OK, the system will respond with the corresponding to the . CXCallController CXTransaction CXAction CXCallCotroller CXAction CXProvider Incoming Calls The following will explain how to use CallKit to implement the Incoming Call function. When an incoming call comes in, the App will create a and send it to the system through . CXCallUpdate CXProvider The system will issue an to its service. incoming call When the user answers the call, the system will send a to the . CXAnswerCallAction CXProvider App can respond to this animation by implementing the corresponding protocol method. CXProviderDelegate ProviderDelegate Create a file in your project and add the following code: ProviderDelegate.swift import AVFoundation
import CallKit

class ProviderDelegate: NSObject {
  // 1.
  fileprivate let callController = CXCallController()
  fileprivate let provider: CXProvider

  init(callManager: CallManager) {
    // 2.
    provider = CXProvider(configuration: type(of: self).providerConfiguration)

    super.init()
    // 3.
    provider.setDelegate(self, queue: nil)
  }

  // 4.
  static var providerConfiguration: CXProviderConfiguration {
    let providerConfiguration = CXProviderConfiguration(localizedName: "ZEGOCall")

    providerConfiguration.supportsVideo = true
    providerConfiguration.maximumCallsPerCallGroup = 1
    providerConfiguration.supportedHandleTypes = [.generic]
    if let iconMaskImage = UIImage(named: "IconMask") {
        providerConfiguration.iconTemplateImageData =  iconMaskImage.pngData()
   }
   roviderConfiguration.ringtoneSound = "Ringtone.caf"
    return providerConfiguration
  }
} needs to deal with and , so keep two references to both. ProviderDelegate CXProvider CXCallController Initialize with a , which will be defined as a static property later. is used to define the behavior and capabilities of the call. CXProvider CXProviderConfiguration CXProviderConfiguration To be able to respond to events from , you need to set its delegate. CXProvider In this app, supports video call, and phone number handling, and limits the number of call groups to 1. For more customization, please refer to the . CXProviderConfiguration CallKit documentation Just below the configuration, add the following helper method: func reportIncomingCall(uuid: UUID, handle: String, hasVideo: Bool = false, completion: ((NSError?) -> Void)?) {
  // 1.
  let update = CXCallUpdate()
  update.remoteHandle = CXHandle(type: .phoneNumber, value: handle)
  update.hasVideo = hasVideo

  // 2.
  provider.reportNewIncomingCall(with: uuid, update: update) { error in
    if error == nil {
        print("calling")
    }
  }
} This utility method allows the App to report an incoming call through the API. The code is explained as follows: CXProvider Prepare to report a event to the system, which contains all call-related metadata. call update Call the method of to notify the system of an incoming call. reportIcomingCall(with:update:completion:) CXProvider CXProviderDelegate The next step is to ensure protocol conformance. Still in , declare a new extension to conform to : ProviderDelegate.swift CXProviderDelegate extension ProviderDelegate: CXProviderDelegate {
  func providerDidReset(_ provider: CXProvider) {
    print("Provider did reset")
} specifies only one required method, . The provider invokes this method when reset, giving your app the opportunity to clean up any ongoing calls and revert to a clean state. In this implementation, you’ll terminate the ongoing audio session and dispose of any active calls. CXProviderDelegate providerDidReset(_:) Open AppDelegate.swift and start by adding a new property to the class: lazy var providerDelegate: ProviderDelegate = ProviderDelegate(callManager: self.callManager) The provider delegate is ready for use! Add the following method to : AppDelegate.swift func onReceiveCallInvited(uuid: UUID, handle: String, hasVideo: Bool = false, completion: ((NSError?) -> Void)?) {
  providerDelegate.reportIncomingCall(uuid: uuid, handle: handle, hasVideo: hasVideo, completion: completion)
} This method lets other classes access the provider delegate’s helper method. The final piece of the puzzle is hooking up this call to the user interface. Open CallsViewController.swift, which is the controller for the main screen of the app. Find the empty implementation of unwindForNewCall(_:) and replace it with the following code: @IBAction private func unwindForNewCall(_ segue: UIStoryboardSegue) {
  // 1.
  let newCallController = segue.source as! NewCallViewController
  guard let handle = newCallController.handle else { return }
  let videoEnabled = newCallController.videoEnabled

  // 2.
  let backgroundTaskIdentifier = UIApplication.shared.beginBackgroundTask(expirationHandler: nil)
  DispatchQueue.main.asyncAfter(wallDeadline: DispatchWallTime.now() + 1.5) {
    AppDelegate.shared.displayIncomingCall(uuid: UUID(), handle: handle, hasVideo: videoEnabled) { _ in
      UIApplication.shared.endBackgroundTask(backgroundTaskIdentifier)
    }
  }
} Extracts the properties of the call from NewCallViewController, which is the source of this unwind segue. The user can suspend the app before the action completes, so it should use a background task. Ending the Call Next, I will explain how to end a call. This App will support two ways to end a call: The native interface ends the call. End the call in the app. Notice the difference between steps and . When the user ends the call from the in-call screen (A), the system automatically sends a to the provider. A B CXEndCallAction However, if you want to end a call using Hotline (B), it’s your job to wrap the action into a transaction and request it from the system. Once the system processes the request, it will send the back to the provider. CXEndCallAction CXProviderDelegate However it supports ending calls, your app has to implement the necessary method for it to work. Open and add the following implementation to the class extension: CXProviderDelegate ProviderDelegate.swift func provider(_ provider: CXProvider, perform action: CXEndCallAction) {
  action.fulfill(withDateEnded: Date())
} Now add the following methods to the class: func end(call: Call) {
  // 1.
  let endCallAction = CXEndCallAction(call: call.uuid)
  // 2.
  let transaction = CXTransaction(action: endCallAction)

  requestTransaction(transaction)
}

// 3.
private func requestTransaction(_ transaction: CXTransaction) {
  callController.request(transaction) { error in
    if let error = error {
      print("Error requesting transaction: \(error)")
    } else {
      print("Requested transaction successfully")
    }
  }
} Create a . Pass in the call’s to the initializer so it can be identified later. CXEndCallAction UUID Wrap the action into a transaction so you can send it to the system. Invoke from the call controller. The system will request that the provider perform this transaction, which will in turn invoke the delegate method you just implemented. request(_:completion:) Did You Know? 👏 and is the biggest encouragement to me Like Follow to learn more technical knowledge Follow me Thank you for reading :) Learn More This is one of the live technical articles. Welcome to other articles: All Live Streaming Features in One Article Build a Clubhouse Clone App with Android and ZEGOCLOUD Also published . here

How To Implement a Video Call App Using iOS CallKit and ZEGOCLOUD

The live streaming market is booming As an industry, live streaming is already worth billions of dollars and it’s only expected to grow. According to various projections, including one by Grand View Research, the live streaming industry is expected to climb from billion in 2021 to almost billion in 2028. That’s a projected three-fold increase over seven years! $70 $224 How to get involved in the live streaming market? With the rapid development of the live streaming industry, many technology companies have been derived to serve the live streaming industry by providing mature technologies to help users quickly build their own live streaming apps.
Here I will introduce how to quickly build your own live streaming app by using ZEGOCLOUD's ZEGOLive SDK. What features does ZEGOLive SDK provide? The ZEGOLive SDK provides all features that required by a live streaming app, such as creating and join a live stream room, co-hosting, face beautification, audio effects, virtual gifting, sending bullet-screen messages, and more. And all these features can be tried out by simply experiencing and integrating ZEGOCLOUD's . Demo App for Live Streaming The following table shows ZEGOLive SDK's features: How to use ZEGOLive SDK step 1. Create a ZEGOCLOUD account Create an account in . ZEGOCLOUD Official step 2. Create a new project Create a project in . ZEGOCLOUD Admin Console step 3. Understand the process The following diagram shows the basic process of creating a live room and a participant (user B) playing a stream published by the host (user A). step 4. Integrate the ZEGOLive SDK To integrate the SDK, do the following: Download the , and copy the folder to your project directory (create a new project if you don't have an existing project). Sample codes ZEGOLive Add the file to your project directory. Podfile pod 'ZIM'
pod 'ZegoExpressEngine' Open Terminal, run the command. install pod install step 5. Add permissions Permissions can be set as needed. Open Xcode, select the target object, and then click . Info > Custom iOS Target Properties Click the to add camera and microphone permissions. Add button (+) Privacy-Camera Usage Description Privacy-Microphone Usage Description step 6. Initialize the ZEGOLive SDK To initialize the ZEGOLive SDK, get the instance, pass the AppID of your project. RoomManager // Initialize the SDK. We recommend you call this method when the application starts.
// YOUR_APP_ID is the AppID you get from ZEGOCLOUD Admin Console. 
RoomManager.shared.initWithAppID(appID: YOUR_APP_ID) { result in
    // Callback for the result of init. 

}; To receive callbacks, set the corresponding to , or call the method to listen for and handle event callbacks as needed. delegate self addUserServiceDelegate RoomManager.shared.roomService.delegate = self
RoomManager.shared.userService.addUserServiceDelegate(self)
RoomManager.shared.messageService.delegate = self step 7. Log in To access the ZEGOLive service, you must log in first. <div class="mk-warning"> For business security, you will need to provide a token for the ZIM SDK to validate the login privilege. For details, see . Authentication For debugging, you can refer to our to generate tokens on your app client.
</div> Sample code let userInfo = UserInfo("YOUR_USER_ID", "YOUR_USER_NAME", .participant)
let token: String = "YOUR_TOKEN"
RoomManager.shared.userService.login(userInfo, token) { result in  
     // Callback for the login result. 

} step 8. Start the local video preview Before creating a live room to start live streaming, you can call the method to start the local video preview. playVideoStream // The [userID] can be used to specify which user's view you want to view. 
// To preview your own local video view, pass in your userID.
// streamView view is a view for the local video preview.
RoomManager.shared.deviceService.playVideoStream(userID, view: streamView) step 9. Create/Join a live room You become a after creating a live room, and you can take a seat and start live streaming upon creating. Host You become a after joining a live room, and you can watch the live streaming and be a to interact. Participants co-host <div class="mk-warning"> To prevent the participants from speaking directly without co-hosting, you will need to provide a Token for the RTC SDK to validate whether you have the privileges to create or join a room. For details, see . Use Tokens for authentication This Token can be the same as the Token you provided for login.
</div> To create a live room, call the method. createRoom RoomManager.shared.roomService.createRoom("YOUR_ROOM_ID", "YOUR_ROOM_NAME", token) { result in
    // Callback for the result of create a live room. 
           
} After a live room is created, to start live streaming, the host will need to call the method to speak. And the SDK automatically publishes the streams when the host takes a seat successfully. takeSeat RoomManager.shared.userService.takeSeat { result in
   // Callback for the result of take a seat. 

} To join a live room, call the method. joinRoom RoomManager.shared.roomService.joinRoom("YOUR_ROOM_ID", token) { result in
   // Callback for the result of join a live room. 

} After joining a live room, for a participant to watch the live streaming, he will need to call the method to play the host's published streams. playVideoStream // The [userID] can be used to specify which user's view you want to view. 
// You can get the userID of the host in room info. 
// streamView is the view to be displayed.
RoomManager.shared.deviceService.playVideoStream(userID, view: streamView) step 10. Send/Receive text messages To send text messages in the room, call the method. sendTextMessage RoomManager.shared.messageService.sendTextMessage("MESSAGE_CONTENT") { result in
    // The result of send messages. 
} To receive the text messages, listen for the callback . receiveTextMessage func receiveTextMessage(_ message: TextMessage) {
    // Implement the handling logic when receiving the text messages.
} step 11. Renew a Token 30 seconds before a Token expires, the SDK sends out a notification through the callback. onRoomTokenWillExpire Upon receiving this callback, you need to get a new Token from your app server first, and then pass the new token to the method. renewToken func onRoomTokenWillExpire(_ remainTimeInSecond: Int32, roomID: String?) {
   let token: String = xxxxx ///new token
   RoomManager.shared.roomService.renewToken(token, roomID: roomID)
        
} step 12. Leave a live room Before the host leaves the live room, he will need to call the to leave the seat first. And the SDK automatically stops publishing streams when the host leaves the seat successfully. leaveSeat RoomManager.shared.userService.leaveSeat { Result in
     // Callback for the result of leave a seat. 
} To leave the live room, call the method. And the SDK stops all the stream publishing and playing operations simultaneously. leaveRoom RoomManager.shared.roomService.leaveRoom { Result in
     // Callback for the result of leave a live room. 
} step 13. Log out To finish the ZEGOLive service, call the method. logout RoomManager.shared.userService.logout() If you want to learn more about live broadcast-related technologies. You can follow me or send me email Email:zegoclouddev@gmail.com Also published here.

How to Build a Live App in 10 Minutes with ZEGOCLOUD's ZEGOLive

TTS Avatars are digital characters that use AI to convert written text into human speech. They can be personalized and adjusted to match an application's personality or brand. TTS Avatars technology uses algorithms to create and speaking and dialects. They are ideal for businesses and global enterprises. natural-sounding voices communicating emotions multiple languages This article briefly overviews the TTS market and industry and explores the use cases and monetization opportunities. TTS Avatar Technology Industry The COVID pandemic has significantly increased demand for TTS Avatar and services, especially in the . telehealth industry By publishing explainer videos and audio manuals, this technology encourages patients to engage more actively in their health and promotes awareness of health guidelines. Because of developments in neural networking and customized voice cloning, the TTS Avatar business will grow significantly in the future. These developments will accelerate with the recent introduction of language prediction model. Open AI's GPT 3 Even SMEs are expected to show interest in TTS technology due to its cost-effectiveness. The market is becoming more competitive, with major companies like Google, Amazon, and IBM investing heavily in this field. According to recent studies by , the worldwide TTS market is predicted to grow at a steady CAGR of 14.7%, from USD 2.0 billion to USD 7.06 billion by 2028. Emergen Research The entire is also expected to reach USD 31.82 billion by 2025, with the combination of voice recognition and virtual reality (VR) driving market demand. Speech and Voice Recognition Market A prominent example is Facebook's VR platform Oculus Rift, which integrated voice recognition into VR gear in February 2017. Benefits of TTS Avatars Technology for Businesses TTS avatars are becoming more prevalent in various industries, and as this technology advances, businesses can use it to their advantage. One of the most apparent benefits of TTS avatars is their ability to provide consistent across all communication channels 24/7. TTS avatars can therefore enhance customer satisfaction and loyalty, increasing sales and revenue while improving a company's brand image. customer service Moreover, by handling multiple inquiries simultaneously, TTS Avatars increase , reducing the need for human customer support personnel and lowering business costs. efficiency TTS avatars can improve and save time by reading reports. They can also provide flexibility for remote workers and decrease the need for in-person meetings. internal corporate communication With the many advantages and use cases mentioned, TTS avatars offer numerous commercial and in various sectors. Investing in this technology can improve operations and maintain competitiveness in the market. monetization opportunities TTS Avatar Use Cases TTS avatars can be utilized in different ways. For instance: e-learning and training programs by providing a more dynamic and exciting learning experience. Enhancing communication between healthcare professionals and patients, particularly those with hearing or visual impairments and language barriers. Improving organizations with consumers and workers by utilizing TTS avatars for efficient, tailored communication. Connecting more immersive and engaging experiences in the entertainment industry as virtual storytellers or for interactive audio tours. Creating gaming experiences by providing spoken instructions or feedback to gamers. Boosting spoken translations of the text in other languages for language translation services, thus facilitating effective communication between people who speak different languages. Delivering more engaging and personalized advertisements in the advertising industry. Providing Certainly, TTS Avatar technology will lead to even more unique uses and commercial possibilities. Famous TTS Avatar Applications Let's now see some of the most popular applications and use scenarios of TTS Avatar technology in different industries. E-learning provides an education and e-learning solution that uses video to improve the learning experience. Deepbrain Their interactive solutions allow students to ask questions and receive real-time responses, and they offer one-on-one AI Tutor classes to accelerate English speaking proficiency in various scenarios. They also provide a (TTS) solution that enables users to convert text, URLs, and PPTs to natural-sounding speech using a library of over 200 AI voices in over 80 languages, including celebrity voices. text-to-speech Telehealth provides a telehealth solution utilizing an AI text-to-speech avatar named Molly that assists patients throughout their healthcare experience. Molly helps patients schedule appointments, renew prescriptions, and answers questions relating to their health. Sensely Patients converse with Molly using natural language and receive responses in real-time. Social Entrainment is a virtual influencer and musician featured in music videos and fashion campaigns. A text-to-speech program produces her voice. is an AI chatbot that uses TTS technology to communicate with users. Lil Miquela Replika It can provide emotional support and companionship to users by conversing with them in a human-like manner. TTS Avatars are virtual guides in museums and theme parks, such as Deepak at the National Museum of Natural History and Karen at Universal Studios Hollywood. They provide spoken descriptions and storytelling to visitors, creating an immersive and engaging experience. Is TTS Technology a Challenge for Developers? As easily intuitive, TTS Avatars allows developers to augment their apps with spoken feedback and instructions, resulting in more engaging and individualized end-user experiences. Integrating language processing into mobile and online apps is relatively simple. However, there are challenges. One of them is ensuring that the TTS avatar's voice and tone reflect the app's overall style and correspond with the . Developers must also guarantee that the TTS avatar's spoken replies are accurate and helpful to users. app's brand identity Despite these obstacles, the power of TTS avatars can help developers' products stand out in a crowded marketplace. ZEGOCLOUD TTS Avatar SDK With SDK, developers can seamlessly incorporate a 3D Avatar maker into their apps. This solution has exceptional features like automatic and manual avatar creation, facial expression mirroring, voice modeling, and gesture and body posture detection. ZEGO Avatar Recently, ZEGOCLOUD launched an upgraded version - - elevating metaverse immersion to new heights. It includes three major updates: ZEGO Avatar SDK 2.0 : The AI-powered TTS technology can identify written language and match Avatar's correct mouth shape and speaking manner while playing the corresponding audio. Text-to-speech : Users may experience full-body motion capture mapping fast and efficiently with their phone camera and no extra motion capture gear. Motion captures and mapping capabilities : With a headgear model, users obtain avatars flawlessly merged with real-time camera video. AR Avatar ZEGO Avatar SDK 2.0 will be a must-have for every developer wishing to create creative and engaging virtual experiences for their consumers.

Innovative Communication: The Role of Text-to-Speech Avatar Technology

Comunicación innovadora: el papel de la tecnología de avatar de texto a voz

Communication innovante : le rôle de la technologie d'avatar de synthèse vocale

इनोवेटिव कम्युनिकेशन: टेक्स्ट-टू-स्पीच अवतार टेक्नोलॉजी की भूमिका

革新的なコミュニケーション: テキスト読み上げアバター技術の役割

Comunicação inovadora: o papel da tecnologia Avatar Text-to-Speech

Truyền thông sáng tạo: Vai trò của công nghệ hình đại diện chuyển văn bản thành giọng nói

创新沟通：文本到语音化身技术的作用

When visibility is low at night and you turn on your smartphone camera, the video preview is full of darkness, and the visibility is even lower than what you can see. With the surging of real-time video apps, we have seen various video enhancement technologies  (such as ) that make a video look better than it is. You may wonder if there is a technology that can make video look clearer than it is in low light conditions. beautification or AR stickers General Scenarios of Low-light Image Enhancement The answer is surely a YES. And there are a few more scenarios where there are strong demands for low-light image enhancement technology as follows. 1) Visibility enhancement for night-time inspection or monitoring There are some nighttime scenarios where the video quality and visibility are critical, such as surveillance cameras or car security cameras. Surveillance cameras are set up at public spots to monitor and record. However, nighttime video recordings are mostly dark and unclear in low light conditions, and cannot provide clear and strong support as clues or evidence in criminal cases. Video recordings of car security cameras are crucial for traffic accidences. You would wish your nighttime video recordings were clear enough to convince a traffic policeman. 2) Video enhancement for live streaming or video chat When it comes to internet entertainment and social scenarios, you would wish to see the other participant's faces clearly in the video even if it is dark. Let me tell you a true client story of ours. It is a sizable internet dating platform, and it has a user who doesn't like to turn the lights on in her bedroom. As a result, her cyber pals cannot see her face when it is very dark and her skin is dark too. The client respects the user's preferences but wanted to improve the user experience. 3) Image enhancement for AI-enabled content recognition We have an in-house AI team who are dedicated to and . Both the AI-powered technologies require face recognition abilities based on video inputs, and the output effects rely heavily on the quality of video input. video effects avatar technology It is challenging to recognize faces and body outlines when the video pictures are dark and blurry. As a result, the video effects and avatar fidelity might be compromised. Traditional practices for low-light image enhancement To resolve the issues, we need to brighten low-light videos through intelligent algorithms. 1）Traditional Algorithms to Brighten Video The primary requirement is to enhance the lightness of pixels that are recognized as low-light ones. Meanwhile, there are other requirements as follows: a) High-light pixels shouldn't be over-brightened;
b) Image noises shouldn't be magnified(similarly in );
c) Valid information should be retained to the maximum. voice noise suppression Traditional algorithms brighten all the pixels regardless of conditions. Deep machine learning can be used for low-light image enhancement too. But It will bring some overheads: a) The framework and models are pretty big;
b) The computational volumes are large;
c) The power consumptions are significant. 2)  Common Issues of Traditional Algorithms If we brighten all pixels regardless of conditions, some high-light pixels would become dazzling, and image noise would be amplified as well. Deep machine learning models cannot run on inferior mobile devices or IoT devices because of their overheads. And as a result, only a small proportion of devices can satisfy the requirements, and the application scenarios are very limited. ZEGOCLOUD's Solution and its Advantages 1) How Did ZEGOCLOUD Resolve the Common Issues? To cope with the issues, we took a couple of measurements as follows: a) Not all video pixels should be brightened since some are already light enough. We will scan through a video frame by frame, and find pixels of different categories:
Some video pixels are fairly light and need no brightening. Some video pixels are of low light and need brightening to different volumes accordingly.
We avoid over-brighten pixels that are already light enough. b) We don't load deep machine learning frameworks and models fully. Instead, we load the 2D/3D LUK (a.k.a. Look Up Table) only. We train deep machine learning models offline. Once the models are ready to work, we extract the 2D/3D-LUTs and implant them into our algorithm. As a result, we can achieve the same effect of using a deep machine learning model without the burden of fully loading it. 2) What're The Advantages of ZEGOCLOUD Solution? The solution supports FHD quality video communication in real-time because of the deep machine learning 2D/3D-LUT. FHD quality video refers to FHD video with a high frame rate, and it lays the foundation for a superior user experience. a) FHD Real-time Video We believe in the philosophy that less is more. We do different levels of brightening accordingly and avoid over-brightening to make the video look natural and comfortable. We don't even take any action if we detect that a video picture is light enough. b) Comfortable and Natural Visual Experience Thanks to the offline deep machine learning approach and other innovative measures, the solution demonstrates outstanding performance even on low-end or old edition smartphones such as  Mi 2S or iPhone 4S, and IoT devices. c) Full Device Coverage, including the low-ends d) Robustness in Extreme Lighting Conditions The solution has been tested with a large number of extreme lighting cases and has been proven to be able to work well under extreme dark or bright conditions. We have also conducted a comparison test of other competition solutions and found that in extreme lighting conditions there were exceptions such as dazzling or flashing. How Did ZEGOCLOUD Achieve These Advantages? ZEGOCLOUD has an AI team that is dedicated to video enhancements. They have built a set of sophisticated AI algorithms systematically. The team has concluded a list of points that they have applied in the algorithms to achieve the advantages. 1) Light-load deep machine learning approach Deep machine learning is certainly an advanced technology to enhance low-light videos. However, its overheads will increase latency and slow down processing speed.  Low-end smartphones cannot even be able to run the model. We extract the 2D/3D LUT for runtime table lookup purposes. The overhead of this lookup table is very small, and the approach has demonstrated great performance. 2) Brighten to different levels appropriately The algorithm will scan video pictures, and evaluate the lightness levels of different areas. We brighten the areas that are low-light but contain valid information and leave those areas that are already light enough. You may say that it is dark in the picture, and you can see nothing. This is because the light of valid objects is so low that you just cannot see them with your naked eyes. However, the information about the valid objects is still there. We increase the light of different areas to appropriate levels accordingly, and you could see these objects with your naked eye comfortably and naturally. 3) Smoothly increase the light level to avoid flashing We don't want to make the change very quickly. You will see a flashing video if we make a sharp brightening. We will do the brightening in a few frames bit by bit. then you will see that the light level is increasing gradually. It makes you feel natural and comfortable too. The philosophy behind all these endeavors is people-oriented. 4) Avoid detecting inter-frame light changes In actual situations, light could be flashing, and the light level between two consecutive frames could be very different. We don't want to change light levels, nor do we even want to detect the inter-frame changes. These are actual situations, and what we can do is be adaptive. Detecting the changes is heavy computational work, which will slow down processing speed and introduce latency. Also, detecting algorithms is complicated and its judgment could be wrong pretty often. Given the constraints, we decided that we should avoid detecting inter-frame light changes, and shouldn't do any light changes accordingly as well. 5) A conservative but optimized approach to process image noise Image noise is certainly an issue. There are various methods to handle image noise in the market. After thorough experiments and comparisons, we conclude a few principles: a) Restrain from amplifying the light level of image noise while we are increasing light levels of pixels carrying valid information. We have constructed a sophisticated algorithm to detect image noise and cope with them differently. b) Try not to do an image noise suppression job because it is a heavy computational task and will slow down processing speed as well. In addition, it is very likely that the result is not satisfactory. c) Take some conservative measures to suppress image noise if you have to. For example, to suppress a pixel of image noise, you can use the average value of the light level of its surrounding pixels to replace its value. If there is a low-light situation in your application scenarios, and you want to improve user experience, please contact us and ask our experts for specific advice. Also published . here

Improve the User Experience in Your Mobile App by Using Low-light Enhancement Tech

According to , Goose Goose Duck, a game developed by Gaggle Studios, has recently reached a new milestone with 700,000 concurrent players on PC and mobile. The staggering player count can be likened to the virtual eradication of over 9 million geese in a day. SteamDB's charts to Gaggle CEO Shawn Fischtein, Goose Goose Duck stands out due to its built-in proximity chat, which sets it apart from other games that add chat features as an afterthought. The game's concept revolves around communication and real-time information sharing, with chatting as a key component that keeps the gameplay dynamic and exciting. According Goose Goose Duck in the Eye of Players Let's first take a look at some interactive/fun scenarios in the game: : There are 16 players in the game, and when they get close to each other on the map, they can use voice chat, but the voice volume decreases or disappears when they are far away from each other or in different rooms. Task exploration : During the voting session, all players can hear each other's voices regardless of their location on the map. Voting : As a Pigeon in Goose Goose Duck, your objective is to spread infection to other players on the map. To do so, move around, approach other players, and hit the "Infect" button. Pigeon : With the Pelican role, where you can swallow other players, the trapped players can communicate with you and each other while inside your belly! These conversations can not be heard by other players. Pelican : Party Duck can make players sound high-pitched during meetings, which is similar to Silencer but much more humorous. Party Duck All of these scenarios can be easily implemented through RTC SDKs. We will explain in more detail later. The Advanced it Takes to Make Goose Goose Duck Players Happy RTI Technologies Large-Scale Simultaneous Voice Chat When you're talking to other players in the game, you're doing simultaneous voice chats with multiple people. And large-scale simultaneous voice chat refers to the ability of a system or application to support a high number of users speaking and listening to each other in real time. Why is it important for today’s apps? Today's Real-Time Interaction (RTI) apps are already talking about supporting 10,000+ people voice chatting simultaneously. This feature is vital for many social apps and platforms, such as online games, virtual events, and remote work and education tools, where large groups of people need to communicate and collaborate effectively. Supporting large numbers of concurrent users has become a critical competitive advantage for social apps. What it takes to support large-scale simultaneous voice chat? Adequate bandwidth to support the high volume of voice traffic. Low latency to ensure minimal delay in voice transmission. Scalable and flexible architecture to handle increasing numbers of concurrent users. Efficient load balancing and distribution to prevent overloading of servers or network nodes. Spatial Audio This is related to Proximity Chat in the game. Spatial audio allows players or users to hear sounds as if they were coming from specific directions and distances, which can help them locate and identify objects, events, or other players in the game or application. To deliver an immersive spatial audio experience, it takes: : Spatial audio delivery requires significant bandwidth and low latency to ensure real-time audio delivery and prevent delay or jitter in the audio stream. Network bandwidth and latency : To accurately capture and reproduce the spatial audio experience, the audio processing algorithms need to handle a large number of audio sources and channels and perform spatial audio mixing and rendering. Audio processing : The use of high-quality audio codecs is crucial for maintaining audio quality, especially for higher-order ambisonics, which require additional audio channels to be transmitted. Audio codecs : There are different standards and approaches for delivering spatial audio, and ensuring interoperability between other platforms and devices can be challenging. Interoperability AI-Powered Noise Suppression This has to do with the Pigeon role in Goose Goose Duck. The Pigeon needs to constantly hit the "Infect" button, and there isn't such a thing as a "noise cancellation keyboard." Players who don't install additional plugins will be exposed when getting close to others, as keyboard typing will give away their identity, leading to a poor experience for those playing Pigeon. How is implemented in RTI applications? AI-powered noise suppression Use machine learning algorithms to analyze real-time audio signals and identify and reduce unwanted background noise. The process involves analyzing each audio input during audio and video calls, determining the spectral and temporal characteristics of the background noise, and then using this information to filter out the noise and enhance the speech signal. This is achievable using hardware-based solutions, specialized noise suppression software, or RTC SDKs with built-in AI-powered noise suppression capabilities. Chat over Multiple Audio Rooms After you enter the game, the lobby is an Audio Room. Also, with the Pelican role, the Pelican's belly is another Audio Room. The technical requirements and their importance to multiple rooms in social audio apps: Multiple rooms in social audio apps are important for creating a more immersive and interactive user experience. It allows users to separate into smaller groups and participate in different activities simultaneously. The following technical requirements need to be met. : To ensure seamless real-time audio communication between players in different rooms. Low-latency audio communication : The platform must be compatible with different operating systems and devices, such as desktop, mobile, and web. Cross-platform compatibility Voice Changer Party Duck's ability is essentially a voice changer. You can add a voice changer feature to RTC apps with the following approaches: : Leverage existing SDKs that offer voice changer functionalities. This approach is less time-consuming and requires less expertise in audio processing. Integrating third-party SDKs : Use audio effects libraries, such as Web Audio API or AudioKit. These libraries provide a set of audio processing tools that can be used to change voice pitch, speed, and tone. Using audio effects libraries : For more advanced voice changer features, one can build custom audio processing algorithms using machine learning, neural networks, or digital signal processing techniques. This approach provides more flexibility and control over the audio processing pipeline. Developing custom audio processing algorithms Choose a Cloud Vendor to Ensure Server Stability for Your Trending Apps A dependable server is an essential component of any thriving app. You can find complaints (on social media) from GGD players and their desire for a more stable game. "Crash again. We can only play together at night. C’mon!" "Why crash servers every night at 8:00 on the dot?" "Hi, the chart of recent people I played with has been lost after this system crash. Can it be restored???" "My account can not be logged in after the server crashes!!" "Everytime I pull out my earphones during the game, I lose the player's voice. The only way to hear any player's voice after changing an audio device is to close the game entirely and reopen it." Points to consider when choosing a cloud vendor: Reliability: Opt for a vendor with a demonstrated history of delivering dependable and consistent cloud services. Look at their service level agreements (SLAs) and assess their ability to and provide consistent performance. handle traffic spikes Scalability: The vendor should provide a flexible and scalable infrastructure that can as your app becomes more popular. accommodate growth and changing needs : Ensure the vendor implements robust security protocols, such as encryption, firewalls, and frequent software updates. Security : If your app requires compliance with specific regulations, such as HIPAA or PCI DSS, make sure the vendor is compliant and can provide the necessary certifications. Compliance is challenging, and maintaining its success is even more so. It's essential to keep up with evolving real-time interaction technologies to ensure the app remains relevant and reliable for its users and empowers users to form meaningful relationships. Overlooking the importance of these advancements can lead to negative user experiences, impacting the app's success in the long run. Building a successful app

Goose Goose Duck Hits New Heights With 700k Players: How RTI is Driving the Game's Success

Goose Goose Duck alcanza nuevas alturas con 700 000 jugadores: cómo RTI impulsa el éxito del juego

Goose Goose Duck atteint de nouveaux sommets avec 700 000 joueurs : comment RTI est le moteur du succès du jeu

हंस हंस बतख 700k खिलाड़ियों के साथ नई ऊंचाई हिट करता है: कैसे आरटीआई खेल की सफलता चला रहा है

Goose Goose Duck は 70 万人のプレーヤーで新たな高みに到達: RTI がゲームの成功をどのように推進しているか

Goose Goose Duck atinge novos patamares com 700 mil jogadores: como a RTI está impulsionando o sucesso do jogo

Goose Goose Duck đạt tầm cao mới với 700.000 người chơi: RTI đang thúc đẩy thành công của trò chơi như thế nào

Goose Goose Duck 达到 70 万玩家的新高度：RTI 如何推动游戏的成功

In this blog post, I will show you how to create a video call app using ZEGOCLOUD and React. For context, ZEGOCLOUD is a cloud-based that provides developers with a set of APIs and SDKs to easily build video calling applications. video call platform Prerequisites Before you start, you will need to: and project. Create a ZEGOCLOUD account Have a basic understanding of React. Creating a ZEGOLCOUD account and project Step 1: Head over to the website and create an account. ZEGOCLOUD Step 2: Now, create a new project and grab the appId and serversecret from the project dashboard. Creating a Video Call App The following steps show you how to create a video call app using ZEGOCLOUD and React: Create a new React project. Install the ZEGOCLOUD React SDK. Import the ZEGOCLOUD SDK into your project. Join a room. Create a local audio and video stream. Start a video call. Render the video streams. Step 1: Create a new React project You can create a new React project using the following command: npx create-react-app video-call-app This will create a new directory called video-call-app with a basic React project. Step 2: Install the ZEGOCLOUD React SDK You can install the ZEGOCLOUD React SDK using the following command: npm i zego-express-engine-webrtc This will install the ZEGOCLOUD React SDK into your project. Step 3: Import the ZEGOCLOUD SDK into your project and initialize it In your project's index.js file, import the ZEGOCLOUD SDK and initialize the zegocloud app by the function as follows: import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const zg = new ZegoExpressEngine(
      process.env.NEXT_PUBLIC_ZEGO_APP_ID,
      process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
    );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
}

export default App; In the above step, we have utilized the useEffect hook to initialize the ZegoClouds library by passing the app ID and server secret as parameters. Step 4: Join a Room import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now in this step, we have joined the passing of the token, userId, and userName, and the userUpdate status. Step 5: Create a local audio and video stream. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} We have created the video elements here where we will be actually displaying the video streams of our local webcam. Step 6: Start a video call. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Here we have started publishing our local stream to the specified room. Step 7: Render the video streams. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );

      zg.on(
        "roomStreamUpdate",
        async (roomID, updateType, streamList, extendedData) => {
          if (updateType == "ADD") {
            const rmVideo = document.getElementById("remote-video");
            const vd = document.createElement("video");
            vd.id = streamList[0].streamID;
            vd.autoplay = true;
            vd.playsInline = true;
            vd.muted = false;
            if (rmVideo) {
              rmVideo.appendChild(vd);
            }
            zg.startPlayingStream(streamList[0].streamID, {
              audio: true,
              video: true,
            }).then((stream) => {
              vd.srcObject = stream;
            });

            // New stream added, start playing the stream.
          } else if (updateType == "DELETE" && zg && streamList[0].streamID) {
            zg.stopPublishingStream(streamList[0].streamID);
            zg.logoutRoom("123");
          }
        }
      );

      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now as soon as the other user joins the room, we want to display the upcoming video stream and render it to the DOM. Conclusion In this blog post, we have shown you how to create a video call app with Zegocloud and React. We have covered the following topics: Setting up your development environment Integrating the Zegocloud video call web APIs Building a simple video call app We hope that this blog post has helped you to get started with building video call apps using Zegocloud and React. For more information, please refer to the Zegocloud . documentation

How to Build a Video Call App with ZEGOCLOUD and React

What is video API Video API is an interface dedicated to providing audio and video transmission services, mainly divided into two types: and . static video API live video API Static Video API Static Video API is an API that provides video file play services. Service providers offer video file cloud storage and distribution services and provide video services through protocol interfaces such as HTTP and . CDN RTMP For example, YouTube and Instagram use Static Video API. Live Video API For example, , Yalla, and Uplive use the Live Video API. Live.me The static video API is easy to understand and pulls video files from the cloud through the streaming protocol. The live video API is more complicated. How does it ensure the video can be transmitted to the other end quickly, smoothly, and clearly? In this article, we will introduce the logic behind the live video API in detail. What Can The Video API Do The live video API application is becoming more extensive with the continuous improvement of network bandwidth and device performance. It makes many scenarios possible, such as: Live Online education Video conferencing Telemedicine Video calls Multiplayer What Happens After The Video API For the live video API, it is necessary to ensure that the video data can complete the end-to-end transmission within 500ms and, simultaneously, guarantee the clarity of the video picture and the flow of the call. Therefore, the live video API needs to ensure that the audio and video data can realize end-to-end data transmission in a fast, large and stable manner. A complex system is required to ensure the availability of the live video API. As shown in the figure, the live video API mainly layered the functions of 6 modules: 1. Audio and video capture Audio and video capture is the source of audio and video data collected via cameras, microphones, screens, video files, recording files, and other channels. It involves using color spaces, such as and and extracting audio features, such as sampling rate, number of channels, bit rate, audio frame, etc. RGB YUV 2. Audio and video preprocessing The audio and video preprocessing are mainly for business scenarios, and the collected data is processed once and again to optimize the customer experience. For example: Video data processing for beauty, filters, special effects, etc. Audio data processing includes voice change, reverberation, echo cancellation, noise suppression, volume gain, etc. 3. Audio and video encoding Audio and video coding ensures that audio and video data can be transmitted quickly and safely on the network. Commonly used encoding formats are Video encoding format: , Audio coding format: OPUS, AAC. H264 H265 4. Audio and video transmission Audio and video transmission is the most complex module in the video API. To ensure that the audio and video data can be transmitted to the opposite end quickly, stably, and with high quality in a complex network environment, streaming protocols such as RTP, HTTP-FLV, HLS, and RTMP can be used. Various anomalies such as data redundancy, loss, out-of-order, flow control, adaptive frame rate, resolution, jitter buffering, etc., must be resolved using multiple algorithms. So whether video API is worth choosing, we need to focus on whether the manufacturer has outstanding audio and video transmission advantages. 5. Audio and video decoding Audio and video decoding means that after the audio and video data is transmitted to the receiving end, the receiving end needs to decode the data according to the received data encoding format. There are two video decoding methods, hardware decoding, and software decoding. Software decoding generally uses the open source library FFMpeg. Audio decoding only supports software decoding; use FDK_AAC or OPUS decoding according to the audio encoding format. 6. Audio and video rendering Audio and video rendering is the last step in the video API processing process. This step seems to be very simple. You only need to call the system interface to render the data to the screen. However, one must process much logic to align the video picture with the audio. Still, now there is a standard processing method to ensure the synchronization of the audio and video. How to use ZEGOCLOUD video API Building a complete set of real-time audio and video systems is complex work. Nevertheless, many Video APIs help us solve the underlying complex operations. We only need to focus on the upper-level business logic. The following will introduce how to use the to implement the video calling function. ZEGOCLOUD Video API 1. Implementation process The following diagram shows the basic process of User A playing a stream published by User B: The following sections explain each step of this process in more detail. 2. Optional: Create the UI Before creating a instance, we recommend you add the following UI elements to implement basic real-time audio and video features: ZegoExpressEngine A view of the local preview A view for remote video An button End 3. Create a ZegoExpressEngine instance To create a singleton instance of the class, call the method with the of your project. ZegoExpressEngine createEngine AppID /** Define a ZegoExpressEngine object */
ZegoExpressEngine engine;

ZegoEngineProfile profile = new ZegoEngineProfile();
/** AppID format: 123456789L */
profile.appID = appID;
/** General scenario */
profile.scenario = ZegoScenario.GENERAL;
/** Set application object of App */
profile.application = getApplication();
/** Create a ZegoExpressEngine instance */
engine = ZegoExpressEngine.createEngine(profile, null); 4. Log in to a room To log in to a room, call the method. loginRoom /** create a user */
ZegoUser user = new ZegoUser("user1");


ZegoRoomConfig roomConfig = new ZegoRoomConfig();
/** Token is generated by the user's own server. For an easier and convenient debugging, you can get a temporary token from the ZEGOCLOUD Admin Console */
roomConfig.token = "xxxx";
/** onRoomUserUpdate callback can be received only by passing in a ZegoRoomConfig whose "isUserStatusNotify" parameter value is "true".*/
roomConfig.isUserStatusNotify = true;

/** log in to a room */
engine.loginRoom("room1", user, roomConfig, (int error, JSONObject extendedData)->{
    // (Optional callback) The result of logging in to the room. If you only pay attention to the login result, you can use this callback.
}); Then, to listen for and handle various events that may happen after logging in to a room, you can implement the corresponding event callback methods of the event handler as needed. engine.setEventHandler(new IZegoEventHandler() {

    /** Common event callbacks related to room users and streams. */

    /** Callback for updates on the current user's room connection status. */
    @Override
    public void onRoomStateUpdate(String roomID, ZegoRoomState state, int errorCode, JSONObject extendedData) {
        /** Implement the callback handling logic as needed. */
    }

    /** Callback for updates on the status of other users in the room. */
    @Override
    public void onRoomUserUpdate(String roomID, ZegoUpdateType updateType, ArrayList<ZegoUser> userList) {
        /** Implement the callback handling logic as needed. */
    }

    /** Callback for updates on the status of the streams in the room. */
    @Override
    public void onRoomStreamUpdate(String roomID, ZegoUpdateType updateType, ArrayList<ZegoStream> streamList, JSONObject extendedData){
        /** Implement the callback handling logic as needed. */
     }

}); 5. Start the local video preview To start the local video preview,  call the method with the view for rendering the local video passed to the parameter. startPreview canvas You can use a , , or to render the video. SurfaceView TextureView SurfaceTexture /**
 *  Set up a view for the local video preview and start the preview with SDK's default view mode (AspectFill).
 *  The following play_view is a SurfaceView, TextureView, or SurfaceTexture object on the UI.
 */
engine.startPreview(new ZegoCanvas(preview_view)); 6. Publish streams To start publishing a local audio or video stream to remote users, call the method with the corresponding Stream ID passed to the parameter. startPublishingStream streamID /** Start publishing a stream */
engine.startPublishingStream("stream1"); Then, to listen for and handle various events that may happen after stream publishing starts, you can implement the corresponding event callback methods of the event handler as needed. engine.setEventHandler(new IZegoEventHandler() {
    /** Common event callbacks related to stream publishing. */

    /** Callback for updates on stream publishing status.   */
    @Override
    public void onPublisherStateUpdate(String streamID, ZegoPublisherState state, int errorCode, JSONObject extendedData){
        /** Implement the callback handling logic as needed. */
    }
}); 7. Play streams To start playing remote audio or video stream, call the method with the corresponding Stream ID passed to the parameter and the view for rendering the video passed to the parameter. startPlayingStream streamID canvas You can use a , , or to render the video. SurfaceView TextureView SurfaceTexture /**
 *  Start playing a remote stream with the SDK's default view mode (AspectFill).
 *  The play_view below is a SurfaceView/TextureView/SurfaceTexture object on UI.
 */
engine.startPlayingStream("stream1", new ZegoCanvas(play_view)); 8. Stop publishing and playing streams To stop publishing local audio or video stream to remote users, call the method. stopPublishingStream /** Stop publishing a stream */
engine.stopPublishingStream(); If a local video preview is started, call the method to stop it as needed. stopPreview /** Stop local video preview */
engine.stopPreview(); To stop playing remote audio or video stream, call the method with the corresponding stream ID passed to the parameter. stopPlayingStream streamID /** Stop playing a stream*/
engine.stopPlayingStream(streamID); 9. Log out of a room To log out of a room, call the method with the corresponding room ID passed to the parameter. logoutRoom roomID /** Log out of a room */
engine.logoutRoom("room1"); Did You Know? 👏 Like and Follow is the biggest encouragement to me Follow me to learn more technical knowledge Thank you for reading :) Learn More This is one of the live technical articles. Welcome to other articles: All Live Streaming Features in One Article Build a Clubhouse Clone App with Android and ZEGOCLOUD How To Implement a Video Call App Using iOS CallKit and ZEGOCLOUD Also published . here

How to Implement a Simple Video Calling Feature Using the ZEGOCLOUD Video API

Because of a conversation with Musk, ClubHouse caught fire worldwide and reached a staggering 9.6 million monthly downloads. Faced with a new social model, how to quickly clone Clubhouse's social gameplay. Enrich the interaction form of your own application. Today we will introduce how to use to quickly build a Social Audio App in 10 minutes. ZEGOCLOUD's ZEGOLiveAudioRoom SDK Prerequisites Create a project in . ZEGOCLOUD Admin Console to activate the Live Audio Room service. Contact us Understand The Process The following diagram shows the basic process of creating a live audio room and taking speaker seats to speak: Integrate The Zegoliveaudioroom SDK To integrate the SDK, do the following: Download the , copy the module to your project (if you have no project, create a new one). Sample codes zegoliveaudioroom Add the following code to the file: settings.gradle include ':zegoliveaudioroom' Modify the file of your application, add the following code to the node: build.gradle dependencies implementation project(':zegoliveaudioroom') Modify the file of your project, add the following code to the node: build.gradle repositories maven { url 'https://www.jitpack.io' } Click . sync now Add Permissions Permissions can be set as needed. Open the file , and add the following code: app/src/main/AndroidManifest.xml 
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" /> Note: For Android 6.0 or later, some important permissions must be requested at runtime rather than declared statically in the file , therefore, you need to add the following code to do so (requestPermissions is a method of an Android Activity). AndroidMainfest.xml String[] permissionNeeded = {
        "android.permission.RECORD_AUDIO"};

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (ContextCompat.checkSelfPermission(this, "android.permission.RECORD_AUDIO") != PackageManager.PERMISSION_GRANTED) {
        requestPermissions(permissionNeeded, 101);
    }
} Prevent Class Name Obfuscation To prevent the ZEGOCLOUD SDK public class names from being obfuscated, you can add the following code in the file . proguard-rules.pro -keep class **.zego.**{*;} Initialize The ZegoLiveAudioRoom SDK To initialize the zegoliveaudioroom SDK, get the instance, pass the AppIDof your project. ZegoRoomManager long appID = 214124124L;  // The AppID you get from ZEGO Admin Console. 

// Initialize the SDK. We recommend you call this method when the application starts.
// The last parameter refers to the Application object of the app.
ZegoRoomManager.getInstance().init(appID, this); To receive event callbacks, call the to listen for and handle various events as needed. setListener ZegoGiftService giftService = ZegoRoomManager.getInstance().giftService;
giftService.setListener(new ZegoGiftServiceListener() -> {
            // Implement the callback handling logic as needed.
        });
ZegoMessageService messageService = ZegoRoomManager.getInstance().messageService;
messageService.setListener(new ZegoMessageServiceListener() -> {
            // Implement the callback handling logic as needed.
});
ZegoUserService userService = ZegoRoomManager.getInstance().userService;
userService.setListener(new ZegoUserServiceListener() {
 // Implement the callback handling logic as needed.        
});
ZegoSpeakerSeatService seatService = ZegoRoomManager.getInstance().speakerSeatService;
seatService.setListener(new ZegoSpeakerSeatServiceListener(){
           // Implement the callback handling logic as needed. 
})
ZegoRoomService roomService = ZegoRoomManager.getInstance().roomService;
roomService.setListener(new ZegoRoomServiceListener() {
           // Implement the callback handling logic as needed. 
}); Log In To access the signaling service of Live Audio Room with the SDK, you must log in first. zegoliveaudioroom ZegoUserInfo user  = new ZegoUserInfo();
// Set the user related properties. 
user.setUserID("USER_ID");
user.setUserName("USER_NAME");
String token = "xxx";  // The token you get from your app server. 


/**
 * User to log in.
 * @param userInfo refers to the user information. You only need to enter the user ID and username.
 * @param token    refers to the authentication token. 
 * @param callback refers to the callback for log in.
 */
ZegoRoomManager.getInstance().userService.login(user, token, new ZegoRoomCallback() {
    @Override
    public void roomCallback(int errorCode) {
        // Callback for the login result. 
    }
}); Create/Join a Live Audio Room You become a after creating a live audio room, and you owe more permissions, such as closing untaken speaker seats, removing a specified listener from the speaker seat, etc. Host You become a after joining a live audio room, you can take a speaker seat to be a speaker or leave the speaker seat to become a listener again. Listener To create a live audio room, call the method: createRoom String roomID = "YOUR_ROOM_ID";
String roomName = "YOUR_ROOM_NAME";

/**
 * Create a room.
 * @param roomID   roomID refers to the room ID, the unique identifier of the room. This is required to join a room and cannot be null.
 * @param roomName roomName refers to the room name. This is used for display in the room and cannot be null.
 * @param token    token refers to the authentication token. 
 * @param callback callback refers to the callback for create a room.
 */
ZegoRoomManager.getInstance().roomService.createRoom(roomID, roomName, token, new ZegoRoomCallback() {
    @Override
    public void roomCallback(int errorCode) {
        // Callback for the result of create a live audio room. 
    }
}); To join a live audio room, call the method: joinRoom String roomID = "ROOM_ID";

/**
 * Join a room.
 * @param roomID   refers to the ID of the room you want to join, and cannot be null.
 * @param token    token refers to the authentication token.
 * @param callback callback refers to the callback for join a room.
 */
ZegoRoomManager.getInstance().roomService.joinRoom(roomID,token,new ZegoRoomCallback() {
    @Override
    public void roomCallback(int errorCode) {
        // Callback for the result of join a live audio room. 
    }
}); Send/Receive Messages In The Room In a live audio room, both and can send and receive messages. Host Listeners To send messages, call the method with message content. sendTextMessage /**
 * Send IM text message.
 * <p>Description: This method can be used to send IM text message, and all users in the room will receive the
 * message notification.</>
 * <p>Call this method at:  After joining the room</>
 *
 * @param text     refers to the text message content, which is limited to 1kb.
 * @param callback refers to the callback for send text messages.
 */
ZegoRoomManager.getInstance().messageService.sendTextMessage("YOUR_MESSAGE", new ZegoRoomCallback() {
   @Override
   public void roomCallback(int errorCode) {
   // Callback for the result of send a message. 
   }
}); To receive messages, listen for the callback. ZegoMessageServiceListener ZegoMessageService messageService = ZegoRoomManager.getInstance().messageService;
messageService.setListener(new ZegoMessageServiceListener() -> {
            // This callback will be triggered when new messages are received. 
}); Take a Speaker Seat To take a speaker seat to speak, call the method. And the SDK publishes streams simultaneously. takeSeat // Takes a speaker seat. 
int seatIndex = 2;  // The ID of the seat be taken. 
/**
 * Take the speaker seat.
 * <p>Description: This method can be used to help a listener to take a speaker seat to speak. And at the same
 * time,the microphone will be enabled, the audio streams will be published.</>
 * <p>Call this method at:  After joining the room</>
 *
 * @param seatIndex seatIndex to take
 * @param callback  operation result callback
 */
ZegoRoomManager.getInstance().speakerSeatService.takeSeat(seatIndex,new ZegoRoomCallback(){
   @Override
   public void roomCallback(int errorCode){
   // Callback for the result of take a speaker seat. 
   }
}); When there is a new listener takes a seat and becomes a speaker, all participants in the room receive notifications through the callback. You can set up a UI refresh action for this callback as needed. ZegoSpeakerSeatServiceListener ZegoSpeakerSeatService seatService = ZegoRoomManager.getInstance().speakerSeatService;
seatService.setListener(new ZegoSpeakerSeatServiceListener(){
            // This callback will be triggered when the status of speaker seats changes. 
}) Did You Know? 👏 and is the biggest encouragement to me Like Follow to learn more technical knowledge Follow me Thank you for reading :) Learn More This is one of the live technical articles. Welcome to other articles: All Live Streaming Features in One Article Also published . here

Build a Clubhouse Clone App with Android and ZEGOCLOUD

Introduction In the karaoke scene, it is often necessary to pull multiple streams and display the user who is speaking. We need to identify whether the user is speaking, the volume of the speech (sound wave), and display it on the UI. The SDK provides the following two methods to achieve this function： refers to the volume of a stream. The ZEGO Express SDK provides the ability to capture the sound level of a stream in real time and delivers the captured sound level data to the app client through related callbacks.  A typical use case of this feature is that you can visualize the sound level data on your app UI to indicate the current active speaker and their volume. The following picture shows an example of such use cases. Sound level refers to a series of values, each of which represents an audio signal's energy level at a point in a frequency range.  The ZEGO Express SDK provides the ability to capture the audio spectrum data of a stream in real time and delivers the captured audio spectrum data to the app client through related callbacks.  A typical use case of this feature is that you can use it to create and display an audio spectrum visualizer on your app UI, especially for those online karaoke apps. The following picture shows an example of audio spectrum visualizers. Audio spectrum Prerequisites Before you begin to use sound level and audio spectrum in your project, make sure you complete the following steps: Create a project in , and get the AppID of your project. ZEGOCLOUD Admin Console The ZEGO Express SDK has been integrated into the project. For details, see and . Integration Implementation Enable the Sound Level Callbacks To enable sound level callbacks,  call the method. startSoundLevelMonitor /// Enable sound level callbacks.
///
- (void)startSoundLevelMonitor;

/// Enable the sound level monitor, supports enabling advanced features.
///
/// @note After enabled the monitor, the SDK sends out notification through the callback [onCapturedSoundLevelUpdate] to deliver the sound level data of locally captured audio, and through the callback [onRemoteSoundLevelUpdate] to deliver sound level data of remote streams.
/// @note You can call the [startPreview] method before entering a room, and together with the callback [onCapturedSoundLevelUpdate] to check whether the audio device is working properly. 
/// @note The notification interval of the [onCapturedSoundLevelUpdate] and [onRemoteSoundLevelUpdate] callbacks is the value of the parameter.
///
/// @param config The configuration to enable sound level monitor. 
- (void)startSoundLevelMonitorWithConfig:(ZegoSoundLevelConfig *)config; After the above step is completed: When you start previewing the local video (by calling the method or publishing a local stream by calling the method, the SDK will trigger the callback at an interval of 100ms to deliver the sound level data of the locally captured audio. startPreview startPublishingStream onCapturedSoundLevelUpdate /// The callback to deliver the sound level data of locally captured audio.
///
/// @param soundLevel: The sound level value of the locally captured audio, which is in the range [0.0, 100.0].
- (void)onCapturedSoundLevelUpdate:(NSNumber *)soundLevel;

/// The callback to deliver the sound level data of locally captured audio.
///
/// @note To trigger this callback, you must call the [startSoundLevelMonitor] method to enable the sound level monitor.
/// @note The callback notification interval is the value set when [startSoundLevelMonitor] is called.
///
/// @param soundLevelInfo The sound level value of the locally captured audio, which is in the range [0.0, 100.0].
- (void)onCapturedSoundLevelInfoUpdate:(ZegoSoundLevelInfo *)soundLevelInfo; When you start playing remote streams by calling the method,  the SDK will trigger the callback at an interval of 100ms to deliver the sound level data of the remote streams. startPlayingStream onRemoteSoundLevelUpdate /// The callback to deliver the sound level data of remote streams.
///
/// @param soundLevels: The sound level data (key-value pairs) of the remote streams, of which the key is a stream ID, and the value is the sound level value of the corresponding stream. Each sound level value is in the range [0.0, 100.0].
- (void)onRemoteSoundLevelUpdate:(NSDictionary<NSString *, NSNumber *> *)soundLevels;

/// The callback to deliver the sound level data of remote streams when stream playing.
///
/// @note To trigger this callback, you must call the [startSoundLevelMonitor] method to enable the sound level monitor when playing streams. 
/// @note The callback notification interval is the value set when [startSoundLevelMonitor] is called.
///
/// @param soundLevelInfos The sound level data (key-value pairs) of the remote streams, of which the key is a stream ID, and the value is the sound level value of the corresponding stream. Each sound level value is in the range [0.0, 100.0].
- (void)onRemoteSoundLevelInfoUpdate:(NSDictionary<NSString *, ZegoSoundLevelInfo *> *)soundLevelInfos; Enable the Audio Spectrum Callbacks To enable audio spectrum callbacks, call the method. startAudioSpectrumMonitor /// Enable audio spectrum callbacks
///
- (void)startAudioSpectrumMonitor; After the above step is completed: When you start previewing the local video by calling the method or publishing a local stream by calling the method, the SDK will trigger the callback at an interval of 100ms to deliver the audio spectrum data of locally captured audio. startPreview startPublishingStream onCapturedAudioSpectrumUpdate /// The callback to deliver the audio spectrum data of locally captured audio.
///
/// @param audioSpectrum: An array of audio spectrum values of the locally captured audio. Each audio spectrum value is in the range [0, 2^30].
- (void)onCapturedAudioSpectrumUpdate:(NSArray<NSNumber *> *)audioSpectrum; When you start playing remote streams by calling the method,  the SDK will trigger the callback at an interval of 100ms to deliver audio spectrum data of the remote streams. startPlayingStream onRemoteAudioSpectrumUpdate /// The callback to deliver the audio spectrum data of remote streams
///
/// @param audioSpectrums: The audio spectrum data (key-value pairs) of remote streams, of which the key is a stream ID, and the value is an array of audio spectrum values of the corresponding stream. Each audio spectrum value is in the range [0, 2^30].
- (void)onRemoteAudioSpectrumUpdate:(NSDictionary<NSString *, NSArray<NSNumber *> *> *)audioSpectrums; Obtain Data from the Callbacks The SDK delivers the sound level data and audio spectrum data of the remote streams as key-value pairs in an . In each key-value pair, the key is the stream ID of a remote stream published by another user in the same room, and the value is the sound level value or an array of audio spectrum values that stream. NSDictionary You can first obtain and save the list of remote streams published by the other users in the current room through the callback, and then use each stream ID in the list as an index to get the sound level value or the audio spectrum data of that stream from the . onRoomStreamUpdate NSDictionary The following examples show how to obtain the sound level and audio spectrum data from the callbacks. // The callback to deliver the sound level data of locally captured audio.
- (void)onCapturedSoundLevelUpdate:(NSNumber *)soundLevel {
    ZGSoundLevelTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
    cell.soundLevel = soundLevel;
}

// The callback to deliver the sound level data (key-value pairs) of remote streams. In each key-value pair, the key is the stream ID of a remote stream, and the value is the sound level data of that stream.
- (void)onRemoteSoundLevelUpdate:(NSDictionary<NSString *,NSNumber *> *)soundLevels {
    NSInteger rowCount = [self.tableView numberOfRowsInSection:1];
    for (NSInteger row = 0; row < rowCount; row++) {
        ZGSoundLevelTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:row inSection:1]];
        if ([soundLevels objectForKey:cell.streamID]) {
            cell.soundLevel = soundLevels[cell.streamID];
        }
    }
}

// The callback to deliver the audio spectrum data of locally captured audio.
- (void)onCapturedAudioSpectrumUpdate:(NSArray<NSNumber *> *)audioSpectrum {
    ZGSoundLevelTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
    cell.spectrumList = audioSpectrum;
}

// The callback to deliver the audio spectrum data (key-value pairs) of the remote streams. Audio spectrum callback for remote streams. In each key-value pair, the key is the stream ID of a remote stream, and the value is the audio spectrum data of that stream.
- (void)onRemoteAudioSpectrumUpdate:(NSDictionary<NSString *,NSArray<NSNumber *> *> *)audioSpectrums {
    NSInteger rowCount = [self.tableView numberOfRowsInSection:1];
    for (NSInteger row = 0; row < rowCount; row++) {
        ZGSoundLevelTableViewCell *cell = [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:row inSection:1]];
        if ([audioSpectrums objectForKey:cell.streamID]) {
            cell.spectrumList = audioSpectrums[cell.streamID];
        }
    }
} Disable the Sound Level Callbacks To disable the sound level callbacks, call the method. stopSoundLevelMonitor /// Disable sound level callbacks
- (void)stopSoundLevelMonitor; After the above step is completed, the SDK will stop triggering the callbacks and . onCapturedSoundLevelUpdate onRemoteSoundLevelUpdate Disable the Audio Spectrum Callbacks To disable audio spectrum callbacks, call the method. stopAudioSpectrumMonitor /// Stop listening for audio spectrum callbacks
///
- (void)stopAudioSpectrumMonitor; After the above step is completed, the SDK will stop triggering the callbacks and . onCapturedAudioSpectrumUpdate onRemoteAudioSpectrumUpdate

How to Implement Sound Waves in iOS by Using ZEGOCLOUD SDK

I am thrilled to share an incredible web development and innovation journey in this blog post. Over time, I have embarked on a quest to recreate and reimagine some of the most popular web applications, resulting in a diverse collection of full-stack clones that reflect my passion for coding and technology. From the e-commerce giant Amazon to the real-time messaging platform WhatsApp, each clone is a testament to my dedication to mastering various technologies and showcasing their capabilities. In this post, we'll delve into the features and functionalities of these remarkable clones, offering a glimpse into the world of web development and the endless possibilities it presents. Most of the codes of these clones are open source. You can check it from my GitHub account. https://github.com/koolkishan If you like this blog post and my work, don't forget to subscribe to my YouTube channel. It would help me a lot. https://www.youtube.com/@KishanSheth21/videos?embedable=true 1. Full Stack Amazon Clone ✅ Built using Next.js ✅ Styled with Tailwind CSS ✅ Backend generated using Amplication ✅ State Management with Zustand ✅ Typescript for type safety ✅ Login Signup using JWT Tokens ✅ API calls using Axios ✅ Recharts for charts ✅ Next UI for excellent prebuilt components ✅ React Pro Sidebar for prebuilt excellent sidebar. ✅ Admin Panel ✅ Table Pagination ✅ Categories CRUD (Create/Read/Update/Delete) ✅ Products CRUD (Create/Read/Update/Delete) ✅ Order Management ✅ Dashboard for Admin ✅ Admin Login ✅ User Login & Signup ✅ User view products ✅ User search products ✅ User adds products to the cart ✅ User place order ✅ And many more features that you can watch from the video below https://www.youtube.com/watch?v=JVVJcFGV5p4&embedable=true 2. Full Stack Airbnb Clone ✅ Built using Next.js ✅ Styled with Tailwind CSS ✅ Backend generated using Amplication ✅ State Management with Zustand ✅ Realtime Maps using Mapbox API ✅ Login Signup using JWT Tokens ✅ API calls using Axios ✅ Create Listings ✅ View Listings ✅ Book Listings ✅ Delete Listings ✅ Add Listing to Wishlist ✅ Remove Listing from Wishlist ✅ View booked Listings ✅ Search Listings ✅ Search Listings using Map ✅ View Listings Data on Map https://www.youtube.com/watch?v=nkmPmUpUM6U&embedable=true 3. Full Stack Fiverr Clone ✅ Built with Next.js ✅ Used Prisma For ORM ✅ PostgreSQL for DB ✅ Node.js for backend ✅ Express for Node.js framework ✅ Firebase for Login ✅ Styled using Tailwind CSS ✅ Axios for API Calls ✅ Stripe for Payment Gateway ✅ Typescript for type Safety ✅ Cookies and JWT for Auth Management ✅ Multer for Image Upload ✅ Create Gigs ✅ View Gigs ✅ Search Gigs ✅ Rate Gigs ✅ Order Gigs ✅ Chat with Admin/User ✅ Revenue Analytics ✅ Payment with Stripe https://www.youtube.com/watch?v=cJ7xvBkuqiA&embedable=true 4. Full Stack Whatsapp Clone ✅ Next.js For Frontend ✅ Node.js with Express as Backend ✅ Prisma as ORM with PostgreSQL ✅ Google Login Using Firebase ✅ Socket.io for Messages ✅ Styled using Tailwind CSS ✅ Context for State Management ✅ Wavesurfer for live Audio Waveforms ✅ Login with Google using Firebase: Seamlessly sign in with your Google account via Firebase integration. ✅ Switch between multiple databases using Prisma: Customize your database preferences to suit your needs effortlessly. ✅ Send and Receive Messages using Sockets: Real-time messaging capabilities using Socket.io for instant communication. ✅ Voice Call and Video Call Feature: Enjoy crystal clear voice and video calls within the app. ✅ Voice Notes with Live Audio Waveforms: Send and receive voice notes accompanied by live audio waveforms for an enhanced messaging experience. ✅ Support for Emoji: Express yourself with a wide range of emojis to add fun and emotions to your conversations. ✅ Send Images: Share images with your friends and loved ones effortlessly. ✅ Online/Offline Functionality: Identify your contacts' online and offline status. ✅ Search Messages: Quickly find specific messages using the search functionality. ✅ Capture Photo From Camera: Take instant photos using your device's camera and send them instantly. ✅ Message Read Status: Know when your recipients have read your messages. ✅ Message Time: Stay updated with the time stamps of messages for better organization. https://www.youtube.com/watch?v=keYFkLycaDg&embedable=true 5. Full Stack Netflix Clone ✅ Built with React ✅ Used TMBD API for movie data ✅ React Router DOM for navigation ✅ Axios for API Calls ✅ Redux Toolkit for State Management ✅ Firebase for Login using Google ✅ Backend in Node.js with Express ✅ Mongoose and MongoDB for DB ✅ Styled using Styled Components https://www.youtube.com/watch?v=HgaJW2I4Mbk&embedable=true 6. Spotify Clone With Spotify API ✅ Built with React ✅ Styled with Styled Components ✅ Used Spotify API for Using Real-Time Data ✅ Used Context for State Management ✅ Used Spotify API for player Controls ✅ Play/Pause Track ✅ View Spotify Account Playlist ✅ Play Track from Playlist ✅ Forward/Backward Track ✅ Volume Increase/Decrease https://www.youtube.com/watch?v=ajVcLGEw8Xw&embedable=true 7. YouTube Clone With YouTube Data API ✅ Built using React ✅ Styled with Tailwind CSS ✅ Typescript for Type Safety ✅ Redux Toolkit for State Management ✅ Axios for API calls ✅ React Router for Routing ✅ Infinite Scroll For Infinitely Scrolling of videos ✅ Used YouTube Data API to get the videos ✅ Search Videos ✅ Random Home Page Videos ✅ View the Video Page with all the details ✅ Metadata of videos https://www.youtube.com/watch?v=I32ri7v3SYk&embedable=true 8. Zoom Clone ✅ Built with React ✅ Firebase for login using Google ✅ Firestore for storing the data and making the app serverless ✅ React Router for Routing ✅ Typescript for type safety ✅ Redux Toolkit for State Management ✅ Elastic UI for ready-made components ✅ Zegocloud prebuilt UI for Video Meetings ✅ You can schedule different types of meetings and join them ✅ Change Meetings Info https://www.youtube.com/watch?v=KCqdXubNoE4&embedable=true 9 Candy Crush in React ✅ Created using React ✅ Used Redux Toolkit for State Management ✅ Styled with Tailwind CSS ✅ Typescript for Type Safety ✅ Fully Functional Candy Crush Game using React ✅ You will learn various best practices ✅ You will learn how to implement complex Logic ✅ Logic for valid and invalid moves developed ✅ Candies with 3 or 4 matches can be poped. https://www.youtube.com/watch?v=tfV421C2r2A&embedable=true What's Next? I am working on these Clones next and will create a video before the end of the year. Full Stack Discord Clone Full Stack Instagram Clone Full Stack ChatGPT Clone Full Stack Twitter Clone You can check the status of these clones on my Discord Server. https://discord.com/invite/JjKwqn6Tm4?embedable=true Conclusion As the author of this blog post, I'm delighted to share this exciting array of full-stack clones. They stand as a testament to the endless possibilities of web development, showcasing the power of technology and innovation. Whether you're a seasoned developer or just starting your coding journey, I hope these clones inspire you to explore, learn, and create. Stay tuned for more exciting projects on the horizon in the world of full-stack development. Also published here

Stories, News & Mentions about ZEGOCLOUD

Zegocloud’s Stories on HackerNoon

Zegocloud's News & Mentions