Implement audio and video features using React

Introduction

This document describes how to implement an audio and video call using React.

Basic concepts:

• ZEGO Express SDK: The real-time audio and video SDK developed by ZEGO to help you quickly build high-quality, low-latency, and smooth real-time audio and video communications into your apps across different platforms, with support for massive concurrency.
• Stream publishing: The process of the client app capturing and transmitting audio and video streams to the ZEGOCLOUD server.
• Stream playing: The process of the client app receiving and playing audio and video streams from the ZEGOCLOUD server.

Prerequisites

Before you begin, make sure you complete the following steps:

• A project has been created in ZEGOCLOUD Console and applied for a valid AppID and AppSign. For details, please refer to Console - How to view project information .
• ZEGO Express SDK has been integrated into the project to implement basic real-time audio and video functions. For details, please refer to Integrate the SDK and Implement a basic video call.

Implementation process

The following diagram shows the basic process of User A playing a stream published by User B:

The following diagram shows the API call sequence of the stream publishing and playing process:

Create a ZegoExpressEngine instance

1. Optional: Create the UI

Add UI elements

Before creating a ZegoExpressEngine instance, we recommend you add the following UI elements to implement basic real-time audio and video features:

• A view for local preview
• A view for remote video
• An End button

2. Create a ZegoExpressEngine instance

To create a singleton instance of the ZegoExpressEngine class, pass in your AppID as the appID parameter and the Server URL as the server parameter. You can obtain them from the ZEGOCLOUD Admin Console.

Import the react.js, react-dom.js, and babel.js to the /express-demo-web/src/Examples/Framework/React/index.html file.

// Import the react.js, react-dom.js.
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.7.0/cjs/react.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.7.0/cjs/react-dom-server.browser.development.js"></script>

// Import the babel.min.js using ES6 scripting language.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Initialize the ZegoExpressEngine instance.

// Initialize the [ZegoExpressEngine] instance.
class CommonUsageReact extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            zg: null
        }
    }
    createZegoExpressEngineOption(){
        const zg = new ZegoExpressEngine(appID, server)
        this.setState({
            zg:zg
        },() => {
            // Listen for the event callbacks.
            this.initEvent();
        })
    }
}

3. Optional: Listen for and handle the event callbacks

initEvent() {
  this.state.zg.on('roomStateUpdate', (roomID, state, errorCode, extendedData) => {
      if (state == 'DISCONNECTED') {
          // Disconnected from the room.
      // ...
      }

      if (state == 'CONNECTING') {
          // Connecting to the room. 
      // ...
      }

      if (state == 'CONNECTED') {
          // Connected to the room.
      // ...
      }
})
}

Optional: Check your browser's WebRTC support

const result = await this.zg.checkSystemRequirements();
// The [result] indicates whether it is compatible. It indicates WebRTC is supported when the [webRTC] is [true]. For more results, see the API documents.
console.log(result);
// {
//   webRTC: true,
//   customCapture: true,
//   camera: true,
//   microphone: true,
//   videoCodec: { H264: true, H265: false, VP8: true, VP9: true },
//   screenSharing: true,
//   errInfo: {}
// }

Log in to a room

1. Obtain the login token

When logging in to a room, you need to pass in a login token for user authentication. For information about how to obtain the login token, see User privilege control.

2. Log in

To log in to a room, call the loginRoom with the following parameters:

• A unique room ID as the roomID parameter
• The login token you obtained in the previous step as the token parameter
• The user ID and user name as the roomID and userName parameter
• Optional: Pass the corresponding object to the config parameter based on the actual situation.

// Log in to a room. It returns `true` if the login is successful.
// The roomUserUpdate callback is disabled by default. To receive this callback, you must set the `userUpdate` property to `true` when logging in to a room. 
const result = await this.state.zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});

3. Listen for and handle the event callbacks related to room users and streams

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. The following are some common event callbacks related to room users and streams:

• roomStateUpdate: Callback for updates on current user's room connection status. When the current user's room connection status changes (for example, when the current user is disconnected from the room or login authentication fails), the SDK sends out the event notification through this callback.

• roomUserUpdate : Callback for updates on the status of other users in the room. When other users join or leave the room, the SDK sends out the event notification through this callback.

• roomStreamUpdate: Callback for updates on the status of the streams in the room. When new streams are published to the room or existing streams in the room stop, the SDK sends out the event notification through this callback.

// Callback for updates on the current user's room connection status.
this.state.zg.on('roomStateUpdate', (roomID,state,errorCode,extendedData) => {
    if (state == 'DISCONNECTED') {
        // Disconnected from the room.
    }

    if (state == 'CONNECTING') {
        // Connecting to the room.
    }

    if (state == 'CONNECTED') {
        // Connected to the room.
    }
})

// Callback for updates on the status of ther users in the room.
this.state.zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.warn(
        `roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
        JSON.stringify(userList),
    );
});

// Callback for updates on the status of the streams in the room.
this.state.zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // New stream added, start playing the stream.
    } else if (updateType == 'DELETE') {
        // Stream deleted, stop playing the stream.
    }
});

Publish streams

1. Create a stream

a. To create a local audio and video stream, call the createZegoStream method. By default, the engine captures video data from the camera and captures audio data from the microphone.

Set the ref property of the video tag object.

Create a container <div> on HTML for the media streaming player component.

<div id="local-video" style="width: 320px;height: 240px"></div>

Play preview of the Stream.

// After calling the createZegoStream method, you need to wait for the ZEGO server to return the local stream object before any further operation.
const localStream = await this.zg.createZegoStream();

localStream.playVideo(document.querySelector("#local-video"), {enableAutoplayDialog:true});

b. Optional: Set up the audio/video capturing parameters

2. Start publishing a stream

To start publishing a local audio and video stream to remote users, call the startPublishingStream method with the following parameters:

• A stream ID as the streamID parameter
• The media stream object obtained in the previous step as localStream parameter

// [localStream] is the MediaStream object created by calling creatStream in the previous step.
this.state.zg.startPublishingStream(streamID, localStream)

3. Listen for and handle the event callbacks related to stream publishing

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. The following are some common event callbacks related to stream publishing:

publisherStateUpdate: Callback for updates on stream publishing status. After stream publishing starts, if the status changes, (for example, when the stream publishing is interrupted due to network issues and the SDK retries to start publishing the stream again), the SDK sends out the event notification through this callback.

publishQualityUpdate: Callback for reporting stream publishing quality. After stream publishing starts, the SDK sends out the streaming quality data (resolution, frame rate, bit rate, etc.) regularly through this callback.

this.state.zg.on('publisherStateUpdate', result => {
    // Callback for updates on stream publishing status.
    // ... 
})

this.state.zg.on('publishQualityUpdate', (streamID, stats) => {
    // Callback for reporting stream publishing quality.
    // ... 
})

Play streams

1. Start playing a stream

To start playing a remote audio and video stream from the ZEGO server, call the startPlayingStream method with the corresponding stream ID passed to the streamID parameter.

Set the ref property of ​the video tag object.

<video ref="remoteVideo" autoplay playsinline :muted="true"></video>
const remoteStream = await this.state.zg.startPlayingStream(streamID);

Assign the remoteVideo to the srCObject property.

// The remoteVideo object is the <video> or <audio> element on your webpage.
this.$refs['remoteVideo'].srcObject = remoteStream;

2. Listen for and handle the event callbacks related to stream playing

To listen for and handle various events that may happen after stream playing starts, you can implement the corresponding event callback methods of the event handler as needed. The following are some common event callbacks related to stream playing:

playerStateUpdate: Callback for updates on stream playing status. After stream playing starts, if the status changes (for example, when the stream playing is interrupted due to network issues and the SDK retries to start playing the stream again), the SDK sends out the event notification through this callback.

playQualityUpdate: Callback for reporting stream playing quality. After stream playing starts, the SDK sends out the streaming quality data (resolution, frame rate, bit rate, etc.) regularly through this callback.

this.state.zg.on('playerStateUpdate', result => {
    // Callback for updates on stream playing status.
    // ...
})

this.state.zg.on('playQualityUpdate', (streamID,stats) => {
    // Callback for reporting stream playing quality.
})

Test out real-time audio and video features

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.

Stop publishing and playing streams

1. Stop publishing a stream

To stop publishing a local audio and video stream to remote users, call the stopPublishingStream method with the corresponding stream ID passed to the streamID parameter.

this.state.zg.stopPublishingStream(streamID)

2. Destroy a local media stream

To destroy a local media stream, call the destroyStream method.

To stop the local video preview, you need to manually destroy the video element after destroying the local media stream.

// localStream is the MediaStream object created when calling the createZegoStream method.
this.state.zg.destroyStream(localStream)

3. Stop playing a stream

To stop playing a remote audio and video stream, call the stopPlayingStream method with the corresponding stream ID passed to the streamID parameter.

this.state.zg.stopPlayingStream(streamID)

Log out of a room

To log out of a room, call the logoutRoom method with the corresponding room ID passed to the roomID parameter.

this.state.zg.logoutRoom(roomID)