Web Video Calling Sample Code | ZEGOCLOUD Documentation

Documentation
Video Calling
Sample Codes
Web

Sample Code

GitHub

Description

Experience the Features

GitHub

Guidelines for Running Sample Codes

This article describes how to quickly run the sample source code and experience basic audio and video calling services.

Prerequisites

Before starting to integrate the ZEGO Express SDK, please install a browser supported by ZEGO SDK has been installed, as shown in the following table:

Browser	Windows 7 or later	MacOS 10 or later	Android 4.4 or later	iOS 11 or later
Chrome 58 or later	✔️	✔️	✔️	Stream Playing only
FireFox 56 or later	✔️	✔️	✔️	Stream Playing only
Safari 11 or later	N/A	✔️	N/A	✔️
Opera 45 or later	✔️	✔️	Supported on some models only	✖️
WebView	N/A	N/A	✔️	iOS 14.3 or above supports push-pull streaming iOS 14.3 and below only support push-pull streaming

Only support SSL web server (https), localhost, 127.0.0.1 is equivalent to https.

Then go to ZEGOCLOUD Admin Console to create a project, apply for a valid AppID, and obtain the access server address Server URL.

Run the Sample Codes

Open the ./src/Examples/DebugAndConfig/InitSettings/index.html file with a supported browser, and enter the AppID and Server URL you get in the previous step, and then click Set.

/Pics/Web/ExpressSDK/SampleRunningGuide/epxress_demo_new_en.png

After the supplement is complete, you can start to experience the Demo function. Please use a supported browser to open the HTML file of each scene function in the "./src/Examples" folder. For example, open the "index.html" under the "QuickStart/CommonUsage" folder, and the interface will be displayed as shown in the figure below.

/Pics/Web/ExpressSDK/SampleRunningGuide/UI_interface_new_en.png

If the local path where the page is stored contains Chinese characters, when the page is opened, some browsers may fail to load CSS and other style files, and the page will display abnormally. It is recommended that developers set all the path names of source files to "English characters".

Experience Real-time Audio and Video Functions

We recommend you run your project on a real device. If your app runs successfully, you should hear the sound and see the video captured locally from your device.

To test out the real-time audio and video features, visit the ZEGO Express Web Demo, and enter the same AppID, Server and RoomID to join the same room. If it runs successfully, you should be able to view the video from both the local side and the remote side, and hear the sound from both sides as well.

In audio-only scenarios, no video will be captured and displayed.