Talk to us
Talk to us
menu

Blog Post

start building
Developer

How To Make Your Own Video Calling App With WebRTC

How To Make Your Own Video Calling App With WebRTC

Virtual interactions, especially one-on-one video chat, have become very popular in today’s socially remote times. For instantaneous client connections and team collaboration, the majority of businesses throughout the world have integrated video communication with WebRTC into their company systems.

Have you also been preparing to use video conferencing effectively? Oh, that’s wonderful! This article will cover every topic related to creating the ideal video chat application for your company. Continue reading if you’d like!

Introduction to WebRTC UIKit SDK

WebRTC UIKit SDK is a brand-new pre-built UIKits and UI Components by ZEGOCLOUD. Through it, We can complete the development of video calls, live streaming, video conference, and other scenarios within 10 minutes.

webrtc

As shown in the figure, WebRTC UIKit SDK is responsible for processing audio and video calls and the logic related to text chat. Include:

  • UI and interaction of the calling module
  • Call status management
  • Audio and video data transmission

You only need to implement business-related logic. For example:

  • User login registration
  • Friends List Management
  • Call billing recharge

Preparation

  • A ZEGOCLOUD developer account–Sign up
  • The latest version of Chrome.
  • Basic understanding of Web development

Call Kit WebRTC SDK integration

Importer Call Kit SDK

  • Create a new html file and add the following code in the file.
  • Then, replace the appID and serverSecret parameters in the following code with the AppID and Server Secret of your project.
<html>
  <head>
    <style>
      #root {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/@zegocloud/zego-uikit-prebuilt/zego-uikit-prebuilt.js"></script>
  <script>
    function getUrlParams(url = window.location.href) {
      let urlStr = url.split("?")[1];
      return new URLSearchParams(urlStr);
    }
    // Generate a Kit Token by calling a method.
    // @param 1: appID
    // @param 2: serverSecret
    // @param 3: Room ID
    // @param 4: User ID
    // @param 5: Username
    const roomID =
      getUrlParams().get("roomID") ||
      "room_" + Math.floor(Math.random() * 1000);
    const userID = Math.floor(Math.random() * 10000) + "";
    const userName = "userName" + userID;
    const appID = 221417685;
    const serverSecret = "be15e8ea06d70c26c704f87ed661b6aa";
    const kitToken = ZegoUIKitPrebuilt.generateKitTokenForTest(
      appID,
      serverSecret,
      roomID,
      userID,
      userName
    );

    const zp = ZegoUIKitPrebuilt.create(kitToken);
    zp.joinRoom({
      container: document.querySelector("#root"),
      sharedLinks: [
        {
          url:
            window.location.origin +
            window.location.pathname +
            "?roomID=" +
            roomID,
        },
      ],
      scenario: {
        mode: ZegoUIKitPrebuilt.OneONoneCallGroupCall,
      },
    });
  </script>
</html>

Run a Demo

Using the Web Server for Chrome plugin or any web server, start the html created in the previous step.

Group-call configuration

Group-call scenarios can be implemented by configuring the parameters of the joinRoom function.

groupCall
  • Set scenario.mode to ZegoUIKitPrebuilt.GroupCall
// ...
zp.joinRoom({
        //...
        scenario: {
           mode: ZegoUIKitPrebuilt.GroupCall 
        },
        //...
});
//...

Audio-only call configuration

Audio-only call scenarios can also be implemented by configuring the parameters of the join room function.

1v1
  • Set the turnOnCameraWhenJoining to false to turn off the camera.
  • Set the showMyCameraToggleButton to false to hide the toggle button for enabling/disabling the camera.
  • Set the showAudioVideoSettingsButton to false to hide the advanced setting button for audio and video.
  • Set the showScreenSharingButton to false to hide the screen sharing button.
// ....
zp.joinRoom({
     // ...,
    turnOnCameraWhenJoining: false,
    showMyCameraToggleButton: false,
    showAudioVideoSettingsButton: false,
    showScreenSharingButton: false; 
     // ...
});

Conclusion

We hope our article helped you understand the major points associated with a video calling app. wait no more! Start your video-calling app development process today. We wish you all success!

If you have deeper requirements, such as streaming mix, noise reduction, censorship, etc. you can use our Core SDK.

when you have any questions, you can always consult us 24h technical support

Read More

ZEGOCLOUD
ZEGOCLOUD With our fully customizable and easy-to-integrate Live SDK, you can quickly build reliable, scalable, and interactive live streaming into your mobile, web, and desktop apps.

Related posts

Contact us