在 React 中基于 ZEGO Web SDK 实现音视频通话

React 是用于构建 Web 和原生交互界面的库，目前全球有几百万开发者使用 React 构建 Web 应用或原生应用。ZEGO Web SDK 是一个具有毫秒级低延迟的实时音视频 SDK，开发者可以利用它在应用中快速实现音视频通话功能。

ZEGO Web SDK 最新版本具有跨平台适配、抗弱网、毫秒级延迟以及低成本开发等能力。本文将介绍如何基于 ZEGO Web SDK 快速使用 React 实现一个简单的实时音视频通话。

必要条件

在实现基本的实时音视频功能之前，请确保：

1. 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 Server 地址，如下图：

2. 已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考 快速开始 – 集成 。

3. 请参考 下载示例源码 获取源码。相关源码请查看 “/express-demo-web/src/Examples/Framework/React” 目录下的文件。

实现步骤

1. 创建引擎

在 “/express-demo-web/src/Examples/Framework/React/index.html” 文件中引入 react.js、react-dom.js、babel.js。

// 引入 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>

// 引入 babel.min.js 编译 ES6 语法
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

创建 ZegoExpressEngine 引擎实例，将申请到的 AppID 传入参数 “appID”，将接入服务器地址传入参数 “server”。

// 初始化实例
class CommonUsageReact extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            zg: null
        }
    }
    createZegoExpressEngineOption(){
        const zg = new ZegoExpressEngine(appID, server)
        this.setState({
            zg:zg
        },() => {
            // 监听事件回调
            this.initEvent();
        })
    }
}

2. 登录房间

生成 Token

登录房间需要用于验证身份的 Token，获取方式请参考 使用 Token 鉴权。如需快速调试，可使用控制台生成临时 Token。

登录房间

调用 loginRoom 接口，传入房间 ID 参数 “roomID”、“token” 和用户参数 “user”，根据实际情况传入参数 “config”，登录房间。

// 登录房间，成功则返回 true
// userUpdate 设置为 true 会开启监听 roomUserUpdate 回调，默认情况下不会开启该监听
const result = await this.state.zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});

监听登录房间后的事件回调

根据实际应用需要，在登录房间前监听想要关注的事件通知，比如房间状态更新、用户状态更新、流状态更新等。

// 房间状态更新回调
this.state.zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {
        if (reason == ZegoRoomStateChangedReason.Logining) {
            // 登录中
        } else if (reason == ZegoRoomStateChangedReason.Logined) {
            // 登录成功
            //只有当房间状态是登录成功或重连成功时，推流（startPublishingStream）、拉流（startPlayingStream）才能正常收发音视频
            //将自己的音视频流推送到 ZEGO 音视频云
        } else if (reason == ZegoRoomStateChangedReason.LoginFailed) {
            // 登录失败
        } else if (reason == ZegoRoomStateChangedReason.Reconnecting) {
            // 重连中
        } else if (reason == ZegoRoomStateChangedReason.Reconnected) {
            // 重连成功
        } else if (reason == ZegoRoomStateChangedReason.ReconnectFailed) {
            // 重连失败
        } else if (reason == ZegoRoomStateChangedReason.Kickout) {
            // 被踢出房间
        } else if (reason == ZegoRoomStateChangedReason.Logout) {
            // 登出成功
        } else if (reason == ZegoRoomStateChangedReason.LogoutFailed) {
            // 登出失败
        }
});

// 用户状态更新回调
this.state.zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.warn(
        `roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
        JSON.stringify(userList),
    );
});

// 流状态更新回调
// 回调方法具体实现可以参考“视频通话”示例源码文件 /src/Examples/QuickStart/VideoTalk/index.js
this.state.zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // 流新增，开始拉流
    } else if (updateType == 'DELETE') {
        // 流删除，停止拉流
    }
});

3. 推流

创建流

HTML 上创建媒体流播放组件的容器 <div>。

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

开始推流前需要创建本端的音视频流，调用 createZegoStream 接口，默认会采集摄像头画面和麦克风声音。

// 调用 createZegoStream 接口后，需要等待 ZEGO 服务器返回流媒体对象才能执行后续操作
const localStream = await this.state.zg.createZegoStream();

// 播放预览推流前或者推流中的视频。
localStream.playVideo(document.querySelector("#local-video"), {enableAutoplayDialog:true});

开始推流

调用 startPublishingStream 接口，传入流 ID 参数 “streamID” 和创建流得到的流对象 “localStream”，向远端用户发送本端的音视频流。

// localStream 为创建流获取的 MediaStream 对象
this.state.zg.startPublishingStream(streamID, localStream)

监听推流后的事件回调

根据实际应用需要，在推流后监听想要关注的事件通知，比如推流状态更新、推流质量等。

// 注册 publisherStateUpdate 推流状态更新事件回调。
this.state.zg.on('publisherStateUpdate',({streamID, state}) => {
    // streamID 为推流的流 ID，state 为推流状态。 可以根据这些状态做一些逻辑处理。
})
// 注册 publishQualityUpdate 推流质量更新事件回调。
this.state.zg.on('publishQualityUpdate', (streamID, stats) => {
    // stats 对象中可以拿到分辨率、帧率、码率等流质量相关信息做数据展示。
})

4. 拉流

开始拉流

调用 startPlayingStream 接口，根据传入的流 ID 参数 “streamID”，拉取远端已推送到 ZEGO 服务器的音视频画面。

HTML 上创建媒体流播放组件的容器 <div>。

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

将拉取到远端流在界面播放。

const remoteStream = await this.state.zg.startPlayingStream(streamID);

// 创建媒体流播放组件
const remoteView = this.state.zg.createRemoteStreamView(remoteStream);
// "remote-video" 为容器 DOM 元素 id。
remoteView.play("remote-video", {enableAutoplayDialog:true});

监听拉流后的事件回调

根据实际应用需要，在拉流后监听想要关注的事件通知，如拉流状态变更、拉流质量等。

// 注册 playerStateUpdate 拉流状态更新事件回调。
this.state.zg.on('playerStateUpdate',({streamID, state}) => {
    // streamID 为拉流的流 ID，state 为拉流状态。 可以根据这些状态做一些逻辑处理。
})
// 注册 playQualityUpdate 拉流质量更新事件回调。
this.state.zg.on('playQualityUpdate', (streamID, stats) => {
    // stats 对象中可以拿到分辨率、帧率、码率等流质量相关信息做数据展示。
})

5. 体验实时音视频功能

在真机中运行项目，运行成功后，可以看到本端视频画面。

6. 停止推拉流

停止推流

调用 stopPublishingStream 接口停止向远端用户发送本端的音视频流。

this.state.zg.stopPublishingStream(streamID)

销毁流

调用 destroyStream 接口销毁创建的流数据，销毁流后开发需自行销毁 video（停止采集）。

// localStream 是调用 createZegoStream 接口获取的 MediaStream 对象
this.state.zg.destroyStream(localStream)

停止拉流

调用 stopPlayingStream 接口停止拉取远端推送的音视频流。

this.state.zg.stopPlayingStream(streamID)

7. 退出房间

调用 logoutRoom 接口退出房间。

this.state.zg.logoutRoom(roomID)

通过以上步骤，即可使用 React 实现一个简单的实时音视频通话。更多信息请参考文档《使用 React 实现音视频功能（Web）》